2018年值得關注的10大JavaScript動畫庫

2018年值得關注的10大JavaScript動畫庫

旭日雲中竹 前端早讀課 1周前

前言

平時你們開發動畫是採用什麼方式呢？雖然18年過半，可這十個動畫庫是真的沒聽過幾個，有點尷尬。今日早讀文章由@旭日雲中竹翻譯分享。

正文從這開始～

現代網站的客戶端依靠高質量的動畫，使得JavaScript動畫庫的需求不斷增長。幸運的是，供應彷佛與需求相匹配，而且有多種選擇。至於選擇哪個就難以定奪了。在這一年裏，許多動畫庫有可能完善得更好，爲建立動畫提供更好的解決方案。

讓咱們來看看2018年值得關注的十大JavaScript動畫庫。

Three JS

42,569 ★

Three JS 是這裏面排名第1、最受歡迎的動畫庫（該項目有900多位的貢獻者）。八年了，Three JS 仍然是一個強大的動畫工具。Three JS 依賴於WebGL，能夠用來構建瀏覽器端酷炫的3D計算機圖形。它的功能包括但不限於浮雕效果，透視和正交相機效果，幾何工具，如平面，立方體，球體，環面。然而，這個庫有個缺點，就是一些開發人員發現它使用起來很慢。

安裝:

使用NPM，可使用如下命令安裝Three JS。

npm install three

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

Anime JS

21,084 ★

Anime JS 多是 Three JS的備選方案，居於列表第二位。Anime JS由Julian Garnier建立，是您遇到過最快的動畫庫之一。它能夠與DOM一塊兒順利運行，而且支持Chrome，Firefox，Opera，Safari，IE10+等的主流瀏覽器。該庫包括但不限於如下功能：用於CSS動畫的的CSS transform，用於線的SVG動畫，用於同步多個實例的時間軸。Anime JS最吸引開發者的緣由之一就是它很是輕量級。

安裝:

使用NPM，可使用如下命令安裝Anime JS。

npm install animejs

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

Particles JS

15,612 ★

接下來咱們要看的第三個動畫庫是Particles JS。Particles JS由Vincent Garreau建立，是一款特定動畫的JavaScript庫，用於建立點和線組成的精彩動畫。如上所述，該庫用於建立看起來像粒子的動畫。所以，它容許開發人員切換諸如粒子的密度，顏色，不透明度，形狀和大小之類的東西。可是，因爲它僅適用於粒子背景，所以不適合用來建立其餘類型的動畫。

安裝:

使用NPM，可使用如下命令安裝Particles JS。

npm install particlesjs

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

ScrollReveal JS

15,499 ★

ScrollReveal JS居於列表第四位，與前面討論的Particles JS同樣，也是一款特定動畫的JavaScript庫。ScrollReveal JS用於建立十分酷炫的滾動特效，是一個輕量級的工具（沒有任何依賴），並且很是容易使用，由於它使用天然語言來發送建立動畫的指令。ScrollReveal JS適用於DOM節點，多個容器，異步內容，而且支持3D旋轉。ScrollReveal JS多是建立滾動特效最好用的工具，它支持大量的瀏覽器，只要這些瀏覽器支持CSS Transform和CSS Transition特性。

安裝:

使用NPM，可使用如下命令安裝ScrollReveal JS。

npm install scrollreveal

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

Velocity JS

14,692 ★

接下來在這個使人驚歎的動畫庫列表上的就是Velocity JS了。它深得許多UI設計師的喜好。經過使用HTML和SVG，該工具能夠輕鬆地建立各類功能強大的Web動畫。Velocity JS可用於滾動瀏覽器窗口，甚至撤消之前的動畫。Velocity JS儘管使用與jQuery的$.animate（）相同的API，您會發現它是少數獨立於強大的jQuery框架的動畫工具之一，像 WhatsApp 和 MailChimp 就是這個優秀工具的知名用戶。

安裝:

使用NPM，可使用如下命令安裝Velocity JS。

npm install velocity-animate

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

Popmotion JS

13,777 ★

Popmotion JS排行第六，是一款與Anime JS相似的動畫庫，可用於建立精彩的瀏覽器動畫。該庫還具備指針跟蹤，彈簧物理效果，3D動畫等功能，並可用於建立功能型和反應型的動畫。

安裝:

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

npm install popmotion

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

Mo JS

13,461 ★

與Popmotion JS相似，Mo JS排名第七，是一款用於建立Web動畫的簡單庫。Mo JS簡單易學，它的創做者Oleg Solomka已經建立了不少教程和demo，來幫助初學者快速上手。Mo JS還具備建立圓形，多邊形，矩形，線條等功能。Mo JS看起來很簡單，卻能夠構建出很是複雜的動態圖形的Web動畫。

安裝:

使用NPM，可使用如下命令安裝Mo JS。

npm install mo-js

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

Vivus JS

10,365 ★

Vivus JS在這個列表上排名第八。若是您在這個列表中尋找一個使用SVG的優秀庫，那麼Vivus JS是最佳之選，尤爲適合初學者。這個庫也很快、很輕量級，由於它沒有任何依賴。除了使用SVG以外，Vivus JS還可用於建立漂亮的按鈕，也有其餘使人驚歎的動畫可供使用。

安裝:

使用NPM，可使用如下命令安裝Vivus JS。

npm install vivus

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

GreenSock JS

7,767 ★

GreenSock，一般被稱爲GSAP（GreenSock動畫平臺），咱們忽略它在列表中的排名，它是列表中最受歡迎的庫之一。GreenSock的速度和高效率是它受人喜好的緣由之一。這個強大的庫也支持各式瀏覽器，而且沒有任何依賴。

安裝:

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

npm install gsap

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

AOS

6,613 ★

所以，雖然本文中討論的其它庫大力依賴於JavaScript，可是AOS（Animate On Scroll）卻更多地依賴於CSS。使用AOS，開發人員能夠在向下滾動時爲頁面元素添加動畫，而後在向上滾動時恢復以前的動畫狀態。這個庫還附帶了許多由滾動事件觸發的預約義事件。

安裝:

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

npm install aos

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

總結

就這些了，十個用於建立精美動畫的JavaScript庫。您是否使用過這些庫中的任意一個？是否在用戶體驗方面有些許建議？或者你認爲這裏哪些庫應該被列出來，但沒有？

最後，360奇舞團@月影在前一段時間開源了跨平臺繪圖對象模型spritejs，有興趣的能夠了解一下：http://spritejs.org/#/

關於本文
譯者：@旭日雲中竹
譯文：
https://www.zcfy.cc/article/10-javascript-animation-libraries-to-follow-in-2018
做者：@Anton Shaleynikov
原文：
https://hackernoon.com/10-javascript-animation-libraries-to-follow-in-2018-50ff1d905f43

 

 

另，關於canvas庫：https://www.cnblogs.com/rysinal/p/5834448.html