使用Anime.js基于JavaScript的动画，第3部分：探索值、时间轴和播放

在Anime.js系列的上一篇教程中，您了解了控制不同目标元素的动画方式的不同类型的参数。您还学习了如何使用函数参数来逐渐更改元素的延迟或持续时间。

在本教程中，我们将更进一步，学习如何使用常规数字、基于函数的值和关键帧来指定属性值本身。您还将学习如何使用时间轴按顺序播放动画。

指定属性值

Anime.js允许您指定目标元素的可动画属性的最终值。动画的初始值或起始值是该属性的默认值。CSS中指定的任何值也可以作为起始值。有多种指定最终值的方法。

它也可以是无单位的数字。在这种情况下，在计算任何属性值时将使用属性的原始或默认单位。您还可以将值指定为字符串，但该字符串必须至少包含一个数值。字符串值的示例为10vh、80%和9.125turn。

立即学习“Java免费学习笔记（深入）”；

您还可以指定相对于当前值的属性值，而不是指定绝对值。例如，您可以使用+=150px作为值，将最终translateY值设置为比当前值大150px。请记住，在指定相对值时只能使用加法、乘法和减法。

在设置颜色动画时，您不能使用红色、黑色和蓝色等颜色名称来设置动画的最终颜色值。在这种情况下，颜色动画根本不会发生，并且变化将是即时的。对颜色进行动画处理的唯一方法是将值指定为十六进制数字或RGB和HSL值。

您可能已经注意到，我们没有为目标元素指定初始值来为其设置动画。Anime.js根据我们的CSS和这些属性的默认值自动确定初始值。但是，您可以使用数组指定属性的默认值以外的初始值。数组中的第一项表示初始值，第二项表示最终值。

您可以使用函数为不同的参数设置不同的值，而不是为所有目标元素使用相同的最终值。该过程类似于指定基于函数的属性参数。