查看JavaScript開發(fā)人員的一些優(yōu)秀動畫庫，包括HTML，CSS和JavaScript代碼示例！

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

[[236653]]

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

1.three.js

42,569 ★

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

安裝：

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

npm install three 

更多信息可以在官方網(wǎng)站或npm網(wǎng)站上找到。

2.anime.js

21,084 ★

可能是Three.js的替代品，anime.js 排在第二位。anime.js由Julian Garnier創(chuàng)建，是您將遇到的最快的動畫庫之一。anime.js可以與DOM一起順利運(yùn)行，并支持主要的Web瀏覽器，如Chrome，F(xiàn)irefox，Opera，Safari和Internet Explorer 10+。此庫包括但不限于以下功能：用于動畫CSS變換的CSS變換，用于行的SVG動畫以及用于同步多個實(shí)例的時間軸。使anime.js對開發(fā)人員有吸引力的一點(diǎn)是它非常輕量級。

安裝：

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

npm install animejs 

更多信息可以在官方網(wǎng)站和npm網(wǎng)站上找到。

3.Particles.js

15,612 ★

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

安裝：

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

npm install particlesjs 

有關(guān)更多信息，請訪問官方網(wǎng)站 或npm網(wǎng)站。

4.ScrollReveal JS

15,499 ★

scrollReveal.js在我們的列表中占據(jù)了第四位，就像Particles.js一樣，它也是一個特定于動畫的JavaScript庫。用于創(chuàng)建驚人的滾動動畫，scrollReveal.js是一個輕量級工具（它沒有任何依賴項(xiàng)）并且非常易于使用，因?yàn)?ldquo;自然語言”用于發(fā)送創(chuàng)建動畫的指令。scrollReveal.js適用于DOM節(jié)點(diǎn)，多個容器，異步內(nèi)容，并且它支持3D旋轉(zhuǎn)。您可以獲得滾動動畫的***工具，它支持許多Web瀏覽器，前提是它們支持CSS Transform和CSS Transition。

安裝：

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

npm install scrollreveal 

更多信息可以在官方網(wǎng)站和npm網(wǎng)站上找到。

5.Velocity.js

14,692 ★

這個奇妙的動畫庫列表的下一個是Velocity.js。許多UI設(shè)計師的心上人，只需使用HTML和SVG，就可以輕松創(chuàng)建功能強(qiáng)大的Web動畫。Velocity.js可用于滾動瀏覽器窗口甚至撤消以前的動畫。盡管使用與jQuery相同的API，您將發(fā)現(xiàn)的為數(shù)不多的動畫工具之一獨(dú)立于強(qiáng)大的jQuery框架$.animate()。像WhatsApp和MailChimp這樣的服務(wù)是這個奇妙工具的已知用戶。

安裝：

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

npm install velocity-animate 

更多信息可以在官方網(wǎng)站和npm網(wǎng)站上找到。

6.Popmotion

13,777 ★

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

安裝：

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

npm install popmotion 

更多信息可以從官方網(wǎng)站或npm網(wǎng)站獲得。

7.mo.js

13,461 ★

具有與Popmotion類似的功能，mo.js在此列表中排在第七位。一個簡單的用于創(chuàng)建網(wǎng)絡(luò)動畫的庫，它很容易學(xué)習(xí)，因?yàn)閯?chuàng)作者Oleg Solomka已經(jīng)創(chuàng)建了許多教程和演示，以幫助初學(xué)者快速上手。mo.js還具有創(chuàng)建形狀的功能，如圓形，多邊形，矩形，線條等.mo.js可能看起來很簡單，但它能夠構(gòu)建非常復(fù)雜的動畫圖形web動畫。

安裝：

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

npm install mo-js 

更多信息可以在官方網(wǎng)站和npm網(wǎng)站上找到。

8.Vivus.js

10,365 ★

Vivus 在這份名單上排名第八。如果您正在尋找一個使用SVG的優(yōu)秀圖書館，那么Vivus.js是***的選擇，特別是對于初學(xué)者。這個庫也非?？焖俸洼p量級，因?yàn)樗鼪]有依賴性。除了使用SVG之外，Vivus.js還可用于創(chuàng)建精彩按鈕，還有許多其他令人驚嘆的動畫可供使用。

安裝：

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

npm install vivus 

更多信息可以在官方網(wǎng)站和npm網(wǎng)站上獲得。

9.使用GreenSock

7,767 ★

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

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

安裝：

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

npm install gsap 

更多信息可以在官方網(wǎng)站和npm網(wǎng)站上找到。

10.AOS

6,613 ★

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

安裝：

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

npm install aos 

更多信息可以在官方網(wǎng)站和npm網(wǎng)站上找到。

總結(jié) 

你用于創(chuàng)建精美動畫的十大JavaScript庫。您是否使用過這些庫中的任何一個并且在用戶體驗(yàn)方面有一兩個字？或者你認(rèn)為應(yīng)該列出哪些圖書館，但沒有？讓我們來談?wù)勊?nbsp;