为网络插图制作动画的最佳方法是什么？

我已经在Illustrator中完成了一些插图，并且打算为正在工作的网站制作动画，我听说过带有Flash 的Create.js工具包，但这是最好的方法还是还有另一种“更好”的方式吗？

这是我想要的一种动画示例：http : //kontramax.com/wp-content/uploads/envato/demo/coming_soon_machine/dark/

有很多方法可以使网上的事物产生动画效果。还有更多创建动画然后导出到Web动画的方法。

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

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

互动能力有限：

• GIF
• 雪碧
• 视频

更全面的互动性：

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

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

GIF

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

旁注：现在有一种由Imgur创建的.gifv格式，可以将运行中的GIF文件转换为WebM或MP4视频格式。通过大大减少最终文件大小，可以提高性能。您可能会考虑这样做。

雪碧

保持平滑但样式丰富的动画的另一种方法是使用精灵。Google将这种方法用于徽标动画之类的事情。另一个很好的例子是Alexander Engzell的旧网站，该网站使用此方法制作了令人讨厌的排版动画。当GIF太大但您不需要太多交互时，这是最佳选择。

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

视频

近年来，我们在视频方面获得了强大的功能。该<video>元素让我们自定义交互方式并使用视频，这是前所未有的。现在，我们可以轻松使用全屏背景视频，并进行逐帧滚动显示。我还注意到，FaceBook 在欢迎用户关注特殊事件的供稿时将视频用于一些简单的动画。好处是可以将其压缩到很小的文件大小，并且可以播放更广泛的动画（视频编辑软件可以执行的任何操作）。这样，如果某人可以制作一个有病的视频，那么很容易将其转变为网页的绝妙补充。

显然，视频不利于网络上的大多数动画（例如按钮过渡等），因此请不要在任何地方使用它们。

综上所述，如果您希望动态生成动画，则除了真正需要的基本交互之外，当您想要创建3D环境时，在许多其他情况下，GIF，子画面或视频也不会剪了它。确定后，还有其他几种选择，最好的选择取决于动画和需求。

帆布

我没有统计信息，但是我见过的大多数网络动画都使用Canvas。Canvas非常有用，因为它的性能和创建的灵活性。它仅使用一个浏览器（DOM）元素，因为它只是像在真正的画布上那样将事物相互叠加。通过跟踪使用JavaScript绘制的内容和位置，我们可以创建一些非常棒的动画甚至游戏。

但是，使用Canvas的主要缺点是缩放的相对难度。通常，根据动画的不同，制作自适应的Canvas动画通常比使用其他方法要困难得多。另一个缺点是，由于Canvas元素不可抓取，因此Canvas上包含的内容并不十分SEO友好（您可以通过在内容中放置一些可视的HTML隐藏内容来解决此问题）。同样，使用Canvas很难为用户选择文本（尤其是不使用CreateJS这样的库）。

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

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

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

SVG

以轻松响应的方式在网络上制作动画的另一种非常强大的方法是使用SVG（可伸缩矢量图形）。他们很好地实现了自己的目的-作为可扩展的向量。许多人最初发现使用SVG会造成混淆，但是大多数诸如SVG的坐标系和变换之类的东西都有很好的文章来解释它们。

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

由于SVG元素可以是任何形状，因此可以用来创建一些很酷的效果。Sarah Drasner 针对SVG动画做了一些有用的性能基准测试，这些基准显示了使SVG动画效果最佳的方法是哪种。

根据动画（和浏览器支持的需要），像Snap.svg或GSAP之类的库可能会有用，但是通常需要CSS，并且如果需要，还需要一点定制JS。话虽如此，一个名为Lottie（以前称为BodyMovin）的After Effects插件和一个名为Flash 2 SVG的Flash扩展对于创建SVG动画确实很有帮助。

有关更多详细信息，请参阅此相关文章，专门介绍动画SVG元素。

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

的CSS

以我的经验，CSS动画和过渡应该主要用于UI元素以及其他基本的过渡和动画。即使这样，有时也可以将GSAP或Velocity.js之类的JS动画库用于UI动画/过渡。这实际上取决于您想要的行为类型，以及是否在CSS中方便。

尽管我们可以使用纯CSS 来创建疯狂的 东西，但是通常很难创建复杂的插图，例如您使用CSS作为示例提供的插图，即使另外还要处理图像时也是如此。复杂的CSS动画通常比JavaScript动画更难维护。另一个缺点是CSS动画很难用JavaScript进行更改，并且与JavaScript混合使用时效果不佳。

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

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

基于DOM的JavaScript动画

基于DOM的JavaScript动画相当简单。由于糟糕的动画库（例如jQuery的动画库）animate()，它们的表现不佳，但是它们的性能可能特别高，尤其是在使用Web动画API（如下所述）或专门的动画库（例如GSAP，Velocity.js或mo.js（ GSAP甚至有一个特殊的插件来代替jQuery .animate。使用这样的库，它们通常可以胜过其他类型的动画以获得更密集的动画，例如对大量元素进行动画处理。

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

像GSAP这样的库可以让我们做疯狂的事情，例如通过跟踪动画矩阵来使悬停动画慢下来。这样，与DOM动画相比，如果做得好，与其他任何形式的动画相比，它们可以更具自定义性和交互性。唯一的缺点是，有时，取决于它的构建方式和需要执行的操作，它的性能可能不佳。

WebGL

WebGL是一种主要创建3D作品的方法。它有一些很棒的项目，您应该检查一下。显然，并不是每个网页都使用它，但是必须提一下。

实际上，它为DOM元素设置了动画，以创建3D（和2D）环境，这是一个很棒的环境，因为它具有潜力。使用库时，WebGL会回退到使用Canvas，但在移动设备上仍然没有很好的支持，并且性能可能很高。通常，很清楚何时需要使用WebGL。

根据我的经验，实际上需要使用WebGL库。幸运的是，这里有一些不错的。到目前为止，ThreeJS是最常见的，其次是PixiJS。像A-Frame这样的WebGL框架也可以很容易地将其拾起并创建基本内容。

有关Web动画API（WAAPI）的说明

该网页动画API是规范如何动画实现跨越，并与性能改进配对浏览器维护的尝试。它旨在与包括SVG在内的DOM元素一起使用。它类似于CSS动画的结构（以JS外观形式），但是增加了诸如时间轴和改进的性能之类的功能。

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

您可能会问：“ 这会取代JavaScript动画库吗？ ”答案是“ 希望一些 ”。改进本机浏览器动画引擎对每个人都是有益的，并且这样做的话，一些功能较弱的动画库将变得无用。话虽这么说，功能更强大的动画库仍将具有GSAP指出的其他好处。广泛支持WAAPI后，是否需要库仍由您的需求决定。

WAAPI当前没有很好的支持，但是今天可以在生产中与polyfill 一起使用。看起来它将继续变得更好并获得更多支持。

关于性能的一些说明

• 避免使用性能不佳的特性或引起回流/重涂。

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

• 使用CSS时，请transition在合理的范围内尽可能使用动画。它们表现更好，通常更易于使用。

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

• 在JavaScript中进行计时时应避免使用setInterval并选择requestAnimationFrame（如果使用GSAP的良好动画库的时间轴，则可以为您这样做）。

• 可以的话，请使用网络动画API，因为它具有使用JavaScript中其他方法没有动画的功能。

关于Flash的说明

绝对不要在最终产品中运行Flash。JavaScript动画的性能更好，更具动态性，更易于编辑，不需要任何下载，可以在更多平台上运行（Flash在大多数平板电脑/手机上不起作用），并且比笨重的旧Flash动画具有更高的响应速度。它们也不是很容易访问，也不是SEO友好的。

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

结论

通常可以使用多种方法来创建动画。最好的方法取决于您要执行的操作，有时没有一个明显更好的方法。很多时候，我发现自己在同一项目中使用了多个项目。重要的是要进行批判性思考，准确地了解您希望动画如何表现，并基于此来决定方法。如果您做了一些工作，它也会有所帮助。

_{[1]-Lottie 还可以导出到本机Android，iOS和React Native。}

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

但是，如果您正在寻找用户可能与之交互的东西，我相信Canvas确实是可行的方式，为此，CreateJS似乎确实适合EaseJS库。

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

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

您可以在这里下载它：http : //aescripts.com/bodymovin只需添加您的价格，或者如果您要免费，则可以放$ 0.00 ...

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

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