使用Anime.js基于JavaScript的动画：参数

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

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

在本教程中，您将学习如何使用 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和参数。如果未指定持续时间，则动画将运行 1 秒。现在，它将运行 1,200 毫秒或 1.2 秒。durationeasing

See the Pen Setting Property Parameters in Anime.js by Monty (@Shokeen) on CodePen.

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

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

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
});

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

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

See the Pen Setting Property Parameters in Anime.js by Monty (@Shokeen) on CodePen.

基于函数的参数

当您想要更改为单个属性设置动画的顺序和持续时间时，基于属性的参数会很有帮助。但是，相同duration并且delay 仍将应用于所有目标元素的各个属性。基于函数的参数允许您以紧凑的方式分别为不同的目标元素指定duration、delay和。elasticityeasing

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

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

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

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

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

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;
  }
});

See the Pen Setting Individual Property Parameters in Anime.js by Monty (@Shokeen) on CodePen.

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

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
});

See the Pen Setting Individual Property Parameters in Anime.js by Monty (@Shokeen) on CodePen.

动画参数

最后一组参数允许您指定动画应播放的次数和播放方向。您可以使用该参数指定动画应播放的次数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
});

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

See the Pen Setting Individual Property Parameters in Anime.js by Monty (@Shokeen) on CodePen.