有很多方法可以为网络上的事物设置动画。还有更多创建动画然后导出到网络动画的方法。

由于分工和使用图形编辑器的明显原因，在 AfterEffects 或 Animate CC（可以导入 Illustrator 和 Photoshop 文件）之类的东西中设计动画有巨大的好处。

话虽如此，您最终应该始终编译为以下内容之一：

有限的交互能力：

• 动图
• 雪碧
• 视频

更全面的互动：

• 帆布
• SVG
• CSS
• 基于 DOM 的动画
• WebGL

现在，我将更详细地介绍每一个。

动图

当动画不需要太多交互、不需要动态调整大小并且相对较小时，GIF 是一个不错的选择。制作精良的 GIF 可以像您链接的插图一样详细，而无需担心性能。甚至可以使用放置在其上（或仅其一部分）的透明覆盖层进行轻微交互。

旁注：现在有一种由 Imgur 创建.gifv的格式，可以将 GIF 文件即时转换为 WebM 或 MP4 视频格式。这通过大大减小最终文件大小来提高性能。你可以考虑做同样的事情。

雪碧

保持流畅但高度风格化的动画的另一种方法是使用精灵。Google 将这种方法用于徽标动画之类的事情。另一个很好的例子是Alexander Engzell 的旧网站，它使用这种方法有一个病态的排版动画。当 GIF 太大但您不需要太多交互时，这是最佳选择。

我还看到了一个非常有趣的 JavaScript 动画，它类似于Google 使用的精灵或 GIF （悬停在左上角的 Chrome 图像 - 它需要在 Chrome 中），但使用动画蒙版。我猜他们使用这种方法来限制总文件大小。

视频

近年来，我们在视频方面获得了强大的能力。该<video>元素让我们以前所未有的方式自定义我们交互和使用视频的方式。现在我们可以轻松地使用全屏背景视频，并在滚动时逐帧进行操作。我还注意到，Facebook 使用视频来制作一些简单的动画，以欢迎用户关注他们的特殊事件。好处是它可以压缩到非常小的文件大小，并且可以制作更广泛的动画（视频编辑软件可以做的任何事情）。因此，如果有人可以制作病态视频，那么将其变成网页的绝妙补充相当容易。

显然，视频不适用于网络上的大多数动画（例如按钮转换等），所以不要到处使用它们。

综上所述，如果您希望动态生成动画，当您需要的不仅仅是基本交互时，当您想要创建 3D 环境时，以及在许多其他情况下，GIF、精灵或视频根本不会剪了它。一旦确定了这一点，还有其他几个选项，其中最好的选项取决于您的动画和需求。

帆布

许多网络动画使用Canvas。Canvas 非常适合使用，因为它的性能和创建灵活性。它只使用一个浏览器 (DOM) 元素，因为它只是在真实的画布上绘制 - 相互叠加的事物。通过使用 JavaScript 跟踪绘制的内容和位置，我们可以创建一些非常棒的动画甚至游戏。

然而，使用 Canvas 的主要缺点是相对难以扩展。很多时候，当然取决于动画，制作响应式 Canvas 动画比使用其他方式更难。另一个缺点是在 Canvas 上有很多内容对 SEO 不是很友好，因为 Canvas 元素不可抓取（如果适用，您可以通过放置一些视觉上隐藏的内容 HTML 来解决这个问题）。同样，Canvas 很难为用户选择文本（尤其是在不使用 CreateJS 之类的库的情况下）。

Canvas 的主要用途是 Google 的涂鸦，通常在 Canvas 中完成。当他们有游戏或交互式动画时，他们每次看我都使用 Canvas。如果没有交互，他们将使用 GIF 或精灵。

有很多很棒的库可以帮助您更轻松地使用 Canvas，但根据需要完成的工作，这绝对不是必需的。专为 Canvas 制作的有CreateJS（您可以从 Animate CC 导出）、Pixi.js、PaperJS、KineticJS和FabricJS（按我对它们的印象排列）。一个名为Lottie（以前的 BodyMovin）的 After Effects 插件也可以导出到 Canvas（或 SVG ^[1]），并具有内置动画引擎。

当然，您也可以轻松地将 GSAP 等大型动画库与 Canvas 配对。对于与您链接的插图一样详细的内容，我建议您使用某种类型的框架，但对于很多事情，它们并不是真正必要的，只是有用 - 特别是如果您已经知道如何使用其中一个。

SVG

另一种以易于响应的方式为 Web 上的事物设置动画的非常强大的方法是使用 SVG（可缩放矢量图形）。它们很好地实现了它们的目的——成为可扩展的向量。许多人一开始会觉得使用 SVG 令人困惑，但大多数东西，如 SVG 的坐标系统和变换，都有很好的文章来解释它们。

SVG 的许多可爱之处之一是它可以使用 JavaScript、纯 CSS（包括:hover状态、transforms、transitions 和animations）或SMIL 动画（使用 SVG 为事物设置动画的“本机”方式 - 但 IE 没有）根本不支持它，它正在逐渐贬值）。我建议先尝试使用 CSS，然后再尝试使用 JavaScript，只要它在 CSS 中（相对）不简单。对于 SVG 元素的变形，实际上有必要使用像GSAP 的 MorphSVG 插件这样的工具，除非您只支持部分支持，在这种情况下 SMIL 可能是可以接受的。

由于 SVG 元素可以是任何形状，它们可以用来创建一些很酷的效果。Sarah Drasner 对 SVG 动画进行了一些有用的性能基准测试，显示了哪种 SVG 动画方式在性能方面是最佳的。

根据动画（以及浏览器支持的需要），像Snap.svg或 GS​​AP 这样的库可能很有用，但通常是 CSS，如果需要，只需要一点自定义 JS。话虽如此，名为Lottie（以前称为 BodyMovin）的 After Effects 插件和名为Flash 2 SVG的 Flash 扩展对于创建 SVG 动画非常有帮助。

有关更多详细信息，请查看这篇有关动画 SVG 元素的相关文章。

_{PS 最好在<object>标签中使用 SVG，如果它是交互式的，或者直接嵌入到<svg>XML 元素中，如果它不是交互式的，最好作为背景图像，但还有其他方法可以做到这一点。}

CSS

根据我的经验，CSS 动画和过渡应该主要用于 UI 元素和其他基本的过渡和动画。即使这样，有时使用像GSAP这样的 JS 动画库来进行 UI 动画/过渡也是合适的。这实际上取决于您想要的行为类型以及在 CSS 中是否方便。

虽然我们可以用纯 CSS 创造出疯狂的 东西，但通常更难创建复杂的插图，就像你使用 CSS 提供的示例一样，即使在另外处理图像时也是如此。复杂的 CSS 动画通常比 JavaScript 动画更难维护。另一个缺点是 CSS 动画很难用 JavaScript 更改，并且在与 JavaScript 混合时播放效果不佳。

话虽如此，使用过渡和动画的简单交互通常应该使用 CSS；你应该默认它。要开始学习如何使用 CSS 制作动画，请查看我的网络动画简介。

您还可以在Animate.css等库中找到有用的动画和缓动函数，您可以从中提取并添加到您自己的项目中。你几乎不需要整个图书馆，只拿你想要的部分。

基于 DOM 的 JavaScript 动画

基于 DOM 的 JavaScript 动画相当简单。由于 jQuery 等糟糕的动画库，它们的名声很差animate()，但它们的性能可能特别高，尤其是在使用 Web 动画 API（下文讨论）或GSAP、Anime或tween.js等专门的动画库时。使用这样的库，它们通常可以在更密集的动画中胜过其他类型的动画，例如为大量元素制作动画。

您需要使用基于 DOM 的动画的主要原因是，如果您有很多用户动画或复杂的时间线，涉及到已经制作的 DOM 元素。由于已经指定的原因，通常最好尝试在 DOM 上使用 Canvas 之类的东西。

像 GSAP 这样的库让我们通过跟踪动画矩阵来做一些疯狂的事情，比如在悬停时减慢动画。通过这种方式，如果做得好，基于 DOM 的动画可以比任何其他形式的动画更具定制性和交互性。唯一的缺点是，有时，根据它的构建方式和需要做什么，它不会表现良好。

WebGL

WebGL是一种主要创建 3D 作品的方式。它有一些很棒的项目，你应该看看。显然，它不是在每个网页上都使用，但值得一提的是。

根据我的经验，使用 WebGL 库实际上是必要的。谢天谢地，有一些不错的。ThreeJS是迄今为止我见过的最常见的，其次是PixiJS。对于常规网站的图像和视频动画，Curtains.js是一个不错的选择。像A-Frame这样的 WebGL 框架也可以很容易地掌握它并创建基本的东西。

我在 CSS-Tricks 上写了更多关于将 WebGL 效果添加到“常规”网页的内容。

关于 Web Animations API (WAAPI) 的说明

Web 动画 API是一种尝试标准化动画在浏览器中的实现和维护方式以及性能改进。它旨在与包括 SVG 在内的 DOM 元素一起使用。它类似于 CSS 动画的结构（以 JS 外观形式），但增加了时间轴和改进的性能等功能。

它通过将动画放在合成器线程上来提高性能（有关更多详细信息，请查看有关该主题的这篇精彩文章）。有关如何使用它的介绍，请查看Mozilla 文档或这篇介绍性文章。

你可能会问，“这会取代 JavaScript 动画库吗？ ”答案是“希望有一些”。原生浏览器动画引擎的改进对每个人都是有益的，并且随着它们的改进，一些功能较弱的动画库将变得无用。话虽如此，更强大的动画库仍将具有GSAP 指出的额外好处。一旦 WAAPI 得到广泛支持，您是否需要一个库仍然取决于您的需求。

WAAPI有很好的支持，如果你需要 IE 支持，它有一个polyfill。

关于性能的一些说明

• 避免使用性能不佳的属性或导致回流/重绘。

• 避免在页面上为一堆元素设置动画，因为它们更加密集，并且以后更改也可能很痛苦。

• 使用 CSS 时，transition尽可能（在合理范围内）使用过渡动画。它们性能更好，通常更容易使用。

• 智能地will-change在您要制作动画的大型元素上使用该属性，以便浏览器提前知道。有关它的更多详细信息和建议，请阅读有关该主题的SitePoint 文章。

• 在 JavaScript 中进行计时时避免setInterval并选择requestAnimationFrame（如果您使用它们的时间轴，像 GSAP 这样的优秀动画库会为您执行此操作）。

• 如果可以，请使用 Web 动画 API，因为它具有使用 JavaScript 中其他方法不具备的动画功能。

关于滚动动画的说明

有多种方法可以为滚动上的事物设置动画。有关概述，请参阅我在 CSS-Tricks 上的帖子。

关于 Flash 的说明

您永远不应该在最终产品中运行 Flash。Flash正式死亡。不要使用它。您可能会考虑的唯一情况是，如果您正在进行安装并且拥有您知道运行 Flash 的专用硬件和软件。

话虽如此，Animate CC（Flash 的更名）是一种创建动画的有用方法，并且可以使用Create.js导出到 Canvas 。

综上所述

通常有多种方法可以用来创建动画。最好的方法取决于您希望它做什么，有时没有明确的更好方法。我经常发现自己在同一个项目中使用多个。重要的是批判性地思考，准确地理解你希望动画如何表现，并以此为基础决定方法。如果您在每个方面都工作过，这也会有所帮助。

根据我的经验，在制作静态动画（不用于与用户进行任何交互的动画）时，我发现最适合我的是在 After Effects 中为插图制作动画，然后将最终结果导出为 .GIF 文件。这使得动画绝对对浏览器友好，并保证在任何设备中都具有相同的可视化效果。

但是，如果您正在寻找用户可能与之交互的东西，我相信 Canvas 确实是要走的路，因此 CreateJS 似乎确实适合 EaseJS 库的工作。

无论如何，根据您的示例，您也可以使用动画 GIF 文件并获得完全相同的结果。

如果您使用 After Effects，您可以使用Bodymovin插件。它将您的作品呈现给移动和网络使用。您将拥有可以在 HTML 中使用的 .json 和 lottie.js 文件。但首先您必须在常规设置中关闭允许脚本写入文件和访问网络。完成后转到Window，Extensions并找到Bodymovin。选择您的构图，设置保存位置并单击渲染。将您的 .json 和 lottie.js 文件放入您的 HTML 中，您的工作就完成了。我认为 GIF 不是最好的解决方案，因为它需要更多时间来加载。

您可以在此处下载：http: //aescripts.com/bodymovin只需添加您的价格，或者如果您想要免费的，您只需支付 0.00 美元...

这是使用 Bodymovin 并使用 Visual Studio 在您的网站中设置动画的教程：youtube.com/watch?v=YmPsCD5jRDw&t=282s

如果您了解 HTML 和 CSS 基础知识，那么这对您来说应该很容易。该教程对我有所帮助，希望对您有所帮助。