免费开源的顶级 JavaScript 动画库

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

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

Mo.js

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

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

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

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

动漫

Anime 是 GitHub 上最受欢迎的动画库之一。它非常轻量级，并配有简单易学的 API。该库可用于对 CSS 属性、SVG 和 DOM 属性进行动画处理。

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

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

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

流行动作

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

您可以使用它来创建两种动画：关键帧和弹簧。您可以为关键帧动画提供起始点和结束点等。弹簧动画具有刚度、阻尼、质量和速度等属性，使您的动画具有更自然的运动。该库还附带了许多用于计算的实用函数，例如 angle、clamp、distance、snapp 等。

上述 gaougalos 的 CodePen 演示中的关键帧动画是使用 Popmotion 库制作的动画。

滚动显示

当您想要在元素滚动进或滚出视口时为其添加动画效果时，ScrollReveal 库会派上用场。

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

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

活着

Vivus 是一个令人惊叹的基于 JavaScript 的动画库，专为制作 SVG 动画而创建。它非常轻量级并且没有依赖项。

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

使用 Vivus 时您应该记住的一些事情是，它始终按照 SVG 中定义的顺序对元素进行动画处理。另外，您想要设置动画的元素应该有描边而不是填充。

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

Typed.js

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

可以借助一系列参数来微调打字动画的行为。这包括打字速度、退格速度、开始延迟、后退延迟、循环计数等。您还可以定义一堆在不同事件（例如键入字符串后）触发的回调函数。

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

ProgressBar.js

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

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

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

洛蒂

Airbnb 的 Lottie 是一个与我们迄今为止讨论过的其他动画库不同的动画库。它解析由 Adob​​e After Effects 创建的动画，这些动画已使用 Bodymovin 导出为 JSON。之后您可以直接在网页上渲染这些效果。

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

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

最终想法

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

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

以上是免费开源的顶级 JavaScript 动画库的详细内容。更多信息请关注PHP中文网其他相关文章！