8个流行的免费和开源的JavaScript动画库

目录
文章目录隐藏
  1. Mo.js
  2. Anime
  3. Popmotion
  4. ScrollReveal
  5. Vivus
  6. Typed.js
  7. ProgressBar.js
  8. Lottie
  9. 最后的思考

8 个流行的免费和开源的 JavaScript 动画库

动画可以大大改善用户体验。网页上有许多元素都可以用动画来使其生动起来。像按钮的背景颜色或网页上某些元素的边框半径这样的基本东西也可以用 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,distancesnap 等,以用于计算。

在上面的 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 动画库是没有意义的。

「点点赞赏,手留余香」

0

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » 8个流行的免费和开源的JavaScript动画库

发表回复