动画可以大大改善用户体验。网页上有许多元素都可以用动画来使其生动起来。像按钮的背景颜色或网页上某些元素的边框半径这样的基本东西也可以用CSS来做动画。
然而，CSS有它的局限性，需要使用JavaScript来创建一些对你所制作的元素的各个方面有更多控制的应用。在这篇文章中，作者将介绍八个最好的免费和开源的JavaScript动画库。
Mo.js
Mo.js是一个优秀的库，可以为你的网站添加基于JavaScript的动态图形。它的速度非常快，能产生流畅的动画，在各种设备上看起来都很好。它是模块化的，所以如果你只想使用特定的组件，你可以避免额外的开销。
该库有一个声明式的API，用于为你创建的组件设置不同的属性值。它有四个不同的内置模块，叫做Html、Shape、ShapeSwirl和Burst。爆裂和漩涡可以创造性地用于各种用户与你网站上的元素的互动。
试着在上面的CodePen中点击任何地方，你就会看到有一个漂亮的圆形和星星的特效。这是由LegoMushroom使用mo.js中的Burst和Shape模块创建的。
mo.js的文档中提供了很多这样有趣的例子，可以帮助你学习这个库的各个方面。
Anime
Anime是GitHub上最受欢迎的动画库之一。它非常轻量级，并且带有简单易学的API。该库可用于为CSS属性、SVG和DOM属性制作动画。
它让你对元素的动画方式有很多控制。你可以控制事物移动的速度、方向和顺序。在你选择暂停、重启或逆转动画的时候，都有选项。
该库还对SVG动画有很好的支持。你可以在两个不同的SVG形状之间创建一个平滑的变形效果，或者创建一个线描动画。
试着点击上面CodePen中的Write the Name按钮，你会看到我的名字的字母一个一个地被动画化。这个演示是关于动漫的系列教程的一部分。你可以查看它们来了解更多关于这个库的信息。
Popmotion
Popmotion是另一个轻量级和流行的动画库。你可以用它来制作数字、颜色和复杂字符串的动画。该库的主要动画功能只有5kb左右，整个库的容量在12kb左右。
你可以用它来创建两种动画：关键帧和弹簧。你可以为关键帧动画提供一个起止点，以及其他一些东西。弹簧动画具有像刚度、阻尼、质量和速度这样的属性，使动画具有更自然的运动。该库还带有许多实用函数，如angle,clamp,distance 和snap 等，以用于计算。
在上面的CodePen演示中，Arden的标记动画是使用Popmotion库制作的。
ScrollReveal
当你想在元素滚入或滚出视口时为其制作动画时，ScrollReveal库就很方便。
有很多选项可用于为元素制作动画。你可以通过延迟、持续时间和间隔属性来控制动画的进度。还有一些选项可以控制你所显示的对象的旋转、缩放和移动。该库还带有回调功能，可用于确定在一个元素被揭示之前或之后发生的事情。
上述由Sava Lazic制作的CodePen演示使用ScrollReveal库创建了一个视觉上有吸引力的垂直时间线。你可以制作类似的东西来展示你网站上的产品或项目。
Vivus
Vivus是一个惊人的基于JavaScript的动画库，它被创建为专门为SVG制作动画。它是非常轻量级的，没有任何依赖性。
Vivus为你提供了三种不同的方法来使SVG中的路径产生动画。你可以一次给所有的线条做动画，也可以延迟或一个接一个地做。在设置动画的时间时，它也给你很大的灵活性。
对于Vivus，你应该记住的几件事是，它总是按照元素在SVG中的定义顺序来制作动画。另外，你想做动画的元素应该有一个描边而不是填充。
在上面的CodePen演示中，由Alex Nelson制作的漂亮的SVG路径动画，只用了六行代码和Vivus的一些帮助。
Typed.js
从Typed.js这个名字你可以猜到，这个动画库是用来输入文字的。你可以把你想输入的所有字符串作为一个数组来传递。这个库还实现了一个对SEO更友好的方法，你想用打字做动画的文本可以从网页上的一个HTMLdiv 读取。
打字动画的行为可以在一堆参数的帮助下进行微调。这包括打字速度、后退速度、开始延迟、后退延迟和循环计数等。你也可以定义一堆回调函数，在不同的事件中被触发，比如打出一个字符串后。
上面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动画库是没有意义的。
