2018年推出的10個(gè)JavaScript動(dòng)畫庫
查看JavaScript開發(fā)人員的一些優(yōu)秀動(dòng)畫庫，包括HTML，CSS和JavaScript代碼示例！
現(xiàn)代網(wǎng)站的客戶端提供高質(zhì)量的動(dòng)畫，這導(dǎo)致了對(duì)JavaScript動(dòng)畫庫的需求的增加。幸運(yùn)的是，供應(yīng)似乎與需求相匹配，并且有很多選擇。但是，選擇哪個(gè)庫可能會(huì)引起很多麻煩。許多圖書館有可能在一年中變得更好，并且將成為創(chuàng)建動(dòng)畫的***解決方案。
我們來看看十大JavaScript動(dòng)畫庫。
1.three.js
42,569 ★
這個(gè)列表中的頭號(hào)和***的動(dòng)畫庫（包含900多個(gè)項(xiàng)目貢獻(xiàn)者）是 Three.js。八年后仍然強(qiáng)勁，Three.js仍然是一個(gè)強(qiáng)大的動(dòng)畫工具。依賴于WebGL，Three.js可用于構(gòu)建精美的3D計(jì)算機(jī)圖形以在Web瀏覽器上運(yùn)行。Three.js的特征包括但不限于浮雕效果，透視和正交相機(jī)，幾何工具，例如平面，立方體，球體和環(huán)面。然而，這個(gè)庫的一個(gè)缺點(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)建，是您將遇到的最快的動(dòng)畫庫之一。anime.js可以與DOM一起順利運(yùn)行，并支持主要的Web瀏覽器，如Chrome，F(xiàn)irefox，Opera，Safari和Internet Explorer 10+。此庫包括但不限于以下功能：用于動(dòng)畫CSS變換的CSS變換，用于行的SVG動(dòng)畫以及用于同步多個(gè)實(shí)例的時(shí)間軸。使anime.js對(duì)開發(fā)人員有吸引力的一點(diǎn)是它非常輕量級(jí)。
安裝：
使用NPM，可以使用以下命令安裝anime.js.
- npm install animejs
更多信息可以在官方網(wǎng)站和npm網(wǎng)站上找到。
3.Particles.js
15,612 ★
我們將看到的第三個(gè)庫是Particles.js庫。Particles.js由Vincent Garreau創(chuàng)建，是一個(gè)動(dòng)畫特定的JavaScript庫，用于創(chuàng)建帶點(diǎn)和線的精彩動(dòng)畫。如前所述，此庫用于創(chuàng)建看起來像粒子的動(dòng)畫。因此，它允許開發(fā)人員切換諸如粒子的密度，顏色，不透明度，形狀和大小之類的東西。但是，由于它僅適用于粒子背景，因此不適合創(chuàng)建其他類型的動(dòng)畫。
安裝：
使用NPM，可以使用以下命令安裝Particles.js。
- npm install particlesjs
有關(guān)更多信息，請(qǐng)?jiān)L問官方網(wǎng)站 或npm網(wǎng)站。
4.ScrollReveal JS
15,499 ★
scrollReveal.js在我們的列表中占據(jù)了第四位，就像Particles.js一樣，它也是一個(gè)特定于動(dòng)畫的JavaScript庫。用于創(chuàng)建驚人的滾動(dòng)動(dòng)畫，scrollReveal.js是一個(gè)輕量級(jí)工具（它沒有任何依賴項(xiàng)）并且非常易于使用，因?yàn)?ldquo;自然語言”用于發(fā)送創(chuàng)建動(dòng)畫的指令。scrollReveal.js適用于DOM節(jié)點(diǎn)，多個(gè)容器，異步內(nèi)容，并且它支持3D旋轉(zhuǎn)。您可以獲得滾動(dòng)動(dòng)畫的***工具，它支持許多Web瀏覽器，前提是它們支持CSS Transform和CSS Transition。
安裝：
使用NPM，可以使用以下命令安裝scrollReveal.js。
- npm install scrollreveal
更多信息可以在官方網(wǎng)站和npm網(wǎng)站上找到。
5.Velocity.js
14,692 ★
這個(gè)奇妙的動(dòng)畫庫列表的下一個(gè)是Velocity.js。許多UI設(shè)計(jì)師的心上人，只需使用HTML和SVG，就可以輕松創(chuàng)建功能強(qiáng)大的Web動(dòng)畫。Velocity.js可用于滾動(dòng)瀏覽器窗口甚至撤消以前的動(dòng)畫。盡管使用與jQuery相同的API，您將發(fā)現(xiàn)的為數(shù)不多的動(dòng)畫工具之一獨(dú)立于強(qiáng)大的jQuery框架$.animate()。像WhatsApp和MailChimp這樣的服務(wù)是這個(gè)奇妙工具的已知用戶。
安裝：
使用NPM，可以使用以下命令安裝Velocity.js。
- npm install velocity-animate
更多信息可以在官方網(wǎng)站和npm網(wǎng)站上找到。
6.Popmotion
13,777 ★
Popmotion排在第六位。與anime.js類似的庫，Popmotion可用于構(gòu)建精彩的瀏覽器動(dòng)畫。該庫還具有指針跟蹤，彈簧物理，3D對(duì)象動(dòng)畫等功能，并且可以創(chuàng)建功能性，反應(yīng)性動(dòng)畫。
安裝：
使用NPM，可以使用以下命令安裝Popmotion JS。
- npm install popmotion
更多信息可以從官方網(wǎng)站或npm網(wǎng)站獲得。
7.mo.js
13,461 ★
具有與Popmotion類似的功能，mo.js在此列表中排在第七位。一個(gè)簡(jiǎn)單的用于創(chuàng)建網(wǎng)絡(luò)動(dòng)畫的庫，它很容易學(xué)習(xí)，因?yàn)閯?chuàng)作者Oleg Solomka已經(jīng)創(chuàng)建了許多教程和演示，以幫助初學(xué)者快速上手。mo.js還具有創(chuàng)建形狀的功能，如圓形，多邊形，矩形，線條等.mo.js可能看起來很簡(jiǎn)單，但它能夠構(gòu)建非常復(fù)雜的動(dòng)畫圖形web動(dòng)畫。
安裝：
使用NPM，可以使用以下命令安裝mo.js.
- npm install mo-js
更多信息可以在官方網(wǎng)站和npm網(wǎng)站上找到。
8.Vivus.js
10,365 ★
Vivus 在這份名單上排名第八。如果您正在尋找一個(gè)使用SVG的優(yōu)秀圖書館，那么Vivus.js是***的選擇，特別是對(duì)于初學(xué)者。這個(gè)庫也非?？焖俸洼p量級(jí)，因?yàn)樗鼪]有依賴性。除了使用SVG之外，Vivus.js還可用于創(chuàng)建精彩按鈕，還有許多其他令人驚嘆的動(dòng)畫可供使用。
安裝：
使用NPM，可以使用以下命令安裝Vivus.js。
- npm install vivus
更多信息可以在官方網(wǎng)站和npm網(wǎng)站上獲得。
9.使用GreenSock
7,767 ★
忽略它在此列表中的位置 - GreenSock 通常被稱為GSAP（GreenSock動(dòng)畫平臺(tái)），并且是列表中***的庫之一。
GreenSock的速度和高效率是其珍惜的部分原因。這個(gè)偉大的庫也適用于各種各樣的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ā)人員可以在向下滾動(dòng)期間為頁面元素設(shè)置動(dòng)畫，然后在向上滾動(dòng)期間將動(dòng)畫反轉(zhuǎn)為之前的狀態(tài)。該庫還附帶了許多可由滾動(dòng)事件觸發(fā)的預(yù)定義事件。
安裝：
使用NPM，可以使用以下命令安裝Animate On Scroll。
- npm install aos
更多信息可以在官方網(wǎng)站和npm網(wǎng)站上找到。
總結(jié)
你用于創(chuàng)建精美動(dòng)畫的十大JavaScript庫。您是否使用過這些庫中的任何一個(gè)并且在用戶體驗(yàn)方面有一兩個(gè)字？或者你認(rèn)為應(yīng)該列出哪些圖書館，但沒有？讓我們來談?wù)勊?nbsp;
