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

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

指定屬性值

Anime.js 允許您指定目標(biāo)元素的可動(dòng)畫屬性的最終值。動(dòng)畫的初始值或起始值是該屬性的默認(rèn)值。 CSS 中指定的任何值也可以作為起始值。有多種指定最終值的方法。

它也可以是無(wú)單位的數(shù)字。在這種情況下，在計(jì)算任何屬性值時(shí)將使用屬性的原始或默認(rèn)單位。您還可以將值指定為字符串，但該字符串必須至少包含一個(gè)數(shù)值。字符串值的示例為 10vh、80% 和 9.125turn。

您還可以指定相對(duì)于當(dāng)前值的屬性值，而不是指定絕對(duì)值。例如，您可以使用 +=150px 作為值，將最終 translateY 值設(shè)置為比當(dāng)前值大 150px 。請(qǐng)記住，在指定相對(duì)值時(shí)只能使用加法、乘法和減法。

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

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

您可以使用函數(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
});

對(duì)于 translateY 屬性，我們使用元素的索引來(lái)設(shè)置翻譯值。使用 50 * (i + 1) 會(huì)將每個(gè)元素的 translateY 值增加 50 個(gè)像素。

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

在旋轉(zhuǎn)動(dòng)畫的代碼中，我們使用 anime.random(a, b) 輔助函數(shù)來(lái)獲取 -180 到 180 之間的隨機(jī)整數(shù)。此函數(shù)有助于分配隨機(jī)積分translateY 和 rotate 等屬性的值。使用此函數(shù)分配隨機(jī)比例值將產(chǎn)生極端結(jié)果。

不同元素的邊框半徑值是通過使用 el 函數(shù)參數(shù)計(jì)算目標(biāo)元素的寬度來(lái)確定的。最后，代碼的最后一部分也為 duration 和 delay 參數(shù)分配隨機(jī)值。

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

還可以使用關(guān)鍵幀為目標(biāo)元素的不同屬性設(shè)置動(dòng)畫。每個(gè)關(guān)鍵幀都包含屬性對(duì)象的數(shù)組。您可以使用該對(duì)象來(lái)指定該部分動(dòng)畫的屬性值，duration、delay 和 easing。以下代碼創(chuàng)建一個(gè)基于關(guān)鍵幀的平移動(dòng)畫。

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ù)指定不同或相同的值來(lái)一次性設(shè)置多個(gè)屬性的動(dòng)畫。在第二種情況下，全局 delay 參數(shù)根據(jù)索引對(duì)所有元素應(yīng)用初始延遲。此延遲與應(yīng)用于關(guān)鍵幀內(nèi)每個(gè)屬性的延遲無(wú)關(guān)。

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

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

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

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

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

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

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

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

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

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

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

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

播放選項(xiàng)

Anime.js 有多種選項(xiàng)可以在任何給定點(diǎn)播放、暫停、重新啟動(dòng)或搜索動(dòng)畫或時(shí)間線。

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

您應(yīng)該記住，play() 函數(shù)僅從暫停時(shí)恢復(fù)動(dòng)畫。如果動(dòng)畫已經(jīng)結(jié)束，則無(wú)法使用 play() 重播動(dòng)畫。要重播動(dòng)畫，您必須使用 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));
};

請(qǐng)注意，我們沒有使用 seekInput.value 來(lái)設(shè)置查找函數(shù)的值。這是因?yàn)榉秶斎氲淖畲笾狄言跇?biāo)記中設(shè)置為 100。直接使用輸入范圍的值將允許我們最多查找 100 毫秒。將范圍輸入值乘以動(dòng)畫持續(xù)時(shí)間可確保我們可以在范圍滑塊上從頭到尾查找動(dòng)畫。

最終想法

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

如果您正在尋找其他資源來(lái)學(xué)習(xí)或在工作中使用，請(qǐng)查看我們?cè)?Envato 市場(chǎng)中提供的資源。

如果您對(duì)本教程有任何疑問，請(qǐng)?jiān)谠u(píng)論中告訴我。

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