2020 年 10 多个最佳 JavaScript 动画库推荐

AWS 安全直播！

如果您想吸引网站访客的注意力，还有什么比动画更有效的呢？利用网络上众多免费的动画引擎，您可以轻松地让网站元素呈现淡入淡出、弹跳或嗖嗖等效果。在今天的文章中，我们将探讨 JavaScript 动画库如何帮助您实现这些效果。

首先，简单介绍一下JavaScript动画。

添加只需要一个操作的简单动画（例如切换）是一回事，对于这类动画，你总是可以使用简单的 CSS 动画。但是，对于更复杂或更高级的效果，JavaScript 是更好的选择。毋庸置疑，使用 JavaScript 创建动画比使用 CSS 更具挑战性。

然而，JavaScript 可以处理 CSS 无法处理的事情。这赋予了开发者更大的能力来控制需要协调多个运动部件的复杂动画。

JavaScript 动画是通过逐步改变元素的样式来实现的。你可以直接在代码中添加动画，也可以将它们包含在其他对象中。渲染时，这些样式变化会由定时器触发。此外，你还可以通过调整样式变化的时间间隔来控制动画的连续性。

最佳 JavaScript 动画库

这里列出了一些 JavaScript 动画库，你可以使用它们为你的网站添加一些炫酷的动画效果：

1. Anime.js

让我们从 Anime.js 开始介绍 JavaScript 动画库。这个轻量级的动画库在GitHub上拥有超过 3.5 万颗星。它使用一个强大的 API，可以对 HTML、CSS、JS、SVG 和 DOM 属性进行动画处理。凭借内置的交错系统，创建涟漪、定向运动、跟随和重叠效果变得非常简单。该系统既可以应用于时间轴，也可以应用于属性。

利用内置的回调和控制函数，您可以实现很多功能。例如，您可以同步播放、暂停、控制、倒放和触发事件。要了解此库的更多功能，您可以访问 Codepen。

2. Velocity.js

Velocity.js 融合了 jQuery 和 CSS 过渡效果的优势。它在 GitHub 上拥有近 17K 个 star，并吸引了 WhatsApp 和Mailchimp等知名用户。循环、反转、延迟、隐藏/显示元素、属性运算（+、-、*、/）以及硬件加速等功能都包含在其功能之中。

你可以使用 Velocity.js 来滚动浏览器窗口。它既可以与浏览器中加载的 jQuery 一起使用，也可以独立于 jQuery 工作，甚至可以撤销之前的动画。

3.流行运动

Popmotion 是一款功能强大的动画库，适用于任何 JavaScript 环境，拥有近18K 个星标。它几乎可以与任何接受数字作为输入的 API 配合使用，例如React、Three.js、A-Frame 和 PixiJS。

Popmotion 体积仅 11.7kB，但功能却十分强大。它包含关键帧、衰减、用于同步多个实例的时间轴等动画功能。您可以错开任意一系列动画或函数，还可以使用纯函数来编写自己的配置。

4. Three.js

Three.js在 GitHub 上拥有超过 6 万颗星，位居 JavaScript 动画库榜首。它依赖WebGL在浏览器中创建和渲染 3D 动画。

这里有大量的文档可以帮助你，一旦你克服了学习曲线，几乎没有什么事情是你用这个库做不到的。首先，使用 Three.js 编辑器创建一个场景。之后，你可以添加几何图形，调整光照和摄像机。材质、纹理、物体、颜色和雾效都可以进行微调，最终文件可以发布到你的项目中。

5. GreenSock JS

GreenSock 的 GSAP 使用一组小型 JavaScript 文件，使动画在所有主流浏览器中都能呈现出色的效果。它能够流畅地串联多个动画属性，并消除浏览器错误。

GSAP 的功能包括在 Canvas 上创建动画，以及为场景中的任何对象添加动画效果。此外，它还可以逐步显示、变形或沿路径移动任何对象。为此，它可与 SVGPlugins、PixiPlugin、WebGL、Adobe Animate 和 EaseJS 等众多软件应用程序配合使用。其模块化结构可帮助您仅选择所需的功能。这款强大的库在GitHub上拥有 800 万用户和超过 1 万颗星，优势显著。

6. AniJS

在这份 JavaScript 库列表中，AniJS 显得有些独特。它允许你以类似句子的结构为元素添加动画，这对于动画新手来说非常友好。此外，它通用的特性使得几乎所有人都能在日常 UX 设计中使用它。

AniJS在GitHub上获得了超过 3500 个星标。它不依赖任何第三方库，通常有助于加快开发速度。它在 Android 和 iOS 以及所有主流浏览器中都能完美运行。

7. Mo.js

动态图形在动画制作中扮演着重要角色，而 Mo.js 就是一个能让你大放异彩的选择。凭借大量的教程和演示，即使是初学者也能轻松创建几何图形并实现精确到秒的动画效果。

这些 API 看似简单，但功能却非常强大。工具包中包含曲线编辑器和时间轴编辑器，可帮助您构建动画，以及用于控制动画的播放器。此外，还有用于交错、缓动、时间轴等功能的各种模块。凭借这些优势，Mo.js 在GitHub上获得了近 1.6 万颗星。

8. Vivus.js

如果你想在屏幕上实时模拟钢笔绘画的效果，Vivus 正是你的理想之选。它能让你为 SVG 动画添加逼真的手绘效果。由于它没有任何依赖项，因此速度快、体积小。

您可以选择任何可用的动画效果——延迟、同步或逐行。此外，您还可以创建自定义脚本来绘制 SVG。为了获得更大的灵活性，您可以使用简单的 JavaScript 函数来覆盖每个路径的动画。超过 13,000 名用户在 GitHub 上为该库点赞。

9. ScrollReveal JS

如果您希望网页元素在滚动进入视图时呈现动画效果，ScrollReveal 绝对不会让您失望。这款易于学习的动画库没有任何依赖项，在GitHub上拥有超过 18.5 万颗星。

ScrollReveal 支持多种特效，并且完美兼容网页和移动浏览器。它采用精简配置，让您可以尽情挥洒创意。为了最大程度地发挥动画效果，开发者建议您谨慎使用。

10. Typed.js

Typed.js 是一个简单的库（更确切地说是一个插件），用于在屏幕上实现文字输入动画。输入任何字符串后，访客都可以以设定的速度观看文字输入过程。不仅如此，你还可以模拟退格键的操作，以及开始新句子。如果你希望禁用 JavaScript 的访客也能看到这些动画，只需在页面上放置一个 HTML div 元素即可。这样，机器人和搜索引擎也能看到输入的文字。

该库在GitHub上获得了超过 9500 个星标。其主要用户包括 Slack 和 Envato。

11. Airbnb上的Lottie

Lottie 是一种轻量级的动画图形格式，它在保证高质量图形的同时，也兼顾了渲染成本。它能有效减小应用程序体积，并包含动态功能。无需额外软件，即可用于 Web、Android、iOS 和物联网平台。

Lottie 可在任何支持 JavaScript 的浏览器上运行。动画以纯文本形式存储，易于阅读。由于文本数据采用 JSON 格式存储，因此可以轻松与任何 JavaScript 环境兼容。这使其成为增强移动前端的热门动画图形格式。仅 Android 版本在 GitHub 上就获得了近 3 万颗星。