如果你想抓住你的注意力网站访问力，还有什么比动画更好的呢？使用 Web 上免费提供的许多应用程序引擎，您可以轻松淡入淡出、反弹或压缩网站元素。在今天的帖子中，我们将看到 JavaScript 动画库如何帮助解决所有这些问题。
首先，简单介绍一下 JavaScript 动画
添加只需要一个动作（例如，切换）的简单动画是一回事。为此，您始终可以使用简单的 CSS 动画。但是，对于更复杂或更高级的效果，JavaScript 是更好的工具。不用说，使用 JavaScript 创建动画比使用 CSS 更具挑战性。
但是，JavaScript 可以处理 CSS 无法处理的事情。这为开发人员提供了更多控制需要多个移动部件协调的复杂动画的能力。
JavaScript 动画是通过对元素的样式进行增量更改来实现的。您可以将它们内联添加为代码的一部分，或将它们包含在其他对象中。渲染时，这些更改将由计时器调用。另外，您可以通过调整变化的时间间隔来控制动画的连续性。
最好的 JavaScript 动画库
这是一个 JavaScript 动画库列表，您可以使用它们向您的网站添加一些非常棒的动画：
1 . Anime.js
让我们从 Anime.js 开始这个 JavaScript 动画库列表。这个轻量级动画库在 GitHub 上拥有超过 35,000 颗星。通过强大的 API 工作，您可以使用它为 HTML、CSS、JS、SVG 和 DOM 属性设置动画。借助内置的交错系统，它可以轻松创建波纹、定向运动、跟踪和重叠效果。该系统在时间和财产上都是可用的。
您可以使用内置回调和控制函数做很多事情。例如，您可以同步播放、暂停、控制、倒带和触发事件。要查看此库的其他功能，您可以访问 Codepen。
2. Velocity.js
速度。 js 结合了 jQuery 和 CSS 转换的最佳特性。它在 GitHub 上拥有近 17,000 颗星，并拥有 WhatsApp 和 Mailchimp 等知名用户。循环、反转、延迟、隐藏/显示元素、属性数学（+、-、*、/）和硬件加速是其中的一些功能。
您可以使用 Velocity.js 滚动浏览器窗口。它既可以与浏览器中加载的 jQuery 一起使用，也可以独立于它使用，甚至可以撤消以前的动画。
3. Popmotion
Popmotion是一个功能接近 18K stars 的库，可以在任何 JavaScript 环境中使用。它适用于几乎所有接受数字作为输入的 API，例如 React、Three.js、A-Frame 和 PixiJS。
Popmotion 的重量仅为 11.7kB，但仍然值得一提。它具有关键帧、衰减、同步多个实例的时间轴等动画。您可以错开任何系列的动画或功能，或使用纯功能来组成您自己的配置。
4.三.js
三. js 在 JavaScript 动画库中排名最高，在 GitHub 上有 60,000+ stars。在浏览器中创建和渲染 3D 动画取决于 WebGL。
有大量文档可以帮助您解决问题，一旦您沿着学习曲线走下去，使用这个库将无济于事。首先，使用 Three.js 编辑器创建一个场景。之后，您可以添加几何图形，调整照明和相机。可以调整材料、纹理、对象、颜色和雾，并将最终文件发布到您的项目中。
5. GreenSock JS
GreenSock的GSAP作品使用一小组 JavaScript 文件使动画在所有主流浏览器中看起来都很棒。它平滑地链接多个动画属性并消除浏览器错误。
GSAP 操作包括在 Canvas 上创建动画和为场景中的任何对象设置动画。也可以沿着路径逐渐显示、变形或移动任何对象。为此，它适用于许多软件应用程序，如 SVGPlugins、PixiPlugin、WebGL、Adobe Animate 和 EaseJS。其模块化结构可帮助您选择所需的功能。 GitHub 上拥有 800 万用户和 10,000 颗星，这个功能强大的库还有很大的发展空间。
6. AniJS
在JavaScript库中在这份名单上，AniJS 有点独特。它允许您以简单的“类似句子”的结构向元素添加动画，非常适合动画新手。此外，它的非特定性使得几乎每个人都可以在一般 UX 设计中使用它。
AniJS 在 GitHub 上拥有超过 3500 颗星。它不依赖任何第三方库，通常有助于加快开发速度。它同样适用于 Android 和 iOS，以及所有流行的浏览器。
7. Mo.js
动态图在动画中扮演着重要的角色，而 Mo.js 是一个可以有所作为的选择。有大量的教程和演示可以帮助您，初学者可能会发现很难用几何和时间为点制作动画。
这些API可能看起来很简单，但你可以做很多事情。在工具包中，您会找到一个曲线编辑器和一个时间轴编辑器来帮助您制作动画，以及一个控制动画的播放器。有用于隔行扫描、缓动、时间轴等的不同模块。所有这些都为 Mo.js 在 GitHub 上赢得了近 16,000 颗星。
8. Vivus.js
如果你想要在屏幕上实时模拟笔画，可以使用Vivus来达到目的。它允许您对 SVG 进行动画处理以给人一种被绘制的印象。它快速且轻便，因为它没有依赖性。
您可以选择任何可用的动画 – Delayed、Synchronized 或 OneByOne。或者，您可以创建自定义脚本来绘制 SVG。为了获得更大的灵活性，您可以使用简单的 JavaScript 函数覆盖每个路径的动画。超过 13,000 名用户使用了 GitHub 上的库。
9. ScrollReveal JS
如果你’如果您希望在 Web 元素滚动到视图时对其进行动画处理，ScrollReveal 不会让您失望。这个易于学习的动画库在 GitHub 上具有零依赖性和 18.5K+ 星数。
ScrollReveal 支持不同类型的效果，并且适用于网络和移动浏览器。它是有意设计的准系统，因此您可以将其用作创作的画布。为了充分利用动画，创作者建议谨慎使用它们。
10. Typed.js
打字。 js是一个简单的库（实际上是一个插件），可以在屏幕上显示动画。输入任意字符串后，访问者可以观看以设定速度输入的字符串。不仅如此，您还可以使用退格键以及开始新句子。如果您想让禁用 JS 的访问者也可以查看它，那么只需在页面上放置一个 HTML div 即可。这样，机器人和搜索引擎也可以看到输入的单词。
该库在 GitHub 上的评分为 9.5K+。高级用户包括 Slack 和 Envato。
11. Lottie by AirBnB
Lottie 是一种轻量级动画图形格式，可在高质量图形与渲染成本之间取得平衡。它使应用程序更小并包含动态功能。它可以用于 Web、Android、iOS 和 IoT，无需额外的软件。
Lottie 可以在任何支持 JavaScript 的浏览器上运行。动画以纯文本形式存储，易于阅读。由于文本数据以 JSON 格式存储，因此很容易与任何 JavaScript 环境兼容。这使它成为动画图形的流行格式，以增强移动前端。仅安卓版本在GitHub上就有近30000颗星。
如果您已经看完了 JavaScript 动画库列表，您可能还有兴趣寻找其他 JavaScript 库和框架。或者，查看这些最好的 React UI 组件库。
…
不要忘记参加我们的速成班，以加速您的 WordPress 网站。通过一些简单的修复，您甚至可以将加载时间减少 50-80%：
