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

在Anime.js系列的第一篇教程中 ，您了解了指定要设置动画的目标元素的各种方法以及可以动画化CSS属性和DOM属性的种类。 上一教程中的动画非常基础。 所有目标元素都只是移动一定距离或以固定速度更改边界半径。

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

在本教程中，您将学习如何使用Anime.js使用特定参数正确地计时不同元素的动画时间。 这将允许您控制单个元素或所有元素的动画序列的播放顺序。

属性参数

这些参数使您可以一次控制单个属性或一组属性的持续时间，延迟和缓动。 duration和delay参数以毫秒为单位。 持续时间的默认值为1000ms或1s。

这意味着，除非另有说明，否则应用于元素的任何动画将播放1秒。 delay参数指定了触发动画后动画开始播放的时间。 延迟的默认值为0。这意味着动画将在被触发后立即开始。

您可以使用easing参数来控制动画在其激活期间的播放速率。 一些动画从慢开始，在中间加快速度，然后在最后再次慢下来。 其他人则以良好的步伐开始，然后在其余时间里变慢。

但是，在所有情况下，动画总是在使用duration参数指定的duration内完成。 Anime.js提供了许多缓动功能，您可以仅通过使用其名称直接将其应用于元素。 对于某些缓动功能，还可以为elasticity参数设置一个值，以控制元素值像弹簧一样来回弹跳的程度。

您将在本系列的最后一篇教程中了解有关不同缓动功能的更多信息。 以下代码段显示了如何将所有这些参数应用于不同的动画。