在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