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

司浩壤

2023-12-01

在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);
  },
  autoplay: false
});

var randomRadius = anime({
  targets: '.square',
  borderRadius: function(el) {
    return 20 + Math.random()*el.offsetWidth/4;
  },
  autoplay: false
});

var randomAll = anime({
  targets: '.square',
  translateY: function(el, i) {
    return 50 + 50 * i;
  },
  scale: function(el, i) {
    return Math.random()*1.5 + i/10;
  },
  rotate: function() {
    return anime.random(-180, 180);
  },
  borderRadius: function(el) {
    return Math.random()*el.offsetWidth/2;
  },
  duration: function() { return anime.random(1500, 2400); },
  delay: function() { return anime.random(0, 1000); },
  autoplay: false
});

对于translateY属性，我们使用元素的索引来设置转换值。使用50 * (i + 1)将每个元素的translateY值增加50个像素。

缩放动画还使用元素的索引以及内置的Math.random()函数来返回小于1的浮点伪随机数。这样，元素将随机缩放，但i/10部分特性的变化会稍微增加最终出现较大元素的可能性。

旋转动画的代码中，我们使用的是anime.random(a, b)辅助函数来获取-180和180这个功能对像的属性分配随机整数值有用之间的随机整数translateY和rotate 。使用此功能分配随机标度值将产生极端结果。

通过使用el函数参数计算目标元素的宽度来确定不同元素的边界半径值。最后，代码的最后一部分也将随机值分配给duration和delay参数。

您可以看到最后一部分实现的动画是非常随机的。元素的不同属性的值或其延迟和持续时间值之间没有关系。在现实生活中，使用可以为动画添加方向感的值更为明智。

也可以使用关键帧为目标元素的不同属性设置动画。每个关键帧由属性对象的数组组成。您可以使用该对象指定动画那部分的属性值， duration ， delay和easing 。以下代码创建基于关键帧的翻译动画。

var keyframeTranslation = anime({
  targets: '.square',
  translateY: [
    { value: 100, duration: 500},
    { value: 300, duration: 1000, delay: 1000},
    { value: 40, duration: 500, delay: 1000}
  ],
  autoplay: false
});

var keyframeAll = anime({
  targets: '.square',
  translateY: [
    { value: 100, duration: 500},
    { value: 300, duration: 1000, delay: 1000},
    { value: 40, duration: 500, delay: 1000}
  ],
  scale: [
    { value: 1.1, duration: 500},
    { value: 0.5, duration: 1000, delay: 1000},
    { value: 1, duration: 500, delay: 1000}
  ],
  rotate: [
    { value: 60, duration: 500},
    { value: -60, duration: 1000, delay: 1000},
    { value: 75, duration: 500, delay: 1000}
  ],
  borderRadius: [
    { value: 10, duration: 500},
    { value: 50, duration: 1000, delay: 1000},
    { value: 25, duration: 500, delay: 1000}
  ],
  delay: function(el, i) { return 100*(i+1) },
  autoplay: false
});

您还可以通过为所有参数指定不同或相同的值来一次为多个属性设置动画。在第二种情况下，全局delay参数根据所有元素的索引将初始延迟应用于所有元素。此延迟与应用于关键帧内每个属性的延迟无关。

创建和操纵时间表

到目前为止，在该系列中，我们一直在使用delay参数以特定顺序播放不同的动画。为了为此目的使用延迟，我们还需要知道上一个动画的持续时间。

随着动画序列复杂性的增加，保持正确的延迟值变得非常繁琐。动画之一持续时间的任何变化都将迫使我们重新计算所有延迟值，以使动画保持原始顺序。

解决此问题的更好方法是使用时间轴来控制动画序列。您必须使用anime.timeline()函数在Anime.js中创建时间线。您还可以将不同的参数作为对象传递给此函数。这些参数可以指定时间线的播放方向，数字循环和autoplay参数，以确定是否应自动播放动画。所有这些参数已在本系列的参数教程中进行了详细讨论。

您可以使用add()方法将不同的动画添加到时间轴。添加到时间轴的所有动画将按照添加顺序进行播放。可以指定绝对或相对偏移值来控制动画的播放顺序。

当使用相对偏移值时，相对于先前动画的时间确定当前动画的开始时间。相对偏移可以是三种类型：

+ = offset ：在这种情况下，当前动画在自上一个动画结束以来经过了毫秒的偏移量后开始播放。
-= offset ：在这种情况下，当前动画在上一个动画结束之前开始播放偏移量 （毫秒）。
* = offset ：在这种情况下，当前动画将在毫秒（等于过去动画的动画持续时间的偏移时间）开始播放。

以下代码显示了如何创建基本时间线和具有相对偏移值的时间线。

var basicTimeline = anime.timeline({
  direction: "alternate",
  loop: 2,
  autoplay: false
});

basicTimeline.add({
    targets: '.square',
    translateY: 200
 }).add({
    targets: '.red',
    translateY: 100
 }).add({
    targets: '.blue',
    translateY: 0
 });

var offsetTimeline = anime.timeline({
  direction: "alternate",
  loop: 2,
  autoplay: false
});

offsetTimeline.add({
    targets: '.square',
    translateY: 200
 }).add({
    targets: '.red',
    offset: '+=1000',
    translateY: 100
 }).add({
    targets: '.blue',
    offset: '*=2',
    translateY: 0
 });

尝试单击以上演示中的“ 偏移时间轴”按钮。您将看到，红色方块动画的结束与蓝色方块动画的开始之间有2秒的延迟。

我们尚未为红场动画指定duration 。因此，将默认值1000ms或1s用作持续时间。蓝色正方形动画的乘数偏移使该值加倍，这将导致动画延迟两秒钟。

使用绝对偏移值时，时间轴的开始时间将用作参考点。通过在时间轴的开始处使用较大的偏移值，可以反转播放动画的顺序。

播放选项

Anime.js在任何给定时间点都有多种播放，暂停，重启或寻找动画或时间表的选项。

play()函数允许我们从动画的当前进度开始动画。 pause()函数将在调用函数时冻结动画。 restart()函数从头开始播放动画，而不管其当前进度如何。 seek(value)函数可用于将动画提前value毫秒数。

您应该记住， play()函数仅从动画暂停时开始恢复动画。如果动画已经结束，则无法使用play()重播动画。要重播动画，您将必须使用restart()函数。

var slowAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  duration: 4000,
  easing: 'linear',
  autoplay: false
});

document.querySelector('.play').onclick = slowAnimation.play;
document.querySelector('.pause').onclick = slowAnimation.pause;
document.querySelector('.restart').onclick = slowAnimation.restart;

var seekInput = document.querySelector('.seek');

seekInput.oninput = function() {
  slowAnimation.seek(slowAnimation.duration * (seekInput.value / 100));
};

请注意，我们没有使用seekInput.value来为seek函数设置值。这是因为在标记中，范围输入的最大值已设置为100。直接使用输入范围的值将使我们最多只能搜索100ms。将范围输入值乘以动画持续时间可确保我们可以在范围滑块上从头到尾查找动画。

最后的想法

在本教程中，您学习了如何为数字，函数或关键帧设置不同的属性值的动画。您还学习了如何在Anime.js中控制和操纵时间轴，以控制动画序列的播放顺序。

如果您正在寻找其他资源来学习或在工作中使用，请查看Envato市场中可用的资源。

如果您对本教程有任何疑问，请在评论中让我知道。

翻译自: https://code.tutsplus.com/tutorials/javascript-based-animations-using-animejs-values-timeline-and-playback--cms-28923

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

指定属性值

创建和操纵时间表

播放选项

最后的想法

相关阅读

相关文章

相关问答

相关文档