在 Anime.JS 系列的第一個教程中，您了解了指定要設置動畫的目標元素的不同方法以及可以設置動畫的 css 屬性和 dom 屬性的類型。上一個教程中的動畫非?；A。所有目標元素只是移動一定距離或以固定速度改變邊界半徑。
有時，您可能需要以更有節奏的方式為目標元素設置動畫。例如，您可能有 10 個不同的元素，想要從左向右移動，每個元素的動畫開始之間有 500 毫秒的延遲。同樣，您可能希望根據每個元素的位置增加或減少動畫持續時間。
在本教程中，您將學習如何使用 Anime.js 使用特定參數正確計時不同元素的動畫。這將允許您控制單個元素或所有元素的動畫序列的播放順序。
屬性參數
這些參數允許您一次控制單個屬性或一組屬性的持續時間、延遲和緩動。 duration 和 delay 參數以毫秒為單位指定。持續時間的默認值為 1000 毫秒或 1 秒。
立即學習“Java免費學習筆記（深入）”；
這意味著除非另有指定，否則應用于元素的任何動畫都將播放 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 中目標元素的動畫的不同類型的參數。屬性參數用于控制各個屬性的動畫。
您可以使用它們來控制各個元素的動畫播放順序。函數參數允許您控制單個元素相對于整個組的動畫時間和速率。動畫參數允許您控制不同元素的動畫本身的播放方式。
