查看JavaScript開發人員的一些優秀動畫庫，包括HTML，CSS和JavaScript代碼示例！

現代網站的客戶端提供高質量的動畫，這導致了對JavaScript動畫庫的需求的增加。幸運的是，供應似乎與需求相匹配，并且有很多選擇。但是，選擇哪個庫可能會引起很多麻煩。許多圖書館有可能在一年中變得更好，并且將成為創建動畫的***解決方案。 

[[236653]]

我們來看看十大JavaScript動畫庫。

1.three.js

42,569 ★

這個列表中的頭號和***的動畫庫（包含900多個項目貢獻者）是 Three.js。八年后仍然強勁，Three.js仍然是一個強大的動畫工具。依賴于WebGL，Three.js可用于構建精美的3D計算機圖形以在Web瀏覽器上運行。Three.js的特征包括但不限于浮雕效果，透視和正交相機，幾何工具，例如平面，立方體，球體和環面。然而，這個庫的一個缺點是一些開發人員發現它使用起來很慢。

安裝：

使用NPM，可以使用以下命令安裝Three.js。 

npm install three 

更多信息可以在官方網站或npm網站上找到。

2.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網站上找到。

3.Particles.js

15,612 ★

我們將看到的第三個庫是Particles.js庫。Particles.js由Vincent Garreau創建，是一個動畫特定的JavaScript庫，用于創建帶點和線的精彩動畫。如前所述，此庫用于創建看起來像粒子的動畫。因此，它允許開發人員切換諸如粒子的密度，顏色，不透明度，形狀和大小之類的東西。但是，由于它僅適用于粒子背景，因此不適合創建其他類型的動畫。

安裝：

使用NPM，可以使用以下命令安裝Particles.js。 

npm install particlesjs 

有關更多信息，請訪問官方網站 或npm網站。

4.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網站上找到。

5.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網站上找到。

6.Popmotion

13,777 ★

Popmotion排在第六位。與anime.js類似的庫，Popmotion可用于構建精彩的瀏覽器動畫。該庫還具有指針跟蹤，彈簧物理，3D對象動畫等功能，并且可以創建功能性，反應性動畫。

安裝：

使用NPM，可以使用以下命令安裝Popmotion JS。 

npm install popmotion 

更多信息可以從官方網站或npm網站獲得。

7.mo.js

13,461 ★

具有與Popmotion類似的功能，mo.js在此列表中排在第七位。一個簡單的用于創建網絡動畫的庫，它很容易學習，因為創作者Oleg Solomka已經創建了許多教程和演示，以幫助初學者快速上手。mo.js還具有創建形狀的功能，如圓形，多邊形，矩形，線條等.mo.js可能看起來很簡單，但它能夠構建非常復雜的動畫圖形web動畫。

安裝：

使用NPM，可以使用以下命令安裝mo.js. 

npm install mo-js 

更多信息可以在官方網站和npm網站上找到。

8.Vivus.js

10,365 ★

Vivus 在這份名單上排名第八。如果您正在尋找一個使用SVG的優秀圖書館，那么Vivus.js是***的選擇，特別是對于初學者。這個庫也非常快速和輕量級，因為它沒有依賴性。除了使用SVG之外，Vivus.js還可用于創建精彩按鈕，還有許多其他令人驚嘆的動畫可供使用。

安裝：

使用NPM，可以使用以下命令安裝Vivus.js。 

npm install vivus 

更多信息可以在官方網站和npm網站上獲得。

9.使用GreenSock

7,767 ★

忽略它在此列表中的位置 - GreenSock 通常被稱為GSAP（GreenSock動畫平臺），并且是列表中***的庫之一。

GreenSock的速度和高效率是其珍惜的部分原因。這個偉大的庫也適用于各種各樣的Web瀏覽器，并且沒有依賴關系。

安裝：

使用NPM，可以使用以下命令安裝GreenSock。 

npm install gsap 

更多信息可以在官方網站和npm網站上找到。

10.AOS

6,613 ★

因此，雖然本文中討論的其他庫嚴重依賴于JavaScript，但AOS（Animate On Scroll）比JavaScript更依賴于CSS。使用AOS，開發人員可以在向下滾動期間為頁面元素設置動畫，然后在向上滾動期間將動畫反轉為之前的狀態。該庫還附帶了許多可由滾動事件觸發的預定義事件。

安裝：

使用NPM，可以使用以下命令安裝Animate On Scroll。 

npm install aos 

更多信息可以在官方網站和npm網站上找到。

總結 

你用于創建精美動畫的十大JavaScript庫。您是否使用過這些庫中的任何一個并且在用戶體驗方面有一兩個字？或者你認為應該列出哪些圖書館，但沒有？讓我們來談談它。