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

在Anime.js系列的上一教程中，您了解了用于控制应如何对不同目标元素进行动画处理的各种参数。 您还学习了如何使用函数参数逐渐更改元素的延迟或持续时间。

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

指定属性值

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

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

除了指定绝对值，还可以指定相对于其当前值的属性值。 例如，可以设置最终的translateY值设定为150px比使用电流值+=150px作为值。 请记住，在指定相对值时只能使用加，乘和减。

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

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

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

var uniqueTranslation = anime({
  targets: '.square',
  translateY: function(el, i) {
    return 50 * (i + 1);
  },
  autoplay: false
});

var randomScaling = anime({
  targets: '.square',
  scale: function(el, i) {
    return Math.random()*1.5 + i/10;
  },
  autoplay: false
});

var randomRotation = anime({
  targets: '.square',
  rotate: function() {
    return anime.random(-180, 180);
  },
  a