在 Anime.js 系列的上一篇教程中，您了解了控制不同目標元素的動畫方式的不同類型的參數。您還學習了如何使用函數參數來逐漸更改元素的延遲或持續時間。
在本教程中，我們將更進一步，學習如何使用常規數字、基于函數的值和關鍵幀來指定屬性值本身。您還將學習如何使用時間軸按順序播放動畫。
指定屬性值
Anime.js 允許您指定目標元素的可動畫屬性的最終值。動畫的初始值或起始值是該屬性的默認值。 CSS 中指定的任何值也可以作為起始值。有多種指定最終值的方法。
它也可以是無單位的數字。在這種情況下，在計算任何屬性值時將使用屬性的原始或默認單位。您還可以將值指定為字符串，但該字符串必須至少包含一個數值。字符串值的示例為 10vh、80% 和 9.125turn。
立即學習“Java免費學習筆記（深入）”；
您還可以指定相對于當前值的屬性值，而不是指定絕對值。例如，您可以使用 +=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 市場中提供的資源。
如果您對本教程有任何疑問，請在評論中告訴我。
