Introduction to Anime.js-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

Introduction to Anime.js

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 02, 2023 pm 12:45 PM

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 id="More-Animation-by-anime-js">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!

Statement

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

JavaScript and the Web: Core Functionality and Use CasesApr 18, 2025 am 12:19 AM

The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.

Understanding the JavaScript Engine: Implementation DetailsApr 17, 2025 am 12:05 AM

Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.

Python vs. JavaScript: The Learning Curve and Ease of UseApr 16, 2025 am 12:12 AM

Python is more suitable for beginners, with a smooth learning curve and concise syntax; JavaScript is suitable for front-end development, with a steep learning curve and flexible syntax. 1. Python syntax is intuitive and suitable for data science and back-end development. 2. JavaScript is flexible and widely used in front-end and server-side programming.

Python vs. JavaScript: Community, Libraries, and ResourcesApr 15, 2025 am 12:16 AM

Python and JavaScript have their own advantages and disadvantages in terms of community, libraries and resources. 1) The Python community is friendly and suitable for beginners, but the front-end development resources are not as rich as JavaScript. 2) Python is powerful in data science and machine learning libraries, while JavaScript is better in front-end development libraries and frameworks. 3) Both have rich learning resources, but Python is suitable for starting with official documents, while JavaScript is better with MDNWebDocs. The choice should be based on project needs and personal interests.

From C/C to JavaScript: How It All WorksApr 14, 2025 am 12:05 AM

The shift from C/C to JavaScript requires adapting to dynamic typing, garbage collection and asynchronous programming. 1) C/C is a statically typed language that requires manual memory management, while JavaScript is dynamically typed and garbage collection is automatically processed. 2) C/C needs to be compiled into machine code, while JavaScript is an interpreted language. 3) JavaScript introduces concepts such as closures, prototype chains and Promise, which enhances flexibility and asynchronous programming capabilities.

JavaScript Engines: Comparing ImplementationsApr 13, 2025 am 12:05 AM

Different JavaScript engines have different effects when parsing and executing JavaScript code, because the implementation principles and optimization strategies of each engine differ. 1. Lexical analysis: convert source code into lexical unit. 2. Grammar analysis: Generate an abstract syntax tree. 3. Optimization and compilation: Generate machine code through the JIT compiler. 4. Execute: Run the machine code. V8 engine optimizes through instant compilation and hidden class, SpiderMonkey uses a type inference system, resulting in different performance performance on the same code.

Beyond the Browser: JavaScript in the Real WorldApr 12, 2025 am 12:06 AM

JavaScript's applications in the real world include server-side programming, mobile application development and Internet of Things control: 1. Server-side programming is realized through Node.js, suitable for high concurrent request processing. 2. Mobile application development is carried out through ReactNative and supports cross-platform deployment. 3. Used for IoT device control through Johnny-Five library, suitable for hardware interaction.

Building a Multi-Tenant SaaS Application with Next.js (Backend Integration)Apr 11, 2025 am 08:23 AM

I built a functional multi-tenant SaaS application (an EdTech app) with your everyday tech tool and you can do the same. First, what’s a multi-tenant SaaS application? Multi-tenant SaaS applications let you serve multiple customers from a sing

See all articles