JavaScript-Based Animations Using Anime.js, Part 2: Parameters

Anime.js animation tutorial Part 2: Detailed explanation of parameters. In the first part of the tutorial, we learned how to specify animated target elements as well as animated CSS and DOM properties. The previous animation was very basic, and all target elements simply moved a certain distance at a fixed speed or changed the rounded radius.

Sometimes, you may need to animate the target elements in a more rhythmic way. For example, you might need ten different elements to move from left to right, with each element's animation delaying by 500 milliseconds between the beginnings. Likewise, you may want to increase or decrease the animation duration based on the position of each element.

This tutorial will show you how to use Anime.js to accurately control the animation time of different elements with specific parameters, thereby controlling the animation sequence playback order of a single element or all elements.

Attribute Parameters

These parameters allow you to control the duration, delay, and easing effects of a single attribute or a group of attributes. stagger() Method

So far, we have used functions to pass different values ​​for the animation delay or duration of the target element. You can also get the same functionality with the help of the stagger() method, which basically allows you to control how the animation occurs between multiple elements. It accepts two parameters. The first is the value you want to apply, and the second is an object with many parameters that determine how the interleaved is applied.

The following is an example showing the interleaving of the start parameter set to 1000. Examples are as follows:

// 持续时间从1000开始，每次增加800
duration: function(target, index) {
    return 1000 + index * 800;
},

// 使用stagger()实现等效功能
duration: anime.stagger(800, {"start": 1000})

What if a non-zero duration value must be applied at the beginning of the last element? In this case, we can use the following parameters of the stagger() method to achieve this. As you can see, the end result is no difference.

It should be noted that the stagger method does not work in older versions of the libraries. Make sure you are using the latest version to avoid any errors.

Summary

In this tutorial, you learned different types of parameters that can be used to control the animation of target elements in Anime.js. Attribute parameters are used to control the animation of a single attribute.

You can use them to control the order in which animations are played for a single element. Function parameters allow you to control the animation time and rate of a single element relative to the entire group. Animation parameters allow you to control how animations are played for different elements.

The above is the detailed content of JavaScript-Based Animations Using Anime.js, Part 2: Parameters. For more information, please follow other related articles on the PHP Chinese website!