使用Anime.js，第1部分：目標和屬性的基於JavaScript的動畫

Anime.js，一個輕量級的基於JavaScript的動畫庫，可用於網頁上CSS屬性、SVG或DOM屬性的動畫製作。該庫允許您控制動畫的各個方面，並提供多種方法來指定目標元素或要設置動畫的屬性。

您可以完全控制動畫播放的順序，以及不同元素動畫的同步方式。該庫支持所有現代瀏覽器。

本教程系列將引導您學習Anime.js的所有功能，以便您可以輕鬆地將它們應用於實際項目。

在深入探討主題之前，讓我們先安裝該庫。您可以使用npm或Bower通過運行以下命令來安裝：

npm install animejs
bower install animejs

您也可以下載該庫並將其包含在您的項目中，或者直接鏈接到託管在CDN上的最新版本庫。

安裝成功後，您就可以使用此庫為元素添加有趣的動畫了。我們將從庫的基礎知識開始，一次關註一個特定領域。

指定目標元素

要使用Anime.js創建任何動畫，您必須調用NodeList。

您還可以使用DOM節點或NodeList作為span標籤的值。到目前為止，我們通過在HTML中手動創建一個包裝器來實現這一點。現在，我們將學習如何讓JavaScript處理標記。這是我們的標題元素：

<h1 id="Have-a-Great-Day-Ahead">Have a Great Day Ahead</h1>

標題中有五個單獨的單詞，我們將每個單詞都包裝在它自己的span標籤中。然後將最終結果賦值給span標籤，其值應為零。這是我們用來設置標題樣式的CSS，以及將h1 span作為選擇器。 translateY屬性的最終值。我們還在動畫初始化中使用了交錯延遲。您將在本系列的下一個教程中學習有關Anime.js中交錯的更多信息。

這是一個CodePen演示，展示了我們剛剛創建的問候動畫。點擊Greet Me按鈕重新啟動動畫。

總結

在本教程中，您學習了在Anime.js中選擇目標元素的所有方法，以及如何設置與目標元素相關的不同CSS屬性和屬性的動畫。但是，此時我們並沒有控制與實際動畫相關的任何內容。

在本系列的下一個教程中，您將學習如何控制不同屬性的動畫的緩動、延遲和持續時間（作為組以及單獨控制）。然後，您將學習如何控制各個元素的所有這些動畫參數。

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