在Anime.js系列的第一篇教程中 ,您了解了指定要设置动画的目标元素的各种方法以及可以动画化CSS属性和DOM属性的种类。 上一教程中的动画非常基础。 所有目标元素都只是移动一定距离或以固定速度更改边界半径。
有时,您可能需要以更有节奏的方式为目标元素设置动画。 例如,您可能要从左到右移动十个不同的元素,每个元素在动画开始之间的延迟为500ms。 同样,您可能希望根据每个元素的位置来增加或减少其动画持续时间。
在本教程中,您将学习如何使用Anime.js使用特定参数正确地计时不同元素的动画时间。 这将允许您控制单个元素或所有元素的动画序列的播放顺序。
属性参数
这些参数使您可以一次控制单个属性或一组属性的持续时间,延迟和缓动。 duration
和delay
参数以毫秒为单位。 持续时间的默认值为1000ms或1s。
这意味着,除非另有说明,否则应用于元素的任何动画将播放1秒。 delay
参数指定了触发动画后动画开始播放的时间。 延迟的默认值为0。这意味着动画将在被触发后立即开始。
您可以使用easing
参数来控制动画在其激活期间的播放速率。 一些动画从慢开始,在中间加快速度,然后在最后再次慢下来。 其他人则以良好的步伐开始,然后在其余时间里变慢。
但是,在所有情况下,动画总是在使用duration
参数指定的duration
内完成。 Anime.js提供了许多缓动功能,您可以仅通过使用其名称直接将其应用于元素。 对于某些缓动功能,还可以为elasticity
参数设置一个值,以控制元素值像弹簧一样来回弹跳的程度。
您将在本系列的最后一篇教程中了解有关不同缓动功能的更多信息。 以下代码段显示了如何将所有这些参数应用于不同的动画。