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

在本教學(xué)中，我們將更進(jìn)一步，學(xué)習(xí)如何使用常規(guī)數(shù)字、基於函數(shù)的值和關(guān)鍵影格來指定屬性值本身。您還將學(xué)習(xí)如何使用時間軸按順序播放動畫。

指定屬性值

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

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

您也可以指定相對於目前值的屬性值，而不是指定絕對值。例如，您可以使用 =150px 作為值，將最終 translateY 值設(shè)為比目前值大 150px 。請記住，在指定相對值時只能使用加法、乘法和減法。

在設(shè)定顏色動畫時，您不能使用紅色、黑色和藍(lán)色等顏色名稱來設(shè)定動畫的最終顏色值。在這種情況下，顏色動畫根本不會發(fā)生，而且變化將是即時的。對顏色進(jìn)行動畫處理的唯一方法是將值指定為十六進(jìn)位數(shù)字或 RGB 和 HSL 值。

您可能已經(jīng)注意到，我們沒有為目標(biāo)元素指定初始值來為其設(shè)定動畫。 Anime.js 根據(jù)我們的 CSS 和這些屬性的預(yù)設(shè)值自動確定初始值。但是，您可以使用陣列指定屬性的預(yù)設(shè)值以外的初始值。數(shù)組中的第一項表示初始值，第二項表示最終值。

您可以使用函數(shù)為不同的參數(shù)設(shè)定不同的值，而不是為所有目標(biāo)元素使用相同的最終值。該過程類似於指定基於函數(shù)的屬性參數(shù)。

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 屬性，我們使用元素的索引來設(shè)定翻譯值。使用 50 * (i 1) 會將每個元素的 translateY 值增加 50 個像素。

縮放動畫也使用元素的索引以及內(nèi)建的 Math.random() 函數(shù)傳回一個小於 1 的浮點偽隨機數(shù)。這樣元素隨機縮放，但屬性的 i/10 部分稍微增加了最終出現(xiàn)的元素具有更大尺寸的可能性。

在旋轉(zhuǎn)動畫的程式碼中，我們使用 anime.random(a, b) 輔助函數(shù)來取得 -180 到 180 之間的隨機整數(shù)。此函數(shù)有助於指派隨機積分translateY 和 rotate 等屬性的值。使用此函數(shù)分配隨機比例值將產(chǎn)生極端結(jié)果。

不同元素的邊框半徑值是透過使用 el 函數(shù)參數(shù)計算目標(biāo)元素的寬度來決定的。最後，程式碼的最後一部分也為 duration 和 delay 參數(shù)分配隨機值。

可以看到最後一部分實現(xiàn)的動畫是非常隨機的。元素的不同屬性值或其延遲和持續(xù)時間值之間沒有關(guān)係。在現(xiàn)實生活中，使用可以為動畫添加一些方向感的值更為明智。

也可以使用關(guān)鍵影格為目標(biāo)元素的不同屬性設(shè)定動畫。每個關(guān)鍵影格都包含屬性物件的陣列。您可以使用該物件來指定該部分動畫的屬性值，duration、delay 和 easing。以下程式碼會建立一個基於關(guān)鍵影格的平移動畫。

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

您也可以透過為所有參數(shù)指定不同或相同的值來一次設(shè)定多個屬性的動畫。在第二種情況下，全域 delay 參數(shù)會根據(jù)索引對所有元素套用初始延遲。此延遲與應(yīng)用於關(guān)鍵影格內(nèi)每個屬性的延遲無關(guān)。

創(chuàng)建和操作時間線

到目前為止，在本系列中，我們一直在使用 delay 參數(shù)以特定順序播放不同的動畫。要為此目的使用延遲，我們還需要知道前一個動畫的持續(xù)時間。

隨著動畫序列的復(fù)雜性不斷增加，維護正確的延遲值變得非常繁瑣。其中一個動畫的持續(xù)時間的任何變化都會迫使我們重新計算所有延遲值，以保持動畫的原始序列。

解決這個問題的一個更好的方法是使用時間軸來控制動畫序列。您必須使用 anime.timeline() 函數(shù)在 Anime.js 中創(chuàng)建時間線。您還可以將不同的參數(shù)作為對象傳遞給該函數(shù)。這些參數(shù)可以指定時間線播放的方向、循環(huán)次數(shù)以及 autoplay 參數(shù)來確定是否應(yīng)自動播放動畫。所有這些參數(shù)都已在本系列的參數(shù)教程中詳細(xì)討論。

您可以使用 add() 方法將不同的動畫添加到時間軸。添加到時間線的所有動畫將按照添加順序播放?？梢灾付ń^對或相對偏移值來控制動畫的播放順序。

當(dāng)使用相對偏移值時，當(dāng)前動畫的開始時間是相對于前一個動畫的時間確定的。相對偏移可以分為三種類型：

• +=offset：在這種情況下，當(dāng)前動畫會在上一個動畫結(jié)束后經(jīng)過 offset 毫秒后開始播放。
• -=offset：在這種情況下，當(dāng)前動畫在上一個動畫結(jié)束前 offset 毫秒開始播放。
• *=offset：在這種情況下，當(dāng)前動畫會在前一個動畫的動畫持續(xù)時間的 offset 倍后的毫秒數(shù)后開始播放。

以下代碼展示了如何創(chuàng)建基本時間線和具有相對偏移值的時間線。

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

嘗試單擊上述演示中的偏移時間線按鈕。您將看到紅色方塊動畫結(jié)束和藍(lán)色方塊動畫開始之間有 2 秒的延遲。

我們沒有為紅方塊動畫指定 duration 。因此，使用默認(rèn)值 1000ms 或 1s 作為持續(xù)時間。藍(lán)色方形動畫的乘數(shù)偏移量使該值加倍，這會導(dǎo)致動畫延遲兩秒。

當(dāng)使用絕對偏移值時，時間線的起始時間用作參考點。通過對時間線開頭發(fā)生的動畫使用較大的偏移值，可以反轉(zhuǎn)動畫的播放順序。

播放選項

Anime.js 有多種選項可以在任何給定點播放、暫停、重新啟動或搜索動畫或時間線。

play() 函數(shù)允許我們從當(dāng)前進(jìn)度開始播放動畫。 pause() 函數(shù)將在調(diào)用該函數(shù)時凍結(jié)動畫。 restart()?函數(shù)從頭開始播放動畫，無論其當(dāng)前進(jìn)度如何。 seek(value) 函數(shù)可用于將動畫提前 value 毫秒數(shù)。

您應(yīng)該記住，play() 函數(shù)僅從暫停時恢復(fù)動畫。如果動畫已經(jīng)結(jié)束，則無法使用 play() 重播動畫。要重播動畫，您必須使用 restart() 函數(shù)。

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 來設(shè)置查找函數(shù)的值。這是因為范圍輸入的最大值已在標(biāo)記中設(shè)置為 100。直接使用輸入范圍的值將允許我們最多查找 100 毫秒。將范圍輸入值乘以動畫持續(xù)時間可確保我們可以在范圍滑塊上從頭到尾查找動畫。

最終想法

在本教程中，您學(xué)習(xí)了如何將不同的屬性值設(shè)置為數(shù)字、函數(shù)或關(guān)鍵幀的動畫。您還學(xué)習(xí)了如何在 Anime.js 中控制和操作時間線來控制動畫序列的播放順序。

如果您正在尋找其他資源來學(xué)習(xí)或在工作中使用，請查看我們在 Envato 市場中提供的資源。

如果您對本教程有任何疑問，請在評論中告訴我。

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