如果你想抓住你的網站訪問者的注意力，還有什麼能比動畫更好呢？使用網絡上免費提供的許多應用引擎，你可以很容易地讓你的網站元素褪色、跳動或嗖嗖作響。在今天的文章中，我們將看到JavaScript動畫庫如何幫助實現這一切。

首先，介紹一下JavaScript的動畫

添加只需要一個動作的簡單動畫（例如，切換）是一回事。對於這一點，你總是可以使用簡單的CSS動畫。但是，對於更複雜或高級的效果。 JavaScript是一個更好的工具。不言而喻，使用JavaScript來創建動畫比使用CSS更具挑戰性。

然而，JavaScript可以處理CSS所不能處理的事情。這給了開發者更多的權力來控制需要協調多個移動部件的複雜動畫。

JavaScript動畫是通過在一個元素的樣式上添加漸變來實現的。你可以把它們作為你代碼的一部分在線添加，或者把它們包含在其他對象中。在渲染時，這些變化由一個定時器調用。另外，你可以通過調整變化的時間間隔來控制動畫的連續性。

1. Anime.js

讓我們從Anime.js開始這個JavaScript動畫庫的列表。這個輕量級的動畫庫在GitHub上有35K多顆星。 通過一個強大的API工作，你可以用它來為HTML、CSS、JS、SVG和DOM屬性製作動畫。通過一個內置的交錯系統，它可以使創建波紋、定向運動、跟隨和重疊的效果顯得很簡單。這個系統在定時和屬性上都是可用的。

使用內置的回調和控制函數，你可以做很多事情。例如，你可以同步播放、暫停、控制、逆轉和觸發事件。

2. Velocity.js

Velocity.js結合了jQuery和CSS轉換的優點。它的評分接近17K星，在 GitHub上有接近17K顆星，並擁有像WhatsApp和Motorola這樣的傑出用戶。 Mailchimp.循環、反轉、延遲、隱藏/顯示元素、屬性數學（+、-、*、/）和硬體加速，都是其功能的一部分。

你可以使用Velocity.js來滾動 browser windows.它既可以與瀏覽器中加載的jQuery一起工作，也可以獨立於它，甚至可以撤消之前的動畫效果。

3. Popmotion

在接近 18K星，Popmotion是一個適用於任何JavaScript環境的功能性動畫庫。它幾乎可以與任何接受數字輸入的API一起工作，如 React，Three.js，A-Frame和PixiJS。

Popmotion的重量只有11.7kB，但卻很有衝擊力。它的特點是動畫，如關鍵幀、衰減、用於同步多個實例的時間線等。你可以錯開任何系列的動畫或函數，也可以使用純函數來組成你自己的配置。

4. Three.js

Three.js以60K以上的星級在這個JavaScript動畫庫列表中排名第一。 它依靠的是 WebGL來創建和渲染瀏覽器中的3D動畫。

有大量的文檔可以幫助你，一旦你通過了學習曲線，使用這個庫就沒有什麼不能完成的。首先，使用Three.js編輯器，你可以創建一個場景。此後，你可以添加幾何圖形，並調整燈光和攝像機。材料、紋理、物體、顏色和霧化都可以進行調整，最後的文件可以發布到你的項目中。

5. GreenSock JS

GreenSock的GSAP與一組小的JavaScript文件一起工作，使動畫在所有主要的瀏覽器中看起來很好。它能順利地將多個動畫屬性連接起來，並消除瀏覽器的錯誤。

GSAP的動作包括在Canvas上創建動畫，以及為場景中的任何對象製作動畫。還可以逐步揭示、變形或沿路徑移動任何對象。為此，它與一堆軟體應用一起工作，如SVGPlugins、PixiPlugin、WebGL、Adobe Animate和EaseJS。它的模塊化結構有助於你選擇你需要的功能。擁有800萬用戶和10K+顆星的 GitHub上有800萬用戶和10K多顆星，這個強大的庫有很多優點。

6. AniJS

在這個列表中的JavaScript庫中，AniJS有些獨特。它允許你在一個簡單的 "句子 "結構中為元素添加動畫，這對剛接觸動畫的人來說是很好的。更重要的是，它的非特定性質使得幾乎每個人都可以在日常的用戶體驗設計中使用它。

上 GitHub，AniJS的評分超過了3.5K星。它不依賴任何第三方庫，通常有助於加快開發速度。它在安卓和iOS上都能很好地工作。 Android and iOS，也可以在所有流行的瀏覽器中使用。

7. Mo.js

運動圖形在動畫中起著很大的作用，Mo.js是一個可以讓你產生影響的選擇。由於有大量的教程和演示幫助，初學者可能不會發現創建幾何形狀和時間動畫的難度。

這些API可能看起來很簡單，但你可以用它們做很多事情。在這個工具包中，你會發現一個曲線編輯器和時間線編輯器來幫助你建立你的動畫，以及一個播放器來控制你的動畫。有不同的模塊用於交錯、緩和、時間線和更多。所有這些為Mo.js贏得了接近16K星的評價。

8. Vivus.js

如果你想在屏幕上實時地模仿鋼筆畫，你會用Vivus達到目的。它可以讓你對SVG進行動畫處理，給人以被繪製的感覺。由於它沒有任何依賴性，所以它是快速和輕便的。

你可以選擇任何一種可用的動畫 - 延遲、同步或OneByOne。否則，你也可以創建一個自定義腳本來繪製你的SVG。為了提高靈活性，你可以用一個簡單的JavaScript函數來覆蓋每個路徑的動畫。超過1.3萬名用戶對這個庫豎起了大拇指。

9. ScrollReveal JS

如果你希望在你的網頁元素滾動進入視圖時為它們製作動畫，ScrollReveal不會讓你失望。這個簡單易學的動畫庫沒有任何依賴性，在GitHub上有18.5K多顆星。

ScrollReveal支持不同類型的效果，在網絡和移動瀏覽器上運行良好。它故意用一個裸露的配置來工作，所以你可以把它作為你的創造力的畫布。為了使動畫的效果最大化，創作者建議你少用它。

10. Typed.js

Typed.js是一個簡單的庫（更像是一個插件，真的），用於在你的屏幕上對打字進行動畫處理。一旦你輸入任何字符串，訪問者就可以看到它以設定的速度被打出來。不僅如此，你還可以操作退格按鈕，以及開始一個新的句子。如果你希望讓禁用JS的訪問者也能看到，你只需要在頁面上放置一個HTML div。這樣一來，機器人和搜尋引擎也能查看輸入的文字。

該庫在GitHub的評分為9.5K+星，強大的用戶包括Slack和Envato。

11. Lottie by AirBnB

Lottie是一種輕量級的動畫圖形格式，平衡了高質量的圖形和渲染成本。它使應用程式更小，並包括動態功能。它可以用於網絡、安卓、iOS和物聯網，不需要額外的軟體。

Lottie可以在任何支持JavaScript的瀏覽器上運行。動畫是以純文本形式存儲的，是人類可讀的。由於文本數據是以JSON格式存儲的，它很容易被任何JavaScript環境同化。這使得它成為一種流行的動畫圖形格式，以增強移動前端。僅僅是安卓版本就有接近3萬顆星。