30个你应该在2022年里使用的JavaScript 动画库-技术圈

点击上方前端Q，关注公众号

回复加群，加入前端Q技术交流群

英文 | 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 插件，可在您滚动时创建流畅美观的动画！

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 库，用于在网页上创建和动画注释。

11、tsParticles

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

一个用于创建粒子的轻量级库，废弃和过时的particles.js的改进版本。

12、Particles.js

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

用于创建粒子的轻量级 JavaScript 库。

13、mo.js

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

用于 Web 的动态图形工具带。

14、Lightbox2

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

一个小型 JS 库，用于在当前页面顶部覆盖图像。

15、Slick

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

完全响应式的轮播。

16、Barba.js

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

在你的网站页面之间创建流畅的过渡。

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 库创建流畅的交互式渐变动画。

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 代码来制作视频。

最后，感谢您的阅读。

往期推荐

大厂面试官：我理想中的前端

对话Svelte未来，Rust 编译器？构建大型应用?

收藏！史上最全 Vue 前端代码风格指南

最后

欢迎加我微信，拉你进技术群，长期交流学习...

欢迎关注「前端Q」,认真学前端，做个专业的技术人...

点个在看支持我吧