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

翻譯 | 楊小愛

動畫能使我們以獨特的方式講述故事并傳達情感和想法。這里有 30 個 JavaScript 動畫庫可供我們在今后的項目中使用。

1、Greensock

地址：https://greensock.com/

用于構建適用于所有主流瀏覽器的高性能動畫的 JavaScript 庫。

2、Velocity.js

地址：http://velocityjs.org/

Velocity 是一個輕量級動畫引擎，其 API 與 jQuery 的 $.animate() 相同。

3、Lax.js

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

簡單輕巧的香草 javascript 插件，可在您滾動時創(chuàng)建流暢美觀的動畫！

4、 Rellax.js

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

一個光滑、超輕量級的 javascript 視差庫。

5、three.js

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

一個易于使用的輕量級 3D 庫，帶有默認的 WebGL 渲染器。

6、wow.js

地址：https://wowjs.uk/

滾動時顯示動畫。

7、Chocolat.js

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

免費燈箱插件。

8、Animate on Scroll

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

滾動庫上的動畫以在您滾動時顯示動畫。

9、Tilt.js

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

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

10、Rough Notation

地址：https://roughnotation.com/

Rough Notation 是一個小型 JavaScript 庫，用于在網頁上創(chuàng)建和動畫注釋。

11、tsParticles

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

一個用于創(chuàng)建粒子的輕量級庫，廢棄和過時的particles.js的改進版本。

12、Particles.js

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

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

13、mo.js

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

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

14、Lightbox2

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

一個小型 JS 庫，用于在當前頁面頂部覆蓋圖像。

15、Slick

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

完全響應式的輪播。

16、Barba.js

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

在你的網站頁面之間創(chuàng)建流暢的過渡。

17、Locomotive Scroll

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

一個簡單的滾動庫，提供視口中的元素檢測和視差平滑滾動。

18、Owl Carousel

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

免費響應式 jQuery 輪播。

19、Swiper.js

地址：https://swiperjs.com/

沒有 jQuery 的免費、開源、現代滑塊。適用于 Vanilla JS 和所有現代框架，如 React、Vue、Angular 等。

20、Splide

地址：https://splidejs.com/

用于輪播和滑塊的免費純 JS 庫。

21、 Simple Parallax

地址：https://simpleparallax.com/

使用 javascript 獲得視差效果的最簡單方法。

22、 Kute.js

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

KUTE.js 是一個適用于現代瀏覽器的 JavaScript 動畫引擎。

23、Granim.js

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

使用這個小型 javascript 庫創(chuàng)建流暢的交互式漸變動畫。

24、Popmotion

地址：https://popmotion.io/

用于令人愉悅的用戶界面的簡單動畫庫。

25、Vivus

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

Vivus 是一個輕量級的 JavaScript 類（沒有依賴項），它允許你對 SVG 進行動畫處理，使它們看起來像是被繪制的。

26、Typed.js

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

JavaScript 打字動畫庫。

27、ProgressBar.js

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

帶有動畫 SVG 路徑的響應式和流暢的進度條。

28、Anime.js

地址：https://animejs.com/

具有簡單但功能強大的 API 的輕量級 JavaScript 動畫庫。

29、 AniJS

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

無需編碼即可提升您的網頁設計的庫。

30、Remotion

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

這個庫本身不是一個動畫庫，但您可以使用它通過編寫 JavaScript 代碼來制作視頻。

最后，感謝您的閱讀。

學習更多技能

請點擊下方公眾號