30個(gè)你應(yīng)該在2022年里使用的JavaScript 動(dòng)畫(huà)庫(kù)

點(diǎn)擊上方 前端Q，關(guān)注公眾號(hào)

回復(fù)加群，加入前端Q技術(shù)交流群

英文 | https://javascript.plainenglish.io/30-javascript-animation-libraries-for-2022-db33a472e02d

翻譯 | 楊小愛(ài)

動(dòng)畫(huà)能使我們以獨(dú)特的方式講述故事并傳達(dá)情感和想法。這里有 30 個(gè) JavaScript 動(dòng)畫(huà)庫(kù)可供我們?cè)诮窈蟮捻?xiàng)目中使用。

1、Greensock

地址：https://greensock.com/

用于構(gòu)建適用于所有主流瀏覽器的高性能動(dòng)畫(huà)的 JavaScript 庫(kù)。

2、Velocity.js

地址：http://velocityjs.org/

Velocity 是一個(gè)輕量級(jí)動(dòng)畫(huà)引擎，其 API 與 jQuery 的 $.animate() 相同。

3、Lax.js

地址：https://github.com/alexfoxy/laxxx

簡(jiǎn)單輕巧的香草 javascript 插件，可在您滾動(dòng)時(shí)創(chuàng)建流暢美觀的動(dòng)畫(huà)！

4、 Rellax.js

地址：https://github.com/dixonandmoe/rellax

一個(gè)光滑、超輕量級(jí)的 javascript 視差庫(kù)。

5、three.js

地址：https://github.com/mrdoob/three.js/

一個(gè)易于使用的輕量級(jí) 3D 庫(kù)，帶有默認(rèn)的 WebGL 渲染器。

6、wow.js

地址：https://wowjs.uk/

滾動(dòng)時(shí)顯示動(dòng)畫(huà)。

7、Chocolat.js

地址：http://chocolat.insipi.de/

免費(fèi)燈箱插件。

8、Animate on Scroll

地址：https://michalsnik.github.io/aos/

滾動(dòng)庫(kù)上的動(dòng)畫(huà)以在您滾動(dòng)時(shí)顯示動(dòng)畫(huà)。

9、Tilt.js

地址：http://gijsroge.github.io/tilt.js/

一個(gè)微小的 requestAnimationFrame 為 jQuery 提供了 60+fps 的輕量級(jí)視差懸停傾斜效果。

10、Rough Notation

地址：https://roughnotation.com/

Rough Notation 是一個(gè)小型 JavaScript 庫(kù)，用于在網(wǎng)頁(yè)上創(chuàng)建和動(dòng)畫(huà)注釋。

11、tsParticles

地址：https://particles.matteobruni.it/

一個(gè)用于創(chuàng)建粒子的輕量級(jí)庫(kù)，廢棄和過(guò)時(shí)的particles.js的改進(jìn)版本。

12、Particles.js

地址：https://vincentgarreau.com/particles.js/

用于創(chuàng)建粒子的輕量級(jí) JavaScript 庫(kù)。

13、mo.js

地址：https://mojs.github.io/

用于 Web 的動(dòng)態(tài)圖形工具帶。

14、Lightbox2

地址：https://lokeshdhakar.com/projects/lightbox2/

一個(gè)小型 JS 庫(kù)，用于在當(dāng)前頁(yè)面頂部覆蓋圖像。

15、Slick

地址：https://kenwheeler.github.io/slick/

完全響應(yīng)式的輪播。

16、Barba.js

地址：https://barba.js.org/

在你的網(wǎng)站頁(yè)面之間創(chuàng)建流暢的過(guò)渡。

17、Locomotive Scroll

地址：https://locomotivemtl.github.io/locomotive-scroll/

一個(gè)簡(jiǎn)單的滾動(dòng)庫(kù)，提供視口中的元素檢測(cè)和視差平滑滾動(dòng)。

18、Owl Carousel

地址：https://owlcarousel2.github.io/OwlCarousel2/

免費(fèi)響應(yīng)式 jQuery 輪播。

19、Swiper.js

地址：https://swiperjs.com/

沒(méi)有 jQuery 的免費(fèi)、開(kāi)源、現(xiàn)代滑塊。適用于 Vanilla JS 和所有現(xiàn)代框架，如 React、Vue、Angular 等。

20、Splide

地址：https://splidejs.com/

用于輪播和滑塊的免費(fèi)純 JS 庫(kù)。

21、 Simple Parallax

地址：https://simpleparallax.com/

使用 javascript 獲得視差效果的最簡(jiǎn)單方法。

22、 Kute.js

地址：https://thednp.github.io/kute.js/

KUTE.js 是一個(gè)適用于現(xiàn)代瀏覽器的 JavaScript 動(dòng)畫(huà)引擎。

23、Granim.js

地址：https://sarcadass.github.io/granim.js/index.html

使用這個(gè)小型 javascript 庫(kù)創(chuàng)建流暢的交互式漸變動(dòng)畫(huà)。

24、Popmotion

地址：https://popmotion.io/

用于令人愉悅的用戶界面的簡(jiǎn)單動(dòng)畫(huà)庫(kù)。

25、Vivus

地址：https://maxwellito.github.io/vivus/

Vivus 是一個(gè)輕量級(jí)的 JavaScript 類(lèi)（沒(méi)有依賴項(xiàng)），它允許你對(duì) SVG 進(jìn)行動(dòng)畫(huà)處理，使它們看起來(lái)像是被繪制的。

26、Typed.js

地址：https://mattboldt.com/demos/typed-js/

JavaScript 打字動(dòng)畫(huà)庫(kù)。

27、ProgressBar.js

地址：https://kimmobrunfeldt.github.io/progressbar.js/

帶有動(dòng)畫(huà) SVG 路徑的響應(yīng)式和流暢的進(jìn)度條。

28、Anime.js

地址：https://animejs.com/

具有簡(jiǎn)單但功能強(qiáng)大的 API 的輕量級(jí) JavaScript 動(dòng)畫(huà)庫(kù)。

29、 AniJS

地址：https://anijs.github.io/

無(wú)需編碼即可提升您的網(wǎng)頁(yè)設(shè)計(jì)的庫(kù)。

30、Remotion

地址：https://www.remotion.dev/

這個(gè)庫(kù)本身不是一個(gè)動(dòng)畫(huà)庫(kù)，但您可以使用它通過(guò)編寫(xiě) JavaScript 代碼來(lái)制作視頻。

最后，感謝您的閱讀。

往期推薦

大廠面試官：我理想中的前端

對(duì)話Svelte未來(lái)，Rust 編譯器？構(gòu)建大型應(yīng)用?

收藏！史上最全 Vue 前端代碼風(fēng)格指南

最后

• 歡迎加我微信，拉你進(jìn)技術(shù)群，長(zhǎng)期交流學(xué)習(xí)...
  

• 歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端，做個(gè)專業(yè)的技術(shù)人...

點(diǎn)個(gè)在看支持我吧