本文为翻译作品，原文链接：10 powerful JavaScript animation libraries for engaging user experiences
动画是让你的应用从众多网站中脱引而出的绝佳方式。
通过创意物体运动和流畅的页面过渡，你不仅为你的网站增添了独特的审美吸引力，还提升了用户参与度，并创造了难忘的第一印象。
利用本文介绍的 12 个强大的 JavaScript 库，会使创建动画变得前所未有的简单。滚动动画、手写动画、SPA 页面过渡、打字动画、颜色动画、SVG 动画……它们的能力无穷无尽，几乎覆盖你可能遇到的大部分开发场景。
1. Anime.js
在 GitHub 上拥有超过 43k 星的 Anime.js，已经成为最受欢迎的动画库之一。
它是一个轻量级的 JavaScript 动画库，拥有简单的 API，可用于动画化 CSS 属性、SVG、DOM 属性和 JavaScript 对象。使用 Anime.js，你可以播放、暂停、重启或反转动画。该库还提供了用于多元素跟随动画和重叠动作的惊人功能。还包括各种与动画相关的事件，我们可以使用回调和 Promises 来监听这些事件。
2. Lottie
Lottie 解析使用 Bodymovin 插件导出为 JSON 的 Adobe After Effects 动画，并在移动和 Web 应用程序上本地渲染它们。这消除了手动重新创建专业设计师在 After Effects 中创建的高级动画的需求。仅 Web 版本在 GitHub 上就拥有超过 27k 星。
3. Velocity
使用 Velocity，你可以创建颜色动画、变换、循环、缓动、SVG 动画等。它使用与 jQuery 库的
$.animate() 方法相同的 API，并且如果 jQuery 可用，它可以与 jQuery 集成。该库提供淡入淡出、滚动和滑动效果。除了能够控制动画的持续时间和延迟外，你还可以在动画完成一段时间后反转它，或者在动画进行中时完全停止它。它在 GitHub 上拥有超过 17k 星，是 Anime.js 的一个好的替代品。
访问 Velocity 网站
4. Rough Notation
Rough Notation 是一个 JavaScript 库，用于在网页上创建和动画化多彩的注释。它使用 RoughJS 创建手绘风格的外观。你可以创建多种注释样式，包括下划线、方框、圆圈、高亮、删除线等，并控制每种注释样式的持续时间和颜色。
5. Popmotion
Popmotion 是一个用于创建突出和引人注目的动画的函数式库。它的特别之处在哪里？- 它对你打算动画化的对象属性没有任何假设，而是提供简单、可组合的函数，可以在任何 JavaScript 环境中使用。
该库支持对数字、颜色和复杂字符串的关键帧、弹簧和惯性动画。它经过良好的测试，积极维护，并在 GitHub 上拥有超过 19k 星。
6. Vivus
Vivus 是一个 JavaScript 库，允许你动画化 SVG，使它们看起来像是被绘制的。它快速且轻量，完全没有依赖，并提供三种不同的方式来动画化 SVG：延迟（Delayed）、同步（Sync）和逐个（OneByOne）。你还可以使用自定义脚本按你喜欢的方式绘制 SVG。
Vivus 还允许你自定义持续时间、延迟、时间函数和其他动画设置。查看 Vivus Instant 获取示例。
7. GreenSock Animation Platform (GSAP)
GreenSock 动画平台（GSAP）是一个库，让你可以创建在所有主要浏览器上都能工作的精彩动画。你可以在 React、Vue、WebGL 和 HTML canvas 中使用它来动画化颜色、字符串、运动路径等。它还附带一个 ScrollTrigger 插件，让你可以用很少的代码创建令人印象深刻的基于滚动的动画。
它在超过 1100 万个网站中使用，GitHub 上拥有超过 15k 星，确实是一个多才多艺且受欢迎的库。你可以使用 GreenSock 的 GSDevTools 轻松调试使用 GSAP 创建的动画。
8. Three.js
Three.js 是一个轻量级库，用于显示复杂的 3D 对象和动画。它利用 WebGL、SVG 和 CSS3D 渲染器创建引人入胜的三维体验，这些体验在广泛的浏览器和设备上都能工作。在 JavaScript 社区中，它是一个众所周知的库，GitHub 上拥有超过 85k 星。
9. ScrollReveal
ScrollReveal 库让你可以轻松地动画化 DOM 元素，当它进入或离开浏览器视口时。它提供了多种类型的优雅效果，以在滚动时在多个浏览器中显示或隐藏元素。而且使用起来也相当容易，没有任何依赖，GitHub 上拥有超过 21k 星。
10. Barba.js
让您的网站脱颖而出的一个创意方法是，在用户进行页面间导航时添加生动的过渡效果。这比简单地显示新网页或重新加载浏览器提供了更好的用户体验。
这就是为什么 Barba.js 如此有用；这个库让您通过使网站运行得像一个单页应用程序（SPA）来创建愉快的页面过渡。它减少了页面之间的延迟，并最小化了浏览器发出的 HTTP 请求数量。它在 GitHub 上获得了近 11k 星。
11. Mo.js
这是创建引人入胜的动态图形的绝佳库。
它提供简单、声明式的 API，轻松创建在各种屏幕尺寸的设备上看起来很棒的平滑动画和效果。您可以移动 HTML 或 SVG DOM 元素，或者您可以创建一个特殊的 Mo.js 对象，该对象带有一套独特的能力。这是一个可靠且经过良好测试的库，编写了超过 1500 个测试，并在 GitHub 上获得了超过 17k 星。
12. Typed.js
顾名思义；一个动画打字库。
它逐个字符地打出一个特定的字符串，就像有人在实时打字一样，允许您暂停打字速度，甚至可以暂停打字一定的时间。通过智能退格，它打出连续的字符串，从与当前字符串相同的一组字符开始，而不是退格整个前一个字符串——正如我们在上面的演示中看到的。
还包括对批量打字的支持，它同时在屏幕上打出一组字符，而不是一个接一个。Typed.js 在 GitHub 上有超过 12k 星，受到 Slack 和 Envato 的信任。
最后的思考
随着新技术和库的出现而不断发展，JavaScript 动画的能力也越来越强大。本文中突出的动画库提供了一系列功能，用于为用户创建引人入胜、互动性强和视觉上吸引人的体验。它们证明了 JavaScript 的强大和灵活性。
作为开发者，利用这些工具无疑能轻松优化你的项目，使它们在日益竞争激烈的竞争中脱颖而出。
