資訊專欄INFORMATION COLUMN
摘要：幸運(yùn)的是，供應(yīng)似乎與需求相匹配，并且有多種選擇。讓我們來看看年值得關(guān)注的十大動(dòng)畫庫(kù)。八年了，仍然是一個(gè)強(qiáng)大的動(dòng)畫工具。接下來在這個(gè)令人驚嘆的動(dòng)畫庫(kù)列表上的就是了。，通常被稱為動(dòng)畫平臺(tái)，我們忽略它在列表中的排名，它是列表中最受歡迎的庫(kù)之一。
原文鏈接
原譯文鏈接
現(xiàn)代網(wǎng)站的客戶端依靠高質(zhì)量的動(dòng)畫，這就使得JavaScript動(dòng)畫庫(kù)的需求不斷增加。幸運(yùn)的是，供應(yīng)似乎與需求相匹配，并且有多種選擇。至于選擇哪一個(gè)就難以定奪了。在這一年里，許多動(dòng)畫庫(kù)有可能完善得更好，為創(chuàng)建動(dòng)畫提供更好的解決方案。
讓我們來看看2018年值得關(guān)注的十大JavaScript動(dòng)畫庫(kù)。
Three JS 42,569 ★Three JS 是這里面排名第一、最受歡迎的動(dòng)畫庫(kù)（該項(xiàng)目有900多位的貢獻(xiàn)者）。八年了，Three JS 仍然是一個(gè)強(qiáng)大的動(dòng)畫工具。Three JS 依賴于WebGL，可以用來構(gòu)建瀏覽器端酷炫的3D計(jì)算機(jī)圖形。它的功能包括但不限于浮雕效果，透視和正交相機(jī)效果，幾何工具，如平面，立方體，球體，環(huán)面。然而，這個(gè)庫(kù)有個(gè)缺點(diǎn)，就是一些開發(fā)人員發(fā)現(xiàn)它使用起來很慢。
安裝:
使用NPM，可以使用以下命令安裝Three JS。
npm install three
更多信息可從官方網(wǎng)站或npm獲取。
Anime JS 21,084 ★Anime JS 可能是 Three JS的備選方案，居于列表第二位。Anime JS由Julian Garnier創(chuàng)建，是您遇到過最快的動(dòng)畫庫(kù)之一。它可以與DOM一起順利運(yùn)行，并且支持Chrome，F(xiàn)irefox，Opera，Safari，IE10+等的主流瀏覽器。該庫(kù)包括但不限于以下功能：用于CSS動(dòng)畫的的CSS transform，用于線的SVG動(dòng)畫，用于同步多個(gè)實(shí)例的時(shí)間軸。Anime JS最吸引開發(fā)者的原因之一就是它非常輕量級(jí)。
安裝:
使用NPM，可以使用以下命令安裝Anime JS。
npm install animejs
更多信息可從官方網(wǎng)站或npm獲取。
Particles JS 15,612 ★接下來我們要看的第三個(gè)動(dòng)畫庫(kù)是Particles JS。Particles JS由Vincent Garreau創(chuàng)建，是一款特定動(dòng)畫的JavaScript庫(kù)，用于創(chuàng)建點(diǎn)和線組成的精彩動(dòng)畫。如上所述，該庫(kù)用于創(chuàng)建看起來像粒子的動(dòng)畫。因此，它允許開發(fā)人員切換諸如粒子的密度，顏色，不透明度，形狀和大小之類的東西。但是，由于它僅適用于粒子背景，因此不適合用來創(chuàng)建其他類型的動(dòng)畫。
安裝:
使用NPM，可以使用以下命令安裝Particles JS。
npm install particlesjs
更多信息可從官方網(wǎng)站或npm獲取。
ScrollReveal JS 15,499 ★ScrollReveal JS居于列表第四位，與前面討論的Particles JS一樣，也是一款特定動(dòng)畫的JavaScript庫(kù)。ScrollReveal JS用于創(chuàng)建十分酷炫的滾動(dòng)特效，是一個(gè)輕量級(jí)的工具（沒有任何依賴），而且非常容易使用，因?yàn)樗褂米匀徽Z言來發(fā)送創(chuàng)建動(dòng)畫的指令。ScrollReveal JS適用于DOM節(jié)點(diǎn)，多個(gè)容器，異步內(nèi)容，并且支持3D旋轉(zhuǎn)。ScrollReveal JS可能是創(chuàng)建滾動(dòng)特效最好用的工具，它支持大量的瀏覽器，只要這些瀏覽器支持CSS Transform和CSS Transition特性。
安裝:
使用NPM，可以使用以下命令安裝ScrollReveal JS。
npm install scrollreveal
更多信息可從官方網(wǎng)站或npm獲取。
Velocity JS 14,692 ★接下來在這個(gè)令人驚嘆的動(dòng)畫庫(kù)列表上的就是Velocity JS了。它深得許多UI設(shè)計(jì)師的喜愛。通過使用HTML和SVG，該工具可以輕松地創(chuàng)建各種功能強(qiáng)大的Web動(dòng)畫。Velocity JS可用于滾動(dòng)瀏覽器窗口，甚至撤消以前的動(dòng)畫。Velocity JS盡管使用與jQuery的$.animate（）相同的API，您會(huì)發(fā)現(xiàn)它是少數(shù)獨(dú)立于強(qiáng)大的jQuery框架的動(dòng)畫工具之一，像 WhatsApp 和 MailChimp 就是這個(gè)優(yōu)秀工具的知名用戶。
安裝:
使用NPM，可以使用以下命令安裝Velocity JS。
npm install velocity-animate
更多信息可從官方網(wǎng)站或npm獲取。
Popmotion JS 13,777 ★Popmotion JS排行第六，是一款與Anime JS類似的動(dòng)畫庫(kù)，可用于創(chuàng)建精彩的瀏覽器動(dòng)畫。該庫(kù)還具有指針跟蹤，彈簧物理效果，3D動(dòng)畫等功能，并可用于創(chuàng)建功能型和反應(yīng)型的動(dòng)畫。
安裝:
使用NPM，可以使用以下命令安裝Popmotion JS。
npm install popmotion
更多信息可從官方網(wǎng)站或npm獲取。
Mo JS 13,461 ★與Popmotion JS類似，Mo JS排名第七，是一款用于創(chuàng)建Web動(dòng)畫的簡(jiǎn)單庫(kù)。Mo JS簡(jiǎn)單易學(xué)，它的創(chuàng)作者Oleg Solomka已經(jīng)創(chuàng)建了很多教程和demo，來幫助初學(xué)者快速上手。Mo JS還具有創(chuàng)建圓形，多邊形，矩形，線條等功能。Mo JS看起來很簡(jiǎn)單，卻可以構(gòu)建出非常復(fù)雜的動(dòng)態(tài)圖形的Web動(dòng)畫。
安裝:
使用NPM，可以使用以下命令安裝Mo JS。
npm install mo-js
更多信息可從官方網(wǎng)站或npm獲取。
Vivus JS 10,365 ★Vivus JS在這個(gè)列表上排名第八。如果您在這個(gè)列表中尋找一個(gè)使用SVG的優(yōu)秀庫(kù)，那么Vivus JS是最佳之選，尤其適合初學(xué)者。這個(gè)庫(kù)也很快、很輕量級(jí)，因?yàn)樗鼪]有任何依賴。除了使用SVG之外，Vivus JS還可用于創(chuàng)建漂亮的按鈕，也有其他令人驚嘆的動(dòng)畫可供使用。
安裝:
使用NPM，可以使用以下命令安裝Vivus JS。
npm install vivus
更多信息可從官方網(wǎng)站或npm獲取。
GreenSock JS 7,767 ★GreenSock，通常被稱為GSAP（GreenSock動(dòng)畫平臺(tái)），我們忽略它在列表中的排名，它是列表中最受歡迎的庫(kù)之一。GreenSock的速度和高效率是它受人喜愛的原因之一。這個(gè)強(qiáng)大的庫(kù)也支持各式瀏覽器，并且沒有任何依賴。
安裝:
使用NPM，可以使用以下命令安裝GreenSock JS。
npm install gsap
更多信息可從官方網(wǎng)站或npm獲取。
AOS 6,613 ★因此，雖然本文中討論的其它庫(kù)大力依賴于JavaScript，但是AOS（Animate On Scroll）卻更多地依賴于CSS。使用AOS，開發(fā)人員可以在向下滾動(dòng)時(shí)為頁(yè)面元素添加動(dòng)畫，然后在向上滾動(dòng)時(shí)恢復(fù)之前的動(dòng)畫狀態(tài)。這個(gè)庫(kù)還附帶了許多由滾動(dòng)事件觸發(fā)的預(yù)定義事件。
安裝:
使用NPM，可以使用以下命令安裝Animate On Scroll。
npm install aos
更多信息可從官方網(wǎng)站或npm獲取。
總結(jié)就這些了，十個(gè)用于創(chuàng)建精美動(dòng)畫的JavaScript庫(kù)。您是否使用過這些庫(kù)中的任意一個(gè)？是否在用戶體驗(yàn)方面有些許建議？或者你認(rèn)為這里哪些庫(kù)應(yīng)該被列出來，但沒有？讓我們來談?wù)劙伞?/p>
9 個(gè)最佳的JS圖表庫(kù)
作者Anton Shaleynikov
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/96451.html
摘要：超過的，是一個(gè)動(dòng)畫庫(kù)，可以處理屬性，單個(gè)轉(zhuǎn)換，或任何屬性以及對(duì)象。在，是一個(gè)快速的動(dòng)畫引擎，具有與的相同的。在，這個(gè)功能和反應(yīng)動(dòng)畫庫(kù)只重。由和其他人使用，這個(gè)庫(kù)既流行又令人驚訝地有用。 在瀏覽網(wǎng)頁(yè)尋找一個(gè)整潔的Javascript動(dòng)畫庫(kù)時(shí)，我發(fā)現(xiàn)很多recommended的動(dòng)畫庫(kù)一段時(shí)間都沒有維護(hù)。 經(jīng)過一些研究，我收集了11個(gè)最好的庫(kù)，在你的應(yīng)用程序中使用。我還添加了一些，主要是非維...
摘要：超過的，是一個(gè)動(dòng)畫庫(kù)，可以處理屬性，單個(gè)轉(zhuǎn)換，或任何屬性以及對(duì)象。在，是一個(gè)快速的動(dòng)畫引擎，具有與的相同的。在，這個(gè)功能和反應(yīng)動(dòng)畫庫(kù)只重。由和其他人使用，這個(gè)庫(kù)既流行又令人驚訝地有用。 在瀏覽網(wǎng)頁(yè)尋找一個(gè)整潔的Javascript動(dòng)畫庫(kù)時(shí)，我發(fā)現(xiàn)很多recommended的動(dòng)畫庫(kù)一段時(shí)間都沒有維護(hù)。 經(jīng)過一些研究，我收集了11個(gè)最好的庫(kù)，在你的應(yīng)用程序中使用。我還添加了一些，主要是非維...
摘要：超過的，是一個(gè)動(dòng)畫庫(kù)，可以處理屬性，單個(gè)轉(zhuǎn)換，或任何屬性以及對(duì)象。在，是一個(gè)快速的動(dòng)畫引擎，具有與的相同的。在，這個(gè)功能和反應(yīng)動(dòng)畫庫(kù)只重。由和其他人使用，這個(gè)庫(kù)既流行又令人驚訝地有用。 在瀏覽網(wǎng)頁(yè)尋找一個(gè)整潔的Javascript動(dòng)畫庫(kù)時(shí)，我發(fā)現(xiàn)很多recommended的動(dòng)畫庫(kù)一段時(shí)間都沒有維護(hù)。 經(jīng)過一些研究，我收集了11個(gè)最好的庫(kù)，在你的應(yīng)用程序中使用。我還添加了一些，主要是非維...
摘要：非常的龐大，而且它是完全為設(shè)計(jì)而生的動(dòng)效庫(kù)。它運(yùn)行于純粹的之上，是目前最強(qiáng)健的動(dòng)畫資源庫(kù)之一。可能是創(chuàng)建滾動(dòng)特效最好用的工具，它支持大量的瀏覽器，只要它們支持和特性。可以通過安裝吊炸天了，接近現(xiàn)實(shí)生活中的物理運(yùn)動(dòng)碰撞慣性動(dòng)畫庫(kù)。 收集日期為2019-02-28，★代表當(dāng)時(shí)的該項(xiàng)目在github的star數(shù)量 Animate.css 56401 ★ 一個(gè)跨瀏覽器的動(dòng)效基礎(chǔ)庫(kù)，是許多基礎(chǔ)動(dòng)...
閱讀 1349·2021-11-25 09:43
閱讀 1912·2021-11-12 10:36
閱讀 6040·2021-09-22 15:05
閱讀 3491·2019-08-30 15:55
閱讀 2023·2019-08-26 14:06
閱讀 3652·2019-08-26 12:17
閱讀 512·2019-08-23 17:55
閱讀 2460·2019-08-23 16:23
