使用Anime.js，第2部分：參數基於JavaScript的動畫

Anime.js動畫教程第二部分：參數詳解。第一部分教程中，我們學習瞭如何指定動畫目標元素以及可動畫化的CSS屬性和DOM屬性。之前的動畫非常基礎，所有目標元素只是以固定速度移動一定距離或改變圓角半徑。

有時，您可能需要以更具節奏感的方式為目標元素設置動畫。例如，您可能需要十個不同的元素從左向右移動，每個元素的動畫開始之間延遲500毫秒。同樣，您可能希望根據每個元素的位置來增加或減少動畫持續時間。

本教程將向您展示如何使用Anime.js通過特定參數來精確控制不同元素的動畫時間，從而控制單個元素或所有元素的動畫序列播放順序。

屬性參數

這些參數允許您控制單個屬性或一組屬性的持續時間、延遲和緩動效果。 stagger() 方法

到目前為止，我們使用函數為目標元素的動畫延遲或持續時間傳遞不同的值。您還可以藉助stagger()方法獲得相同的功能，該方法基本上允許您控制動畫如何在多個元素之間發生。它接受兩個參數。第一個是您想要應用的值，第二個是一個包含許多參數的對象，這些參數決定了交錯的應用方式。

以下是一個示例，展示了將start參數設置為1000進行交錯。示例如下：

// 持续时间从1000开始，每次增加800
duration: function(target, index) {
    return 1000 + index * 800;
},

// 使用stagger()实现等效功能
duration: anime.stagger(800, {"start": 1000})

如果在最後一個元素開始時必須應用非零持續時間值怎麼辦？在這種情況下，我們可以使用stagger()方法的以下參數來實現。如您所見，最終結果沒有區別。

需要指出的是，stagger方法在舊版本的庫中不起作用。確保您使用的是最新版本以避免任何錯誤。

總結

在本教程中，您學習了不同類型的參數，這些參數可用於控制Anime.js中目標元素的動畫。屬性參數用於控制單個屬性的動畫。

您可以使用它們來控制為單個元素播放動畫的順序。函數參數允許您相對於整個組來控制單個元素的動畫時間和速率。動畫參數允許您控制為不同元素播放動畫的方式。

以上是使用Anime.js，第2部分：參數基於JavaScript的動畫的詳細內容。更多資訊請關注PHP中文網其他相關文章！