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