查看JavaScript開發人員的一些優秀動畫庫，包括HTML，CSS和JavaScript代碼示例！
現代網站的客戶端提供高質量的動畫，這導致了對JavaScript動畫庫的需求的增加。幸運的是，供應似乎與需求相匹配，並且有很多選擇。但是，選擇哪個庫可能會引起很多麻煩。許多圖書館有可能在一年中變得更好，並且將成為創建動畫的首選解決方案。
我們來看看十大JavaScript動畫庫。
three.js
42,569 ★
這個列表中的頭號和最受歡迎的動畫庫（包含900多個項目貢獻者）是 Three.js。八年後仍然強勁，Three.js仍然是一個強大的動畫工具。依賴於WebGL，Three.js可用於構建精美的3D計算機圖形以在Web瀏覽器上運行。Three.js的特徵包括但不限於浮雕效果，透視和正交相機，幾何工具，例如平面，立方體，球體和環面。然而，這個庫的一個缺點是一些開發人員發現它使用起來很慢。
安裝：
使用NPM，可以使用以下命令安裝Three.js。
npm install three
更多信息可以在官方網站或npm網站上找到。
anime.js
21,084 ★
可能是Three.js的替代品，anime.js 排在第二位。anime.js由Julian Garnier創建，是您將遇到的最快的動畫庫之一。anime.js可以與DOM一起順利運行，並支持主要的Web瀏覽器，如Chrome，Firefox，Opera，Safari和Internet Explorer 10+。此庫包括但不限於以下功能：用於動畫CSS變換的CSS變換，用於行的SVG動畫以及用於同步多個實例的時間軸。使anime.js對開發人員有吸引力的一點是它非常輕量級。
安裝：
使用NPM，可以使用以下命令安裝anime.js.
npm install animejs
更多信息可以在官方網站和npm網站上找到。
Particles.js
15,612 ★
我們將看到的第三個庫是Particles.js庫。Particles.js由Vincent Garreau創建，是一個動畫特定的JavaScript庫，用於創建帶點和線的精彩動畫。如前所述，此庫用於創建看起來像粒子的動畫。因此，它允許開發人員切換諸如粒子的密度，顏色，不透明度，形狀和大小之類的東西。但是，由於它僅適用於粒子背景，因此不適合創建其他類型的動畫。
安裝：
使用NPM，可以使用以下命令安裝Particles.js。
npm install particlesjs
有關更多信息，請訪問官方網站 或npm網站。
ScrollReveal JS
15,499 ★
scrollReveal.js在我們的列表中佔據了第四位，就像Particles.js一樣，它也是一個特定於動畫的JavaScript庫。用於創建驚人的滾動動畫，scrollReveal.js是一個輕量級工具（它沒有任何依賴項）並且非常易於使用，因為“自然語言”用於發送創建動畫的指令。scrollReveal.js適用於DOM節點，多個容器，異步內容，並且它支持3D旋轉。您可以獲得滾動動畫的最佳工具，它支持許多Web瀏覽器，前提是它們支持CSS Transform和CSS Transition。
安裝：
使用NPM，可以使用以下命令安裝scrollReveal.js。
npm install scrollreveal
更多信息可以在官方網站和npm網站上找到。
Velocity.js
14,692 ★
這個奇妙的動畫庫列表的下一個是Velocity.js。許多UI設計師的心上人，只需使用HTML和SVG，就可以輕鬆創建功能強大的Web動畫。Velocity.js可用於滾動瀏覽器窗口甚至撤消以前的動畫。儘管使用與jQuery相同的API，您將發現的為數不多的動畫工具之一獨立於強大的jQuery框架$.animate()。像WhatsApp和MailChimp這樣的服務是這個奇妙工具的已知用戶。
安裝：
使用NPM，可以使用以下命令安裝Velocity.js。
npm install velocity-animate
更多信息可以在官方網站和npm網站上找到。
Popmotion
13,777 ★
Popmotion排在第六位。與anime.js類似的庫，Popmotion可用於構建精彩的瀏覽器動畫。該庫還具有指針跟蹤，彈簧物理，3D對象動畫等功能，並且可以創建功能性，反應性動畫。
安裝：
使用NPM，可以使用以下命令安裝Popmotion JS。
npm install popmotion
更多信息可以從官方網站或npm網站獲得。
mo.js
13,461 ★
具有與Popmotion類似的功能，mo.js在此列表中排在第七位。一個簡單的用於創建網絡動畫的庫，它很容易學習，因為創作者Oleg Solomka已經創建了許多教程和演示，以幫助初學者快速上手。mo.js還具有創建形狀的功能，如圓形，多邊形，矩形，線條等.mo.js可能看起來很簡單，但它能夠構建非常複雜的動畫圖形web動畫。
安裝：
使用NPM，可以使用以下命令安裝mo.js.
npm install mo-js
更多信息可以在官方網站和npm網站上找到。
Vivus.js
10,365 ★
Vivus 在這份名單上排名第八。如果您正在尋找一個使用SVG的優秀圖書館，那麼Vivus.js是最好的選擇，特別是對於初學者。這個庫也非常快速和輕量級，因為它沒有依賴性。除了使用SVG之外，Vivus.js還可用於創建精彩按鈕，還有許多其他令人驚歎的動畫可供使用。
安裝：
使用NPM，可以使用以下命令安裝Vivus.js。
npm install vivus
更多信息可以在官方網站和npm網站上獲得。
使用GreenSock
7,767 ★
忽略它在此列表中的位置 - GreenSock 通常被稱為GSAP（GreenSock動畫平臺），並且是列表中最受歡迎的庫之一。
GreenSock的速度和高效率是其珍惜的部分原因。這個偉大的庫也適用於各種各樣的Web瀏覽器，並且沒有依賴關係。
安裝：
使用NPM，可以使用以下命令安裝GreenSock。
npm install gsap
更多信息可以在官方網站和npm網站上找到。
AOS
6,613 ★
因此，雖然本文中討論的其他庫嚴重依賴於JavaScript，但AOS（Animate On Scroll）比JavaScript更依賴於CSS。使用AOS，開發人員可以在向下滾動期間為頁面元素設置動畫，然後在向上滾動期間將動畫反轉為之前的狀態。該庫還附帶了許多可由滾動事件觸發的預定義事件。
安裝：
使用NPM，可以使用以下命令安裝Animate On Scroll。
npm install aos
更多信息可以在官方網站和npm網站上找到。
總結
你用於創建精美動畫的十大JavaScript庫。您是否使用過這些庫中的任何一個並且在用戶體驗方面有一兩個字？或者你認為應該列出哪些圖書館，但沒有？讓我們來談談它。
閱讀更多 愛碼農 的文章
