首页/文章/javascript

10 个功能强大的 JavaScript 动画库

2024-01-01

2745 字约 10 分钟

...

学习

首发于公众号大迁世界，欢迎关注。📝 每周一篇实用的前端文章 🛠️ 分享值得关注的开发工具 ❓ 有疑问？我来回答

动画。从人群中脱颖而出、吸引访客注意力的绝佳方式。通过富有创意的物体运动和流畅的页面转换，不仅能为我们的网站增添独特的美感，还能提高用户参与度，创造令人难忘的第一印象。

有了这 10 个功能强大的 JavaScript 库，创建动画再简单不过了。滚动动画、手写动画、SPA 页面转换、打字动画、颜色动画、SVG 动画......它们的功能无穷无尽。

1.Anime.js

地址：animejs.com/

Anime.js 在 GitHub 上有超过 4.3 万颗星，是最受欢迎的动画库之一。

它是一个轻量级 JavaScript 动画库，具有简单的 API，可用于为 CSS 属性、SVG、DOM 属性和 JavaScript 对象制作动画。使用 Anime.js，我们可以播放、暂停、重启或反转动画。该库还提供了惊人的功能，可通过跟进和重叠动作为多个元素制作动画。该库还包含各种与动画相关的事件，我们可以使用回调和承诺来监听这些事件。

2. Lottie

地址：airbnb.io/lottie/

Lottie 是一个库，可以解析使用 Bodymovin 插件以 JSON 格式导出的 Adobe After Effects 动画，并在移动和网络应用程序上进行原生渲染。这样，用户就无需手动重新制作由专业设计师在 After Effects 中创建的高级动画。仅网络版在 GitHub 上就有超过 27k 个星。

3. Velocity

地址：velocityjs.org/

使用Velocity，你可以创建颜色动画、变换、循环、缓和、SVG动画等。它使用的 API 与 jQuery 库中的 $.animate() 方法相同，如果 jQuery 可用，它还可以与之集成。该库提供渐变、滚动和滑动效果。除了能控制动画的持续时间和延迟外，还能在动画完成后的某个时间反转动画，或在动画进行时完全停止。该库在 GitHub 上有 17k 多颗星，是 Anime.js 的理想替代品。

4. Rough Notation

地址：roughnotation.com/

Rough Notation 是一个 JavaScript 库，用于在网页上创建彩色注释并制作动画。它使用 RoughJS 创建手绘的外观和感觉。您可以创建多种注释样式，包括下划线、方框、圆圈、高亮、删除线等，还可以控制每种注释样式的持续时间和颜色。

5. Popmotion

地址：popmotion.io/

Popmotion 是一个功能强大的库，用于创建引人注目的动画。它为何与众不同？- Popmotion 不假定您打算制作动画的对象属性，而是提供可在任何 JavaScript 环境中使用的简单、可组合的函数。

该库支持数字、颜色和复杂字符串的关键帧、弹簧和惯性动画。该库测试良好，维护积极，在 GitHub 上拥有 19k 多颗星。

6. Vivus

地址：maxwellito.github.io/vivus/

Vivus 是一个 JavaScript 库，可让你为 SVGs 制作动画，使其看起来就像正在绘制一样。它速度快、重量轻，完全不依赖任何工具，并提供三种不同的 SVG 动画制作方法：它提供三种不同的 SVG 动画制作方法：延迟、同步和逐一。还可以使用自定义脚本，以自己喜欢的方式绘制 SVG。

Vivus 还允许您自定义持续时间、延迟、定时功能和其他动画设置。查看 Vivus Instant，了解现场实际操作示例。

7.绿袜动画平台（GSAP）

地址：greensock.com/

GreenSock Animation Platform (GSAP) 是一个库，可让我们创建适用于所有主流浏览器的精彩动画。可以在 React、Vue、WebGL 和 HTML 画布中使用它来制作颜色、字符串、运动路径等动画。它还附带了一个 ScrollTrigger 插件，让您只需少量代码就能创建令人印象深刻的基于滚动的动画。

GSAP已在1100多万个网站中使用，在GitHub上有超过15K个 "星"，是一个通用而受欢迎的工具。您可以使用 GreenSock 的 GSDevTools 来轻松调试使用 GSAP 创建的动画。

8. Three.js

地址：threejs.org/

Three.js 是一个轻量级库，用于显示复杂的 3D 物体和动画。它利用 WebGL、SVG 和 CSS3D 渲染器来创建引人入胜的三维体验，可在各种浏览器和设备上运行。它是 JavaScript 社区的知名库，在 GitHub 上拥有超过 85k 个星级。

9. ScrollReveal

地址：scrollrevealjs.org/

通过 ScrollReveal 库，您可以轻松地为进入或离开浏览器视口的 DOM 元素制作动画。它提供各种类型的优雅特效，可在多个浏览器中滚动时显示或隐藏元素。ScrollReveal 库也非常易于使用，在 GitHub 上的依赖性为零，拥有超过 2100 个星级用户。

10. Barba.js

地址：barba.js.org/

让网站出类拔萃的一种创造性方法是，在用户浏览网页时，在网页之间添加生动的过渡效果。这比简单地显示新网页或重新加载浏览器能带来更好的用户体验。

这就是 Barba.js 为何如此有用的原因；该库可让网站像单页面应用程序（SPA）一样运行，从而创建令人愉悦的页面转换。它能减少页面之间的延迟，最大限度地减少浏览器的 HTTP 请求次数。它在 GitHub 上获得了将近 11k颗星。

11. Mo.js

地址：barba.js.org/

它提供了简单的声明式 API，可轻松创建流畅的动画和特效，在各种屏幕尺寸的设备上都能呈现出完美的效果。您可以移动 HTML 或 SVG DOM 元素，也可以创建一个特殊的 Mo.js 对象，该对象具有一系列独特的功能。它是一个可靠且经过充分测试的库，在 GitHub 上已编写了 1500 多个测试，拥有 1700 多颗星。