在今天的文章中，我们将了解JavaScript动画库如何帮助实现这一切。首先，简单介绍一下JavaScript的动画添加只需要一个动作（例如，切换）的简单动画是一回事。为此，您始终可以使用简单的CSS动画。但是，对于更复杂或更高级的效果。JavaScript是一个更好的工具。不用说，使用JavaScript创建动画比使用CSS更具挑战性。然而，JavaScript可以做CSS做不到的事情。这使开发人员能够更好地处理需要协调多个移动部件的复杂动画。JavaScript动画是通过向元素的样式添加渐变来实现的。您可以将它们作为代码的一部分在线添加，或将它们包含在其他对象中。在渲染时，这些更改由计时器调用。另外，可以通过调整变化的时间间隔来控制动画的连续性。1.Anime.js让我们从Anime.js开始这个JavaScript动画库列表。这个轻量级动画库在GitHub上拥有超过35K星。通过强大的API，您可以使用它来为HTML、CSS、JS、SVG和DOM属性设置动画。借助内置的交错系统，它可以轻松创建波纹、定向移动、跟随和重叠效果。该系统在时间和属性方面均可用。您可以使用内置回调和控制函数做很多事情。例如，您可以同步播放、暂停、控制、反转和触发事件。2.Velocity.jsVelocity.js结合了jQuery和CSStransitions的优点。它的评分接近17,000颗星，在GitHub上拥有接近17,000颗星，并且拥有WhatsApp和摩托罗拉等知名用户。邮件黑猩猩。循环、反转、延迟、隐藏/显示元素、属性数学（+、-、*、/）和硬件加速都是其功能的一部分。您可以使用Velocity.js滚动浏览器窗口。它与浏览器中加载的jQuery一起工作，独立于它，甚至可以撤消以前的动画效果。3.Popmotion在近18Kstar中，Popmotion是一个适用于任何JavaScript环境的函数式动画库。它适用于几乎所有接受数字输入的API，例如React、Three.js、A-Frame和PixiJS。Popmotion的重量仅为11.7kB，但功能强大。它具有关键帧、衰减、用于同步多个实例的时间轴等动画。您可以错开任何系列的动画或函数，或使用纯函数来组合您自己的配置。4.Three.jsThree.js在这个JavaScript动画库列表中排名第一，拥有60K+stars。它依靠WebGL在浏览器中创建和渲染3D动画。有大量的文档可以帮助您解决问题，一旦您通过了学习曲线，就没有什么是您无法使用这个库完成的。首先，使用Three.js编辑器，您可以创建一个场景。之后，您可以添加几何图形，调整灯光和相机。材质、纹理、对象、颜色和雾都可以调整，最终文件可以发布到您的项目中。5.GreenSockJSGreenSock的GSAP与一组小的JavaScript文件一起工作，使动画在所有主要浏览器中看起来都不错。它平滑地将多个动画属性链接在一起并消除了浏览器错误。GSAP操作包括在Canvas上创建动画，以及为场景中的任何对象设置动画。您还可以沿着路径步进、变形或移动任何对象。为此，它与一系列软件应用程序一起工作，例如SVGPlugins、PixiPlugin、WebGL、AdobeAnimate和EaseJS。其模块化结构可帮助您选择所需的功能。在GitHub上拥有800万用户和超过10000颗星，这个功能强大的库大有可为。6.AniJS在此列表中的JavaScript库中，AniJS有点独特。它允许您以简单的“句子”结构为元素设置动画，这对于动画新手来说非常有用。更重要的是，它的非特定性使得几乎每个人都可以在日常UX设计中使用它。在GitHub上，AniJS拥有超过3500颗星。它不依赖任何第三方库，通常有助于加快开发速度。它适用于Android和iOS。Android和iOS，也适用于所有流行的浏览器。7.Mo.js动态图形在动画中扮演着重要的角色，Mo.js是一个可以让你产生影响的选项。得益于大量教程和演示的帮助，初学者可能不会发现创建几何和时间动画有困难。这些API可能看起来很简单，但您可以用它们做很多事情。在此工具包中，您会找到一个曲线编辑器和时间轴编辑器来帮助您构建动画，以及一个播放器来控制您的动画。有不同的模块用于交错、缓动、时间线等。所有这一切为Mo.js赢得了将近16,000颗星。8.Vivus.js如果你想在屏幕上实时模仿钢笔绘图，你可以使用Vivus。它可以让您为SVG设置动画，让它有被绘制的感觉。由于它没有任何依赖性，因此速度快且轻量级。您可以选择任何可用的动画-延迟、同步或逐个动画。否则，您还可以创建自定义脚本来绘制SVG。为了增加灵活性，您可以使用简单的JavaScript函数覆盖每个路径的动画。超过13,000名用户为这个图书馆点赞。9.ScrollRevealJS如果你曾经想在网页元素滚动到视图时设置动画，ScrollReveal不会让你失望。这个简单易学的动画库没有依赖项，在GitHub上有18.5K+stars。ScrollReveal支持不同类型的效果，并且在网络和移动浏览器上运行良好。它有意使用裸配置，因此您可以将它用作发挥创造力的画布。为了最大限度地发挥动画效果，主创们建议大家谨慎使用。10.Typed.jsTyped.js是一个简单的库（更像是一个插件，真的），用于在屏幕上动画打字。输入任何字符串后，访问者可以看到它正在以设定的速度输入。不仅如此，你还可以操作退格键，以及开始一个新的句子。如果您希望它对禁用JS的访问者可见，您只需要在页面上放置一个HTMLdiv。这也允许机器人和搜索引擎看到输入的文本。该库在GitHub上的评分为9.5K+星，强大的用户包括Slack和Envato。11.LottiebyAirBnBLottie是一种轻量级的动画图形格式，可在高质量图形与渲染成本之间取得平衡。它使应用程序更小并包含动态功能。它可用于Web、Android、iOS和IoT，无需额外的软件。Lottie可以在任何支持JavaScript的浏览器上运行。动画以纯文本形式存储并且是人类可读的。由于文本数据以JSON格式存储，因此很容易被任何JavaScript环境吸收。这使它成为动画图形的流行格式，以增强移动前端。仅安卓版就有近3万颗星。
