使用 Anime.js 基於 JavaScript 的動畫，第 3 部分：探索值、時間軸和播放

在 Anime.js 系列的上一篇教學中，您了解了控制不同目標元素的動畫方式的不同類型的參數。您也學習如何使用函數參數來逐漸更改元素的延遲或持續時間。

在本教學中，我們將更進一步，學習如何使用常規數字、基於函數的值和關鍵影格來指定屬性值本身。您還將學習如何使用時間軸按順序播放動畫。

指定屬性值

Anime.js 允許您指定目標元素的可動畫屬性的最終值。動畫的初始值或起始值是該屬性的預設值。 CSS 中指定的任何值也可以作為起始值。有多種指定最終值的方法。

它也可以是無單位的數字。在這種情況下，在計算任何屬性值時將使用屬性的原始或預設單位。您也可以將值指定為字串，但該字串必須至少包含一個數值。字串值的範例為 10vh、80% 和 9.125turn。

您也可以指定相對於目前值的屬性值，而不是指定絕對值。例如，您可以使用 =150px 作為值，將最終 translateY 值設為比目前值大 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：在这种情况下，当前动画在上一个动画结束前 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 来设置查找函数的值。这是因为范围输入的最大值已在标记中设置为 100。直接使用输入范围的值将允许我们最多查找 100 毫秒。将范围输入值乘以动画持续时间可确保我们可以在范围滑块上从头到尾查找动画。

最终想法

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

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

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

以上是使用 Anime.js 基於 JavaScript 的動畫，第 3 部分：探索值、時間軸和播放的詳細內容。更多資訊請關注PHP中文網其他相關文章！