Anime.js实战：JavaScript动画制作进阶指南（第二部分）

在 Anime.js 系列的第一个教程中，您了解了指定要设置动画的目标元素的不同方法以及可以设置动画的 CSS 属性和 DOM 属性的类型。上一个教程中的动画非常基础。所有目标元素只是移动一定距离或以固定速度改变边界半径。

有时，您可能需要以更有节奏的方式为目标元素设置动画。例如，您可能有 10 个不同的元素，想要从左向右移动，每个元素的动画开始之间有 500 毫秒的延迟。同样，您可能希望根据每个元素的位置增加或减少动画持续时间。

在本教程中，您将学习如何使用 Anime.js 使用特定参数正确计时不同元素的动画。这将允许您控制单个元素或所有元素的动画序列的播放顺序。

属性参数

这些参数允许您一次控制单个属性或一组属性的持续时间、延迟和缓动。 duration 和 delay 参数以毫秒为单位指定。持续时间的默认值为 1000 毫秒或 1 秒。

这意味着除非另有指定，否则应用于元素的任何动画都将播放 1 秒。 delay 参数指定动画在触发后开始所需的时间。延迟的默认值为 0。这意味着动画将在触发后立即开始。

您可以使用 easing 参数来控制动画在活动期间播放的速率。有些动画一开始很慢，中间加快速度，然后在最后再次减慢速度。其他人一开始速度很快，然后在剩下的时间里放慢速度。

但是，在所有情况下，动画始终在使用 duration 参数指定的时间内完成。 Anime.js 提供了许多缓动函数，您可以仅使用元素的名称直接将它们应用于元素。对于某些缓动函数，您还可以为 elasticity 参数设置一个值，以控制元素的值像弹簧一样来回弹跳的程度。

您将在本系列的最后一个教程中了解有关不同缓动函数的更多信息。以下代码片段展示了如何将所有这些参数应用于不同的动画。

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

var delayAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  delay: 800
});

var cubicAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  duration: 1200,
  easing: 'easeInOutCubic'
});

正如您所看到的，这些参数可以独立于其他参数使用，也可以与它们结合使用。 cubicAnimation 同时应用了 duration 和 easing 参数。如果未指定持续时间，动画将运行 1 秒。现在，它将运行 1,200 毫秒或 1.2 秒。

上例中属性参数的一个主要限制是目标元素的所有动画都将具有相同的 duration、delay 和 easing 值。

这可能是也可能不是期望的行为。例如，您可能希望首先平移目标元素，然后为其边框半径设置动画，而不是同时平移和更改目标元素的边框半径。 Anime.js 允许您为 duration、delay、easing 和 指定不同的值各个属性的elastic 参数。下面的代码和演示应该会更清楚。

var indiParam = anime({
  targets: '.square',
  translateY: {
    value: 250
  },
  rotate: {
    value: '2.125turn'
  },
  backgroundColor: {
    value: 'rgb(255,0,0)',
    duration: 400,
    delay: 1500,
    easing: 'linear'
  },
  duration: 1500
});

在上面的代码中，我们想要设置动画的所有属性都有不同的值。背景颜色动画的持续时间为400ms，而旋转和平移动画使用全局持续时间值1500ms。

背景颜色动画也有延迟，因此颜色的任何变化仅在 1500 毫秒过去后才开始。 rotate 和 translateY 属性使用 delay 和 easing 参数的默认值，因为我们既没有为它们提供本地值也没有提供全局值。

基于函数的参数

当您想要更改单个属性的动画顺序和持续时间时，基于属性的参数非常有用。但是，相同的 duration 和 delay 仍将应用于所有目标元素上的各个属性。基于函数的参数允许您单独指定 duration、delay、elasticity 和 easing以紧凑的方式针对不同的目标元素。

在这种情况下，您可以使用函数而不是数字来设置不同参数的值。这些函数接受三个参数：target、index 和 targetCount。 target 参数存储对当前目标元素的引用。 index 参数存储当前目标元素的索引或位置。 targetCount 参数存储目标元素的总数。

当需要根据目标元素的某些属性设置动画值时，target 参数非常有用。例如，您可以将目标元素的 delay、duration 或 easing 值存储在数据属性中，然后稍后访问它们.

类似地，您可以访问目标元素的背景颜色，然后操作它来为各个元素设置最终的唯一颜色值。通过这种方式，您可以对所有元素进行动画处理，使其背景颜色比当前颜色深 20%。

index 参数为您提供当前目标在目标元素列表中的位置。您可以使用它逐步更改不同元素的 duration 和 delay 等参数的值。

当您想要按升序设置值时，这通常很有用。您还可以从 targetCount 中减去 index 以按降序设置值。以下代码片段使用这两个参数来按升序和降序指定值。

var delaySequence = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index) {
    return index * 200;
  }
});

var delaySequenceR = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index, targetCount) {
    return (targetCount - index) * 200;
  }
});

以下代码使用 index 参数为每​​个目标元素设置不同的 easing 值。

var easeInValues = ['easeInQuad', 'easeInCubic', 'easeInQuart', 'easeInQuint', 'easeInSine', 'easeInExpo', 'easeInCirc', 'easeInBack', 'easeInElastic'];

var easeInSequence = anime({
  targets: '.square',
  translateY: 250,
  duration: 2000,
  easing: function(target, index) {
    return easeInValues[index];
  },
  autoplay: false
});

动画参数

最后一组参数允许您指定动画应播放的次数以及播放的方向。您可以使用loop参数指定动画播放的次数。还有一个 autoplay 参数，可以设置为 true 或 false。它的默认值为 true，但您可以通过将其设置为 false 来阻止动画自行启动。

direction 参数控制动画播放的方向。它可以具有三个值：normal、reverse 和 alternate。默认值为 normal，它使动画从开始值到结束值正常播放。一旦目标元素达到结束值，如果 loop 值大于 1，目标元素会突然跳回起始值，然后再次开始动画。

当direction 设置为reverse 并且loop 值大于1 时，动画将反转。换句话说，目标元素从最终状态开始动画，然后向后到达初始状态。一旦它们处于初始状态，元素就会跳回到最终状态，然后再次开始反向动画。 alternate 方向值会在每次循环后更改动画方向。

var normalLoop = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index) {
    return index * 200;
  },
  loop: 4,
  easing: 'easeInSine',
  autoplay: false
});

在下面的演示中，我将循环次数设置为四，以便您可以轻松注意到不同模式下元素动画的差异。

使用 stagger() 方法

到目前为止，在本教程中，我们已经使用函数将不同的值传递给目标元素的动画延迟或持续时间。您还可以借助 Anime.js 中的 stagger() 方法获得相同的功能。

stagger() 方法基本上允许您控制动画如何在多个元素上发生。它接受两个参数。第一个是您想要应用的值，第二个是一个带有一堆参数的对象，这些参数决定如何应用交错。

下面是一个示例，展示 stagger() 如何与我们到目前为止编写的常规函数​​进行比较：

// A function to introduce animation delay in elements.
delay: function(target, index) {
    return index * 200;
}

// The stagger() Equivalent
delay: anime.stagger(200);

您现在可能会问是否有一种方法可以反向应用动画延迟，就像我们对函数所做的那样。是的，这绝对是可能的。这是一个例子：

// Reversing the delay direction
delay: function(target, index, targetCount) {
    return (targetCount - index) * 200;
}

// Equivalent functionality with stagger()
delay: anime.stagger(200, {"direction": "reverse"})
  

我们可以类似地对动画持续时间应用交错。由于交错，前面示例中第一个元素的延迟值被设置为 0，这也是我们想要做的。但是，第一个元素的动画持续时间必须非零。否则，页面加载后就会处于结束阶段。

可以借助 start 参数设置第一个元素的动画的非零持续时间，该参数设置为 1000 以达到惊人效果。这是一个例子：

// Duration starts at 1000 and increases by 800
duration: function(target, index) {
    return 1000 + index * 800;
}

// Equivalent functionality with stagger()
duration: anime.stagger(800, {"start": 1000})

如果在开始最后一个元素时必须应用非零持续时间值怎么办？在这种情况下，我们可以对 stagger() 方法使用以下参数：

// A non-zero duration in reverse direction
duration: function(target, index, targetCount) {
    return 1000 + (targetCount - index) * 800;
}

// Equivalent functionality with stagger()
duration: anime.stagger(800, {"start": 1000, "direction": "reverse"})

以下 CodePen 演示的所有操作与“基于函数的参数”部分下的示例类似，但它使用 stagger() 方法来执行此操作。正如您所看到的，最终结果没有任何区别。

我想指出的一件事是交错方法在旧版本的库中不起作用。确保您使用的是最新版本以避免任何错误。

最终想法

在本教程中，您了解了可用于控制 Anime.js 中目标元素的动画的不同类型的参数。属性参数用于控制各个属性的动画。

您可以使用它们来控制各个元素的动画播放顺序。函数参数允许您控制单个元素相对于整个组的动画时间和速率。动画参数允许您控制不同元素的动画本身的播放方式。