Home > Article > Web Front-end > Introduction to Anime.js

Introduction to Anime.js

WBOYforward: 2023-09-02 12:45:022047browse

Anime.js 简介

Anime.js is a lightweight JavaScript library with a simple, efficient API. It works with JavaScript objects, CSS, and DOM elements, and Anime.js is easy to use.

Traditionally, we create animations by gradually modifying the style of an element. Such actions can be achieved with JavaScript, but even the simplest animations are difficult and time-consuming to develop.

Anime.js makes animation easier by providing various tools. It provides the ability to adjust timing and user input, and supports many animations running simultaneously on the same object.

Most popular browsers also support Anime.js.

Anime.js installation part

After downloading anime.min.js file from the link provided below, you can use it directly -

<script src="./folder/subFolder/anime.min.js"></script>

You can find the link by searching for "anime.js CDN" and pasting it into the script tag

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>

Basic syntax of Anime.js

We have seen how to install anime.js and its basics, now let us turn to the syntax of anime.js -

let animation = anime ({
   targets,
   properties,
   property parameters,
   animation parameters,
});

In the above syntax, we create an animation using the anime() function provided by Anime.js. The anime() function accepts a JavaScript object as a parameter, which contains the properties of our animation.

Now let us discuss each term of Anime.js basic syntax in detail -

Target

A reference to the component we wish to animate is contained in the target and can take the form of an HTML tag, class or id element, either a CSS selector, a single DOM node or an array of DOM nodes, an object created using JavaScript, with at least A numeric property and an array consisting of any of the first three values.

Attributes

We mention the property we want to animate after mentioning the target. These properties can include CSS, JS, and SVG properties that can be animated.

Attribute parameters

Property parameters include aspects that largely affect animation timing. This attribute parameter covers multiple characteristic parameters, including duration, delay, end delay, easing, turn, etc.

Animation parameters

The forward and backward movements of the animation are controlled by animation parameters. This includes animation-related options, including direction, looping, and autoplay.

Controls

In order to make the animation interactive, Anime.js also provides control tools. Here are some examples of these techniques starting, pausing, reversing, and restarting.

Example

In this example, we will create some div elements with specific width and height dimensions. We'll use some CSS to add a specific background color. First in the JavaScript part we will add all the required stuff in the Anime function and then pass the object with properties

Now with everything covered, our main goal is to animate on the desired element (here a div block). In this example we will use translateX which moves from the initial position towards the x-axis.

<html>
<head>
   <script src= "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script> 
</head>
<body>
   <h2>
      Introduction of Anime.Js
   </h2>
   <div style="background: green;
      height: 30px;
      width: 50px;">
   </div>
   <script>
      let animation = anime({
         targets: "div",
         translateX: 150,
         easing: "linear",
         direction: "alternate",
         height: "100px",
         width: "100px",
         duration: 2300,
         loop: true,
      });
   </script>
</body>
</html>

In the above code, first, we define the main structure of the HTML code, and then add the anime.js library to our code using the "src" tag at the head of the code. First in the body, we define the div element on which we want to animate. Then inside the script tag we define the type of animation we want, which is the movement of a given green block from its position to another over a defined period of time, which will also change the size of the block.

Example

In the previous example we defined a box and animated it to increase its height and width, now we will change the height and width but increase the width and decrease the height.

<html>
<head>
   <script src= "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
</head>
<body>
   <h2>
      Increasing the size of width and decreasing the size of height
   </h2>
   <div style="background: green;
      height: 100px;
      width: 10px;">
   </div>
   <script>
      let animation = anime({
         targets: "div",
         translateX: 150,
         easing: "linear",
         direction: "alternate",
         height: "10px",
         width: "100px",
      });
   </script>
</body>
</html>

In the above code, first, we define the main structure of the HTML code, and then add the anime.js library to our code using the "src" tag at the head of the code. First in the body, we define the div element on which we want to animate. Then inside the script tag we define the type of animation we want, i.e. the movement of a given green block from its position to another over a defined period of time, this will also change the size of the block, i.e. from decreasing height to increasing The size of the width.

Example

In this example, we will use anime.js library to animate a rectangular box into a circle. We set the duration of the change to 3000 seconds and run it in a loop. Let's look at the code -

<html>
<head>
   <script src= "https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js"></script>
</head>
<body>
   <center>
      <h1 style="color: red;">More Animation by anime.js</h1>
      <b>
         Here we will do animation on the border
      </b>
      <div style="background: blue;
         width: 100px;
         height: 100px;
         padding-top: 10px; ">
      </div>
   </center>
   <script>
      let animation = anime({
         targets: "div",
         easing: "easeInOutQuad",
         loop: true,
         duration: 3000,
         backgroundColor: "yellow",
         borderRadius: "110px",
      });
   </script>
</body>
</html>

In the above code, first, we define the main structure of the HTML code, and then add the anime.js library to our code using the "src" tag at the head of the code. First in the body, we define the div element on which we want to animate. Then inside the script tag we define the type of animation we want, which is a given blue box moving to a blue circle in three seconds or 3000 milliseconds.

in conclusion

In this tutorial, we discussed anime.js in detail with examples. Anime.js is a lightweight JavaScript library with a simple, efficient API. It works with JavaScript objects, CSS, and DOM elements, and Anime.js is easy to use. Traditionally, we create animation by gradually modifying the style of an element. Such actions can be achieved with JavaScript, but even the simplest animations are difficult and time-consuming to develop.

The above is the detailed content of Introduction to Anime.js. For more information, please follow other related articles on the PHP Chinese website!

JavaScript css html 循环 JS 对象 dom 选择器

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：Traversing using jQueryNext article：Traversing using jQuery

See more

Introduction to Anime.js

Anime.js installation part

Basic syntax of Anime.js

Target

Attributes

Attribute parameters

Animation parameters

Controls

Example

Example

Example

in conclusion

Related articles