如果您想吸引網站訪問者的注意力，還有什麼比動畫更好的呢？使用網路上免費提供的許多應用程序引擎，您可以輕鬆地使網站的元素褪色，反彈或飛快移動。在今天的帖子中，我們將看到JavaScript動畫庫如何為所有這些提供幫助。
首先，關於JavaScript動畫的一些知識
添加只需一個動作（例如，切換）的簡單動畫是一回事。為此，您始終可以使用簡單的CSS動畫。但是，對於更複雜或更高級的效果，JavaScript是更好的工具。不用說，使用JavaScript創建動畫比使用CSS更具挑戰性。
不過，JavaScript可以處理CSS無法處理的事情。這為開發人員提供了更多功能來控制需要協調多個運動部件的複雜動畫。
JavaScript動畫是通過對元素樣式進行逐步更改來實現的。您可以將它們作為代碼的一部分內聯添加，或將它們包括在其他對象中。渲染時，這些更改將由計時器調用。另外，您可以通過調整更改的時間間隔來控制動畫的連續性。
最好的JavaScript動畫庫
以下是JavaScript動畫庫的列表，您可以使用它們向網站添加一些看起來很棒的動畫：
1. Anime.js
讓我們從Anime.js開始這個JavaScript動畫庫列表。這個輕量級的動畫庫在GitHub上擁有超過35,000個星星。通過一個功能強大的API進行工作，您可以使用它為HTML，CSS，JS，SVG和DOM屬性設置動畫。藉助內置的交錯系統，它可以使創建波紋，方向運動，跟蹤和重疊效果變得簡單。該系統在時間和屬性上均可用。
使用內置的回調和控制功能，您可以做很多事情。例如，您可以同步播放，暫停，控制，倒帶和觸發事件。要查看使用此庫還有什麼可能，您可以訪問Codepen。
2. Velocity.js
Velocity.js結合了jQuery和CSS轉換的最佳功能。它在GitHub上的評分接近17,000星，並擁有WhatsApp和Mailchimp等著名用戶。循環，反轉，延遲，隱藏/顯示元素，屬性數學（+，-，*，/）和硬體加速，這些都是這些功能的一部分。
您可以使用Velocity.js滾動瀏覽器窗口。它既可以與瀏覽器中載入的jQuery一起使用，也可以獨立於它使用，甚至可以撤消以前的動畫。
3. Popmotion
Popmotion是一個接近18K星的功能庫，可用於任何JavaScript環境。它幾乎可以與任何接受數字作為輸入的API一起使用，例如React，Three.js，A-Frame和PixiJS。
Popmotion的重量僅為11.7kB，但仍然值得一提。它具有諸如關鍵幀，衰減，用於同步多個實例的時間線等動畫。您可以錯開任何一系列動畫或函數，也可以使用純函數來組成自己的配置。
4. Three.js
Three.js在GitHub上具有6萬多個星星的JavaScript動畫庫中排名最高。在瀏覽器中創建和渲染3D動畫取決於WebGL。
有大量的文檔可以為您提供幫助，一旦您走過了學習的道路，那麼使用此庫便無濟於事。首先，使用Three.js編輯器創建場景。之後，您可以添加幾何圖形，並調整照明和攝像頭。可以調整材質，紋理，對象，顏色和霧化，並將最終文件發布到您的項目中。
5. GreenSock JS
GreenSock的GSAP可與一組小的JavaScript文件配合使用，從而使動畫在所有主流瀏覽器中看起來都很棒。它平滑地鏈接了多個動畫屬性，並消除了瀏覽器錯誤。
GSAP動作包括在Canvas上創建動畫以及為場景中的任何對象設置動畫。也可以沿路徑逐漸顯示，變形或移動任何對象。為此，它可與SVGPlugins，PixiPlugin，WebGL，Adobe Animate和EaseJS之類的許多軟體應用程序配合使用。它的模塊化結構可幫助您選擇所需的功能。這個功能強大的庫在GitHub上擁有800萬用戶和1萬顆星，它有很大的發展空間。
6. AniJS
在此列表中的JavaScript庫中，AniJS有點獨特。它允許您以簡單的「類似於句子」的結構將動畫添加到元素中，非常適合動畫新手。而且，它的非特定性質使幾乎每個人都可以在常規UX設計中使用它。
在GitHub上，AniJS評分超過3.5K星。它不依賴任何第三方庫，通常有助於加快開發速度。它在Android和iOS以及所有流行的瀏覽器中都一樣好用。
7. Mo.js
動態圖形在動畫中起著很大的作用，Mo.js是一種可以產生影響的選項。通過大量的教程和演示來幫助您，初學者可能會發現很難為圓點創建幾何形狀和時間動畫。
這些API可能看起來很簡單，但是您可以做很多事情。在該工具包中，您會找到「曲線編輯器」和「時間軸編輯器」來幫助您製作動畫，以及一個用於控制動畫的播放器。交錯，緩動，時間軸等有不同的模塊。所有這些使Mo.js在GitHub上贏得了近1.6萬顆星。
8. Vivus.js
如果您想在屏幕上實時模擬筆畫，可以使用Vivus達到目標。它使您可以為SVG設置動畫，給人以被繪製的印象。由於沒有依賴關係，因此它既快速又輕巧。
您可以選擇任何可用的動畫-延遲，同步或OneByOne。另外，您還可以創建一個自定義腳本來繪製SVG。為了獲得更大的靈活性，您可以使用簡單的JavaScript函數覆蓋每個路徑的動畫。超過13000名用戶在GitHub上使用了該庫。
9. ScrollReveal JS
如果您希望在網路元素滾動到視圖中時對其進行動畫處理，那麼ScrollReveal不會令人失望。這個易於學習的動畫庫在GitHub上具有零依賴性和18.5K +個星。
ScrollReveal支持不同類型的效果，並與Web和移動瀏覽器很好地兼容。它有意使用准系統配置，因此您可以將其用作創作的畫布。為了最大程度地發揮動畫效果，創作者建議您謹慎使用。
10. Typed.js
Typed.js是一個簡單的庫（實際上是一個插件），可以在屏幕上顯示動畫。輸入任何字元串後，訪客就可以觀看以設定速度輸入的字元串。不僅如此，您還可以使用Backspace按鈕以及開始新句子。如果您希望允許禁用JS的訪問者也可以查看它，則只需在頁面上放置一個HTML div。這樣，機器人和搜索引擎也可以查看鍵入的單詞。
該庫在GitHub上的評分為9.5K +。超級用戶包括Slack和Envato。
11. AirBnB的Lottie
Lottie是一種輕量級的動畫圖形格式，可在高質量圖形與渲染成本之間取得平衡。它使應用程序更小，並包含動態功能。它可以用於Web，Android，iOS和IoT，而無需其他軟體。
Lottie可以在任何支持JavaScript的瀏覽器上運行。動畫以純文本格式存儲，並且易於閱讀。由於文本數據以JSON格式存儲，因此可以輕鬆地與任何JavaScript環境兼容。這使其成為一種流行的動畫圖形格式，以增強移動前端。單獨的android版本在GitHub上擁有近3萬顆星。
如果您已達到JavaSCript動畫庫列表的末尾，則可能還對查找其他JavaScript庫和框架感興趣。或者，查看這些最好的React UI組件庫。
…
別忘了加入我們的速成班，以加快WordPress網站的速度。通過一些簡單的修復，您甚至可以減少50-80％的載入時間：