Getting Started with Anime.js

Anime.js: Detailed explanation of lightweight JavaScript animation library

Anime.js is an excellent JavaScript animation library known for its ease of use, concise API and powerful features. It is compact and compatible with all modern browsers, including IE/Edge 11. Although the documentation is concise, its structure is clear and easy to get started. This article will explain in detail how to use it.

Core points:

• Anime.js is a lightweight, easy-to-use JavaScript animation library that supports CSS properties, SVG, DOM properties and JavaScript objects, making it competent for a variety of web animation projects.
• Use Anime.js, just import from the CDN through script tags or download the library file directly, and then define the targets and properties in the anime() function to create the animation.
• Anime.js' powerful timeline feature allows multiple animations to be synchronized, which is especially important for complex animation sequences.
• This library uses keyframes and interlacing effects to enhance animation details and control, providing developers with tools to create dynamic and visually appealing web animations.
• To create more interactive and responsive animations, Anime.js can be integrated with event listeners to trigger animations based on user actions (such as clicks or mouse movements), thereby enhancing user engagement on the web page.

Beginner of Anime.js:

First, download and include the anime.js file into your HTML page:

<!-- 下载后引入 -->
<🎜>

Or, use the latest version on CDN:

<!-- 使用CDN -->
<🎜>

Create an animation, use the anime() function, which accepts an object as a parameter, and describes all animation details in this object:

let myAnimation = anime({
  /* 动画细节 */
});

Animation attributes are divided into four categories:

• Targets: Element reference to animation. It can be a CSS selector (div, #square, .rectangle), a DOM node or a list of nodes, or a pure JavaScript object. It can also be a combination of arrays of the above types.
• Properties: Properties that can be animated, including CSS attributes, JavaScript object attributes, DOM attributes, and SVG attributes.
• Property Parameters: Parameters related to properties, such as duration, delay, easing functions, etc.
• Animation Parameters: Parameters related to animation, such as direction, loop, etc.

Practical example:

let animation = anime({
  targets: 'div', // 目标
  translateX: 100, // 属性
  borderRadius: 50, // 属性
  duration: 2000, // 属性参数：持续时间 2 秒
  easing: 'linear', // 属性参数：线性缓动
  direction: 'alternate' // 动画参数：交替方向
});

(CodePen sample link will be here)

In this example:

1. We choose a green square (stylized div).
2. We move it 100 pixels to the left while converting it into a circle.
3. We set this to happen smoothly in two seconds (linear means no easing is applied to the animation).
4. By setting the direction property to alternate, we instruct the div element to return its initial position and shape after the animation is complete. Anime.js does this by playing animations in reverse.

Please note that when specifying property values, we do not need to use units. If the original value has units, it is automatically added to the animation value. However, if you want to use a specific unit, you must add it explicitly.

More complex animation:

The following are some more complex animation examples, including swing animation, battery-charged animation, and animations using keyframes and timelines. (The codePen sample links and corresponding code snippets will be included here, and the code will be explained in detail, similar to the structure of the original document)

Conclusion:

Anime.js is a simple and powerful animation engine that can be used to create a wide variety of animations. Hope this article can help you better understand and use Anime.js. (You can add some additional information about the future development of Anime.js or related resources here)

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