擴充參數：使用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 中目标元素的动画的不同类型的参数。属性参数用于控制各个属性的动画。

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

以上是擴充參數：使用Anime.js進行基於JavaScript的動畫，第二部分的詳細內容。更多資訊請關注PHP中文網其他相關文章！