免費開源的頂級 JavaScript 動畫庫

如果使用得當，動畫可以顯著改善使用者體驗。網頁上有許多元素可以透過動畫處理使其變得生動起來。按鈕的背景顏色或網頁上某些元素的邊框半徑等基本內容也可以使用 CSS 進行動畫處理。

但是，CSS 有其局限性，如果您想更好地控制動畫元素的各個方面，則需要使用 JavaScript。在本文中，我將向您展示八個最好的免費開源 JavaScript 動畫庫，您現在可以在專案中使用它們。

Mo.js

Mo.js 是一個優秀的函式庫，用於為您的網站添加基於 JavaScript 的動態圖形。它速度非常快，可以產生流暢的動畫，在各種裝置上看起來都很棒。它也是模組化的，因此如果您只想使用特定元件，則可以避免額外的開銷。

該程式庫有一個聲明性 API，用於為您建立的元件設定不同屬性的值。它帶有四個不同的內建模組，稱為 Html、Shape、ShapeSwirl 和 Burst。爆發和漩渦可以創造性地用於各種用戶與網站上元素的互動。

嘗試點擊上面 CodePen 中的任意位置，您將看到一串漂亮的圓圈和星星。它是由 LegoMushroom 使用 mo.js 中的 Burst 和 Shape 模組創建的。

mo.js 的文檔提供了許多這樣有趣的範例，可以幫助您了解該程式庫的各個方面。

動漫

Anime 是 GitHub 上最受歡迎的動畫庫之一。它非常輕量級，並配有簡單易學的 API。此程式庫可用於對 CSS 屬性、SVG 和 DOM 屬性進行動畫處理。

它使您可以對元素的動畫方式進行大量控制。您可以控制物體移動的速度、方向和順序。無論何時您選擇這樣做，都可以選擇暫停、重新啟動或反轉動畫。

該庫也對 SVG 動畫提供了良好的支援。您可以在兩個不同的 SVG 形狀之間建立平滑的變形效果或建立畫線動畫。

嘗試點擊上面 CodePen 中的寫名字按鈕，您將看到我的名字的字母一次一個動畫。該演示是有關動漫的系列教程的一部分。您可以查看它們以了解有關該庫的更多資訊。

流行動作

Popmotion 是另一個輕量級且受歡迎的動畫庫。您可以使用它來製作數字、顏色和複雜字串的動畫。庫中的主要動畫函數約為 5kb，整個庫約為 12kb。

您可以使用它來創建兩種動畫：關鍵影格和彈簧。您可以為關鍵影格動畫提供起始點和結束點等。彈簧動畫具有剛度、阻尼、質量和速度等屬性，使您的動畫具有更自然的運動。該函式庫還附帶了許多用於計算的實用函數，例如 angle、clamp、distance、snapp 等。

上述 gaougalos 的 CodePen 演示中的關鍵影格動畫是使用 Popmotion 庫製作的動畫。

捲動顯示

當您想要在元素滾動進或滾出視窗時為其添加動畫效果時，ScrollReveal 庫會派上用場。

有很多選項可用於為元素設定動畫。您可以使用延遲、持續時間和間隔屬性來控制動畫的進度。還有一些選項可以控制要顯示的物件的旋轉、縮放和移動。該庫還附帶回調，可用於確定元素顯示之前或之後發生的情況。

Sava Lazic 的上述 CodePen 演示使用 ScrollReveal 庫創建了一個具有視覺吸引力的垂直時間軸。您可以建立類似於在網站上展示產品或項目的內容。

活著

Vivus 是一個令人驚嘆的基於 JavaScript 的動畫庫，專為製作 SVG 動畫而創建。它非常輕量級並且沒有依賴項。

Vivus 為您提供了三種不同的方式來對 SVG 中的路徑進行動畫處理。您可以一次為所有線條設定動畫，可以延遲，也可以一條接著一條。它還為您在設定動畫時間時提供了很大的靈活性。

使用 Vivus 時您應該記住的一些事情是，它始終按照 SVG 中定義的順序對元素進行動畫處理。另外，您想要設定動畫的元素應該有描邊而不是填滿。

上面 Alex Nelson 的 CodePen 演示中的 SVG 路徑動畫僅用六行程式碼和 Vivus 的一些幫助就創建了。

Typed.js

從名字Typed.js就可以猜到這個動畫庫是用來輸入文字的。您可以將要輸入的所有字串作為陣列傳遞。該庫還實現了一種對 SEO 更友善的方法，可以從網頁上的 HTML div 讀取您想要透過鍵入進行動畫處理的文字。

可以藉助一系列參數來微調打字動畫的行為。這包括打字速度、退格速度、開始延遲、後退延遲、循環計數等。您也可以定義一堆在不同事件（例如鍵入字串後）觸發的回呼函數。

Conner 上述的 CodePen 說明了我們如何使用這個函式庫來讓枯燥的 404 錯誤頁面變得有趣。

ProgressBar.js

向任何需要一些時間才能完成的進程添加進度條是一個好主意。這可以讓使用者知道任務進度的速度。例如，您可以在線上圖像編輯器中顯示進度條，讓使用者知道頁面不僅卡住了，而且實際上正在後台處理圖像。

ProgressBar.js 程式庫使開發人員可以非常輕鬆地在其網站上添加時尚的進度條。除了使用一些內建形狀（如直線、圓形或半圓形）來建立進度條外，您還可以選擇使用自己的自訂形狀。這開啟了一系列有趣的可能性。

正如您在上面的演示中看到的，我們可以在進度條中為各種屬性設定動畫。您可以查看此介紹性 ProgressBar.js 教學以了解有關該程式庫的更多資訊。

洛蒂

Airbnb 的 Lottie 是一個與我們迄今為止討論過的其他動畫庫不同的動畫庫。它解析由 Adob​​e After Effects 創建的動畫，這些動畫已使用 Bodymovin 匯出為 JSON。之後您可以直接在網頁上渲染這些效果。

該程式庫的 GitHub 頁面詳細解釋了安裝過程及其工作原理。有許多全域方法可供您控制動畫進度。您可以輕鬆啟動、停止和反轉動畫方向。

您只需要編寫幾行程式碼即可載入所需的 JSON 檔案並使用一些參數初始化動畫。上述 kittons 的 CodePen 演示是一個很好的範例，它展示瞭如何輕鬆地在瀏覽器中渲染 After Effects 動畫。

最終想法

在本文中，我們研究了八個流行的免費開源 JavaScript 動畫庫。他們各自做一些不同的事情，並針對網路動畫的不同面向。有了這些庫，您將能夠為網站上的幾乎所有內容製作動畫。我希望您使用這些庫來創建一個精美的網站，使您在競爭中脫穎而出！只要確保不要過度使用動畫即可。

還要記住的一件事是，您仍然應該嘗試使用 CSS 來實現簡單的動畫。如果您只想在使用者將滑鼠懸停在元素上時更改元素的顏色，則載入完整的 JavaScript 動畫庫沒有多大意義。

以上是免費開源的頂級 JavaScript 動畫庫的詳細內容。更多資訊請關注PHP中文網其他相關文章！