13个强大的 JavaScript 动画库，帮助你提升用户体验

动画，是吸引你客户注意的好方法之一。

在项目开发中，我们可以通过创造有趣的动画来为我们的项目增加视觉感与用户体验，同时，也为我们的网站增添了独特的美感，而且还提高了用户参与度并创造了令人难忘的第一印象。

因此，今天这篇文章，我将整理了10个有趣又有用的 JavaScript 动画库，从而帮助你快速创建动画，其中包括， 滚动动画、手写动画、SPA页面过渡、打字动画、彩色动画、SVG动画……它们的功能实用而简单。

那么，我们现在开始吧。

正文

Anime.js

地址：https://animejs.com/

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

它是一个轻量级的 JavaScript 动画库，具有简单的 API，可用于对 CSS 属性、SVG、DOM 属性和 JavaScript 对象进行动画处理。

使用 Anime.js，我们可以播放、暂停、重新启动或反转动画。该库还提供了令人惊叹的功能，可以通过以下和重叠的操作对多个元素进行动画处理。该库还包含各种与动画相关的事件，我们可以使用回调和承诺来监听这些事件。

Lottie

地址：https://airbnb.io/lottie/

Lottie 是一个库，它可以解析使用 Bodymovin 插件以 JSON 格式导出的 Adobe After Effects 动画，并在移动和 Web 应用程序上本地渲染它们。

这样用户就无需手动重新创建由专业设计师在 After Effects 中创建的高级动画。仅 Web 版本在 GitHub 上就有超过 27,000 颗星。

Velocity

地址：http://velocityjs.org/

使用 Velocity，您可以创建彩色动画、变换、循环、缓动、SVG 动画等。它使用 $.animate() 与 jQuery 库中的方法相同的 API，并且可以与 jQuery 集成（如果可用）。

该库提供渐变、滚动和滑动效果。除了能够控制动画的持续时间和延迟之外，我们还可以在动画完成后的某个时刻反转动画，或者在动画进行过程中完全停止动画。

该库在 GitHub 上拥有超过 17k 颗星，是 Anime.js 的理想替代品。

Rough Notation

地址：https://roughnotation.com/

Rough Notation 是一个 JavaScript 库，用于在网页上创建彩色注释并为其设置动画。它使用 RoughJS 创建手绘的外观和感觉。

我们可以创建多种注释样式，包括下划线、方框、圆形、突出显示、删除线等，并控制每种注释样式的持续时间和颜色。

Popmotion

地址：https://popmotion.io/

Popmotion 是一个强大的库，用于创建引人注目的动画。为什么不一样呢？— Popmotion 不会假定您想要设置动画的对象的属性，而是提供可在任何 JavaScript 环境中使用的简单、可组合的函数。

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

Vivus

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

Vivus 是一个 JavaScript 库，允许您对 SVG 进行动画处理，使它们看起来像是正在绘制的。它快速、轻量级、完全独立于工具，并提供三种不同的 SVG 动画方法：它提供三种不同的 SVG 动画方法：延迟、同步和一对一。

我们还可以使用自定义脚本以您喜欢的方式绘制 SVG。

Vivus 还允许您自定义持续时间、延迟、计时功能和其他动画设置。

查看 Vivus Instant 以获取现场实践示例。

GSAP：Green Stocking Animation Platform

地址：https://greensock.com/

GreenSock 动画平台 (GSAP) 是一个库，可让我们创建适用于所有主要浏览器的精彩动画。您可以在 React、Vue、WebGL 和 HTML 画布中使用它来对颜色、字符串、运动路径等进行动画处理。

它还附带了 ScrollTrigger 插件，让您只需几行代码即可创建令人印象深刻的基于滚动的动画。

GSAP 是一款通用且流行的工具，在超过 1100 万个网站上使用，在 GitHub 上拥有超过 15K 个“星星”。您可以使用 GreenSock 的 GSDevTools 轻松调试使用 GSAP 创建的动画。

React Spring

地址：https://www.react-spring.dev/

React Spring 是一个现代的 JavaScript 库，用于在 React 环境中创建自然动画。通过模拟物理弹簧的行为，它允许开发者制作平滑、逼真的动画效果。React Spring 旨在简化动画的创建过程，同时提供高度的灵活性和性能。

该库支持从简单的属性动画到复杂的交互式和基于路径的动画，适用于 Web 和 React Native 应用。无论是颜色、滚动位置、SVG 路径还是任何可动画化的属性，React Spring 都能处理得游刃有余。

React Spring 还特别强调声明式动画的编写方式，这意味着你可以用声明状态的方式来指定动画的起始点和终点，库会自动处理中间的过渡动画。这种方式使得动画逻辑更加直观，同时也更易于集成和维护。

此外，React Spring 提供了 Hooks API，让在函数组件中使用动画变得非常简单和直观。通过使用如 useSpring 或 useTransition 等 Hooks，你可以轻松地为组件添加动画效果，无需担心复杂的生命周期管理。

React Spring 广泛应用于创建响应式的交互界面，使得用户界面元素以吸引人的方式响应用户输入。它在 GitHub 上拥有众多的star，证明了其受欢迎程度和社区的支持。开发者社区活跃，提供了大量的资源和示例，帮助新手快速上手。

总的来说，React Spring 是一个强大而灵活的库，用于在 React 应用中创建自然和优雅的动画。它通过模拟物理原理，提供了一种简单而直观的方式来增强应用的视觉吸引力和用户体验。

Three.js

地址：https://trijs.org/

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

ScrollReveal

地址：https://scrollrevealjs.org/

ScrollReveal 库允许您轻松地为进入或离开浏览器视口的 DOM 元素设置动画。它提供了各种类型的优雅效果，可以在多个浏览器中滚动时显示或隐藏元素。

ScrollReveal 库也非常易于使用，对 GitHub 的依赖为零，并且拥有超过 2100 名加星用户。

Barba.js

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

让您的网站脱颖而出的一种创造性方法是在用户浏览时在网页之间添加生动的过渡。与简单地显示新网页或重新加载浏览器相比，这会带来更好的用户体验。

这就是 Barba.js 如此有用的原因；该库让网站像单页应用程序 (SPA) 一样运行，从而创建令人愉悦的页面转换。

它减少了页面之间的延迟，并最大限度地减少了浏览器发出的 HTTP 请求的数量。它在 GitHub 上有近 11,000 颗星。

Mo.js

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

它提供了一个简单的声明式 API，可以轻松创建在所有屏幕尺寸的设备上看起来都很棒的流畅动画和特效。

您可以移动 HTML 或 SVG DOM 元素，也可以创建具有一组独特功能的特殊 Mo.js 对象。

它是一个可靠且经过充分测试的库，已编写了 1500 多个测试，在 GitHub 上拥有超过 1700 颗星。

Typed.js

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

它的名字说明了一切：一个动画打字库。

它可以逐个字符地输入特定的字符串，就像有人正在实时打字一样，允许您暂停打字速度，甚至暂停打字特定的时间。

使用智能退格键，它允许您键入以与当前字符相同的字符集开头的连续字符串，而无需退格整个前一个字符串 - 就像我们在上面的演示中看到的那样。

此外，它还支持批量输入，即同时在屏幕上输入一组字符，而不是一个接一个地输入。Typed.js 在 GitHub 上拥有超过 12K 颗星，并受到 Slack 和 Envato 的信任。

总结

作为开发人员，利用这些工具无疑将增强您的项目，并使其在竞争日益激烈的数字环境中脱颖而出。