免费好用和开源JavaScript动画库推荐

如果使用得当，动画可以显着改善用户体验。webp时代有许多元素可以通过动画来使其活跃起来。按钮的背景颜色或网页上某些元素的边框半径等基本内容也可以使用css进行动画处理。

但是，CSS 有其局限性，如果您想更好地控制动画元素的各个方面，则需要使用 javascript。在本文中，我将向您展示 8 个最好的免费和开源 JavaScript 动画库，您可以在今天的项目中使用它们。

Mo.js

Mo.js是一个优秀的库，用于将基于 javaScript 的动态图形添加到您的网站。它速度非常快，并且可以生成在各种设备上看起来都很棒的流畅动画。它也是模块化的，因此如果您只想使用特定组件，则可以避免额外的开销。

该库有一个声明性api，用于为您创建的组件设置不同属性的值。它带有四个不同的内置模块，称为 html、Shape、ShapeSwirl 和 Burst。爆发和漩涡可以创造性地用于各种用户与您网站上的元素的交互。

尝试单击上面 CodePen 中的任意位置，您将看到一个漂亮的小圆圈和星星。它是由LegoMushroom使用 mo.js 中的 Burst and Shape 模块创建的。

mo.js的文档提供了很多这样有趣的示例，可以帮助您了解该库的各个方面。

Anime

Anime是 GitHub 上最受欢迎的动画库之一。它非常轻量级，并带有一个简单易学的 API。该库可用于动画 CSS 属性、svg和dom属性。

它使您可以对元素的动画方式进行大量控制。您可以控制物体移动的速度、方向和顺序。您可以随时选择暂停、重新启动或反转动画。

该库还对 SVG 动画提供了不错的支持。您可以在两个不同的 SVG 形状之间创建平滑的变形效果或创建画线动画。

尝试单击上面 CodePen 中的Write the Name按钮，您将看到我的名字的字母一次动画一个。这个演示是关于动漫的一系列教程的一部分。您可以查看它们以了解有关该库的更多信息。

Popmotion

Popmotion是另一个轻量级且流行的动画库。您可以使用它为数字、颜色和复杂的字符串设置动画。库中的主要动画函数只有 5kb 左右，整个库大约 12kb。

您可以使用它来创建两种动画：关键帧和弹簧。您可以为关键帧动画提供起点和终点，等等。弹簧动画带有刚度、阻尼、质量和速度等属性，可让您的动画更自然地运动。该库还带有许多用于计算的实用函数，例如angle, clamp, distance,snap等。上面 gaougalos 的 CodePen 演示中的关键帧动画是使用 Popmotion 库制作的。

ScrollReveal

ScrollReveal库在您想要在元素滚动进出视口时为其设置动画时派上用场。

有很多选项可用于为元素设置动画。您可以使用延迟、持续时间和间隔属性来控制动画的进度。还有一些选项可以控制您正在展示的对象的旋转、缩放和移动。该库还带有回调，可用于确定元素显示之前或之后发生的情况。

Sava Lazic的上述 CodePen 演示使用 ScrollReveal 库创建了一个视觉上吸引人的垂直时间线。您可以创建类似于在您的网站上展示产品或项目的内容。

Vivus

Vivus是一个了不起的基于 JavaScript 的动画库，专为 SVG 制作动画。它非常轻量级，没有依赖关系。

Vivus 为您提供了三种不同的方式来为 SVG 中的路径设置动画。您可以一次为所有线条设置动画，有延迟，或者一个接一个。在设置动画的时间时，它还为您提供了很大的灵活性。

对于 Vivus，您应该记住的几件事是，它始终按照元素在 SVG 中定义的顺序为元素设置动画。此外，您要制作动画的元素应该有笔触而不是填充。

上面Alex Nelson的 CodePen 演示中的 SVG 路径的漂亮动画是用六行代码和 Vivus 的一些帮助创建的。

Typed.js

你可以从Typed.js这个名字猜到这个动画库是用来输入文本的。您可以将要键入的所有字符串作为数组传递。该库还实现了一种对 SEO 更友好的方法，其中可以从div网页上的 HTML 中读取您想要通过键入进行动画处理的文本。

打字动画的行为可以在一堆参数的帮助下进行微调。这包括输入速度、退格速度、启动延迟、返回延迟、循环计数等。您还可以定义一堆回调函数，这些函数在不同的事件触发，例如在输入字符串后。

上面Conner的 CodePen说明了我们如何使用这个库来让枯燥的 404 错误页面变得有趣。

ProgressBar.js

向任何需要一些时间才能完成的过程添加进度条是一个好主意。这让用户知道任务的进展速度。例如，您可以在在线图像编辑器中显示进度条，让用户知道页面不仅卡住了，而且实际上正在后台处理图像。

ProgressBar.js库使开发人员可以非常轻松地向他们的网站添加时尚的进度条。除了使用一些内置形状（如直线、圆形或半圆形）创建进度条外，您还可以选择使用自己的自定义形状。这开辟了许多有趣的可能性。

正如您在上面的演示中所看到的，我们可以在进度条中为各种属性设置动画。您可以查看此介绍性 ProgressBar.js 教程以了解有关该库的更多信息。

Lottie

Airbnb 的 Lottie是一个动画库，到目前为止我们还没有讨论过其他动画库。它解析由adobe After Effects 创建的动画，这些动画已使用 Bodymovin 导出为 JSON。之后，您可以直接在您的网页上渲染这些效果。

该库的 GitHub 页面详细解释了安装过程及其工作原理。有许多全局方法可供您控制动画进度。您可以轻松启动、停止和反转动画方向。

您只需要编写几行代码即可加载所需的 JSON 文件并使用一些参数初始化动画。kittons 的上述 CodePen 演示是一个很好的示例，它展示了如何在浏览器中轻松渲染 After Effects 动画。

最后的想法

在本文中，我们研究了八个流行的免费和开源 JavaScript 动画库。他们每个人都做了一些不同的事情，并针对网络动画的不同方面。使用这些库，您将能够为您网站上的几乎所有内容制作动画。我希望您使用这些库来创建一个让您在竞争中脱颖而出的精美网站！只要确保你不要过度使用动画。

要记住的另一件事是，您仍然应该尝试将 CSS 用于简单动画。如果您只想在用户将鼠标悬停在元素上时更改元素的颜色，那么加载完整的 JavaScript 动画库没有多大意义。