使用Anime.js，第2部分：参数基于JavaScript的动画

Anime.js动画教程第二部分：参数详解。第一部分教程中，我们学习了如何指定动画目标元素以及可动画化的CSS属性和DOM属性。之前的动画非常基础，所有目标元素只是以固定速度移动一定距离或改变圆角半径。

有时，您可能需要以更具节奏感的方式为目标元素设置动画。例如，您可能需要十个不同的元素从左向右移动，每个元素的动画开始之间延迟500毫秒。同样，您可能希望根据每个元素的位置来增加或减少动画持续时间。

本教程将向您展示如何使用Anime.js通过特定参数来精确控制不同元素的动画时间，从而控制单个元素或所有元素的动画序列播放顺序。

属性参数

这些参数允许您控制单个属性或一组属性的持续时间、延迟和缓动效果。stagger() 方法

到目前为止，我们使用函数为目标元素的动画延迟或持续时间传递不同的值。您还可以借助stagger()方法获得相同的功能，该方法基本上允许您控制动画如何在多个元素之间发生。它接受两个参数。第一个是您想要应用的值，第二个是一个包含许多参数的对象，这些参数决定了交错的应用方式。

以下是一个示例，展示了将start参数设置为1000进行交错。示例如下：

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

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

如果在最后一个元素开始时必须应用非零持续时间值怎么办？在这种情况下，我们可以使用stagger()方法的以下参数来实现。如您所见，最终结果没有区别。

需要指出的是，stagger方法在旧版本的库中不起作用。确保您使用的是最新版本以避免任何错误。

总结

在本教程中，您学习了不同类型的参数，这些参数可用于控制Anime.js中目标元素的动画。属性参数用于控制单个属性的动画。

您可以使用它们来控制为单个元素播放动画的顺序。函数参数允许您相对于整个组来控制单个元素的动画时间和速率。动画参数允许您控制为不同元素播放动画的方式。

以上是使用Anime.js，第2部分：参数基于JavaScript的动画的详细内容。更多信息请关注PHP中文网其他相关文章！