12个强大的 JavaScript 动画库，可帮助你提升用户体验
动画，是吸引你客户注意的好方法之一。
在项目开发中，我们可以通过创造有趣的动画来为我们的项目增加视觉感与用户体验，同时，也为我们的网站增添了独特的美感，而且还提高了用户参与度并创造了令人难忘的第一印象。
因此，今天这篇文章，我将整理了有趣又有用的 JavaScript 动画库，从而帮助你快速创建动画，其中包括， 滚动动画、手写动画、SPA页面过渡、打字动画、彩色动画、SVG动画……它们的功能实用而简单。
那么，我们现在开始吧。
1.Anime.js
地址：https://animejs.com/
Anime.js 在 GitHub 上拥有超过 43,000 颗星，是最受欢迎的动画库之一。
它是一个轻量级的 JavaScript 动画库，具有简单的 API，可用于对 CSS 属性、SVG、DOM 属性和 JavaScript 对象进行动画处理。
使用 Anime.js，我们可以播放、暂停、重新启动或反转动画。该库还提供了令人惊叹的功能，可以通过以下和重叠的操作对多个元素进行动画处理。该库还包含各种与动画相关的事件，我们可以使用回调和承诺来监听这些事件。
2.Lottie
地址：https://airbnb.io/lottie/
Lottie 是一个库，它可以解析使用 Bodymovin 插件以 JSON 格式导出的 Adobe After Effects 动画，并在移动和 Web 应用程序上本地渲染它们。
这样用户就无需手动重新创建由专业设计师在 After Effects 中创建的高级动画。仅 Web 版本在 GitHub 上就有超过 27,000 颗星。
3. Velocity
地址：http://velocityjs.org/
使用 Velocity，您可以创建彩色动画、变换、循环、缓动、SVG 动画等。它使用 $.animate() 与 jQuery 库中的方法相同的 API，并且可以与 jQuery 集成（如果可用）。
该库提供渐变、滚动和滑动效果。除了能够控制动画的持续时间和延迟之外，我们还可以在动画完成后的某个时刻反转动画，或者在动画进行过程中完全停止动画。
该库在 GitHub 上拥有超过 17k 颗星，是 Anime.js 的理想替代品。
4.Rough Notation
地址：https://roughnotation.com/
Rough Notation 是一个 JavaScript 库，用于在网页上创建彩色注释并为其设置动画。它使用 RoughJS 创建手绘的外观和感觉。
我们可以创建多种注释样式，包括下划线、方框、圆形、突出显示、删除线等，并控制每种注释样式的持续时间和颜色。
5.Popmotion
地址：https://popmotion.io/
Popmotion 是一个强大的库，用于创建引人注目的动画。为什么不一样呢？— Popmotion 不会假定您想要设置动画的对象的属性，而是提供可在任何 JavaScript 环境中使用的简单、可组合的函数。
该库支持数字、颜色和复杂字符串的关键帧、弹簧和惯性动画。该库经过了良好的测试和积极维护，在 GitHub 上拥有超过 19,000 颗星。
将本文加入收藏夹
新闻详情
