使用 SVGator 为 SVG 文件制作动画

（本文由 SVGator 赞助。）动画 SVG 文件变得非常流行。 它们是完全可扩展的（因为它们是向量）、体积小且 100% 基于代码，允许进行如此多的转换和调整。 然而，这是有代价的：完全初学者的陡峭学习曲线。

SVGator 承诺解决这个问题，让任何人都可以很容易地使用熟悉的界面制作简单的动画。 它是一个基于 Web 的动画应用程序，可让您导入、制作和导出 SVG 动画，并且无需初学者学习编码。 我们试过了，我们真的很喜欢它。

开始使用应用程序

前往 https://www.svgator.com 开始使用该应用程序。 注册过程非常简单（图 1 到图 3）：单击“立即制作动画”，然后单击“创建帐户”，填写您的详细信息，就可以开始了。

您将直接进入示例“秒表”项目，让您探索 SVGator 的功能。 如果您在应用程序中找不到自己的方式，有一个简洁的教程（图 4）将指导您如何开始使用它：导入静态 SVG，将元素添加到时间轴，并将动画师添加到元素和关键帧以动画四个当前可用的属性（比例、不透明度、位置和旋转）。

如果您曾经使用过动画应用程序，那么您应该对 SVGator 的用户界面感到非常熟悉，并且一切都可能感觉在正确的位置。 您只需添加要制作动画的元素，这样可以保持时间线干净且易于扫描。

入门动画时钟项目在向您介绍 SVGator 方面做得很好。 您可以随时返回并使用它作为参考。

现在我们已经掌握了基础知识，让我们开始制作我们自己的动画吧！

我们会做什么

看看我们在 Sketch 中设计的这个简单的信封图标（图 5）。 它开始关闭，然后打开，然后弹出一封信，然后是其内容。 然后，这封信跳出信封并放大以显示绿色复选框。

以下是该过程的摘要：

• 我们将首先制作一个简单的故事板来可视化处于不同状态的图标。 在此过程中，我们将不断与 SVGator 同步并导入图标的元素，以确保一切按预期工作。
• 然后，我们将创建图标的主副本，其中将包含我们需要的每个元素，并将其导出到 SVGator。 在整个过程中，我们可能需要大量修改这个主副本。
• 接下来，我们将在单个 SVGator 项目中制作整个动画并将其导出，确保它按预期工作。
• 最后，我们将把图标包含在一个简单的预编码时事通讯表单中，以查看它在真实 Web 环境中的外观。 我们还将看到它为更小的分辨率调整大小。
• 你可以在这里下载所有东西。

让我们开始吧！

第 1 部分：从 Sketch 创建和导出图标

• 设计一个简单的 SVG 图标和设计一个您计划稍后制作动画的 SVG 图标之间存在一些差异。 对于初学者，重要的是要注意它应该由相当简单的形状组成，并且您应该围绕仅基于以下操作的简单过渡来规划动画：缩放、旋转、位置和不透明度。 这些是 SVGator 目前让您制作动画的仅有的四个属性，因此如果您草拟了更复杂的内容，您将无法做到。

制作一个简单的故事板以节省时间

Storyboard 让您可以在将所有转换实际导入 SVGator 之前将其可视化。 它还使得在制作整个动画之前测试转换变得容易。 经常发生的情况是，您会发现在 Sketch 中应该以不同方式完成的插图的问题，因此您必须返回并更改它。 然后，您需要在 SVGator 中重新导入整个文件并从头开始制作动画。 因为您不想每次都这样做，所以故事板通过迫使您提前计划事情来帮助您。

例如，我最初计划让信封更靠近屏幕底部，但是在将其导入 SVGator 并玩过关闭和打开之后，很明显它需要在关闭时保持在中间，并且在关闭时稍微向下已打开 — 静态图像中省略的细节。

提示：查看 Sketch 文件 → 画板“storyboard”中的故事板。

层命名和组织

如果您在 Sketch 中命名图层，它将按预期工作，并且您在 Sketch 中分配的所有名称都将转移到您在 SVGator 中的项目中。 但是如果您使用 SVGO Compressor 或类似的插件来使 SVG 文件更小，名称将消失，并且 SVGator 将用基于 HTML 标签的名称替换它们，您最终会得到类似于图 7 所示的内容.

提示：如果您已经将 SVGO Compressor 用于其他 SVG 并且不想禁用它，只需将文件从 Sketch 的导出预览区域拖放到您想要的位置（图 8）。 这将绕过 SVGO Compressor 并按原样导出 SVG！

使用组也很棒，因为应用程序可以识别它们，您甚至可以同时为图层及其父组设置动画，从而增加了一些复杂性。

我们没有遇到使用层数的任何限制，但话又说回来，我们的图标非常简单。

为动画准备图标

现在我们在故事板中有了这个想法并且我们已经准备好了主文件，让我们以我们可以在 SVGator 中理解的方式导出它。 请务必仔细检查图层层次结构。 想想某个图层将如何与另一个图层交互，以及它应该放置在“图层”面板中的什么位置。 在图 9 中，您会看到我们选择了“top_opened”——即打开的信封顶部翻盖。 它应该站在白纸后面。 反之亦然，“top_closed”是信封的封盖，它应该位于所有内容的顶部； 这就是为什么它是我们“内容”组中的第一层。

提示：您可能想知道为什么整个顶部翻盖由两层组成。 这是因为我们无法使用 SVGator 在 3D 空间中旋转形状或真正转换它们。 我们通过挤压第一层然后拉伸第二层来模拟这一点，从而产生 3D 转换的错觉。

如果您查看我们的故事板，最初的想法是让纸张跳出信封并扩大规模以最终将其隐藏。 我们将通过向上推原始工作表来实现这一点，同时在信封前面放置另一个隐藏工作表（“sheet_top”）（图 10）。 他们在最高点相遇的那一刻，他们会切换，前页将落在信封前。 这也是一种视觉错觉——我们不能真正在 z 空间中移动工作表，所以这是模拟它的一种方法。

考虑到所有这些，我们现在可以导出图标了。 它实际上是一个包含我们需要的所有元素的单个 SVG，以一种有用的方式堆叠在一起。

提示：确保在导出之前将所有元素标记为可见（未隐藏）。 您可以在 Sketch 文件 → 画板“导出”中查看我们用作导出的文件。

第 2 部分：动画图标

打开 SVGator 并单击“Import new”开始一个新项目（图 11）：

如果您已正确完成所有操作，您应该会看到类似于图 12 的内容和下面的短剪辑（剪辑 1）：所有图层相互堆叠并准备好使用。 如果碰巧没有看到所有内容，请返回 Sketch 并仔细检查所有图层是否可见。

为信封的打开设置动画

我们将从在时间轴中导入一些元素开始。 SVGator 的运作方式是从一个空的时间线开始。 您可以从“元素”下拉列表中选择要添加的元素。 您必须使用眼睛图标手动检查它们，以查看您要查找的图层。 或者，您可以直接单击屏幕上的元素，这将执行相同的操作。

我们将从情节提要中的第 1 步和第 2 步开始工作，特别是在翻盖的开口处。 让我们暂时禁用我们不需要的层； 我们稍后会回到他们身上（请参阅剪辑 1 了解如何做到这一点）。 我们应该只剩下基本的信封，这意味着您应该禁用以下层：“sheet_top_content”、“sheet_top_bgr”和“sheet_bottom_bgr”。

然后，单击“top_opened”，然后单击左侧的加号图标，或双击元素将其添加到时间轴。 对“top_closed”做同样的事情。 现在您应该在时间线中拥有两个图层（图 13）。

提示：如果您想快进整个过程，请查看剪辑 2（这些操作的顺序可能与下面描述的顺序不同） 。

• 单击时间轴中的“top_closed”，然后单击“动画师”下拉菜单。 添加一个缩放动画师。
• 也为“top_opened”添加一个缩放动画师。
• 然后，单击时间轴中图层名称旁边的小目标图标。 这是 transform-origin 属性，它允许您为元素的转换设置一个枢轴点。 让我们为“top_closed”选择top-center，因为我们要向上收缩它（图14），然后为“top_opened”选择bottom-center。
• 现在，选择“top_closed”，单击 Scale 属性上的加号以将关键帧添加到时间轴。 黄色菱形将出现在时间线中。 让我们移动到 0.4s 并再次单击加号（图 15）。 当襟翼已经打开时，第二个关键帧将是我们转换的最后一点。 因此，让我们将其 Scale 100% 设为 0%，将第一个关键帧保留为 100% 100%。
• 通过单击图层名称旁边的小目标图标打开“top_closed”的缓入（图 16）。
• 在 0.4 秒时，双击“Animators”菜单中的 Opacity，然后单击时间轴中 Opacity 属性旁边的加号，为“top_closed”添加一个 Opacity 关键帧。 将其更改为 0%。
• 向后退几帧，为不透明度添加 100%。 我们这样做是为了避免顶部翻盖部分出现故障。

提示：缓动将使动作看起来更自然，并且因为我们正在设计一个模拟单个元素运动的动画，所以很自然地在动画的开头缓入并在结束时缓出。

现在，让我们处理“top_opened”部分，即动画的结尾。 正如我们之前提到的，我们分两部分来模拟襟翼的 3D 开口。

• 在时间轴中抓取“top_opened”图层，在时间轴中转到 0.4s，然后添加一个 Scale 关键帧，然后在 0.8s 处添加另一个关键帧。 让0.4s处的Scale为100% 0%，让0.8s Scale值保持100% 100%。
• 打开缓出。 点击播放预览动画。

看起来很酷，但现在整个信封需要向下移动，以使其适合圆圈背景。 在 Elements 中找到一个名为“g”的组，并为其添加一个 Position animator。 将位置关键帧添加到 0.2 秒，然后添加到 0.8 秒。 将 0.8s 值更改为 0 35。添加 Ease-in-out 以获得流畅的动画效果。 就是这样！ 我们成功地为信封打开了动画，甚至让它向下移动了一点。

增加复杂性：字母弹出

打开信封很整洁，但我们可以通过引入一张纸使其更有趣。 为此，我们需要显示工作表层，我们称之为“sheet_bottom_bgr”。

• 单击“元素”菜单中“sheet_bottom_bgr”旁边的眼睛图标使其可见。 将其添加到时间线（双击它）。
• 现在，转到动画中间的某个位置（例如 0.5 秒）并添加一个位置关键帧。 0.4 秒后再添加一个。 选择第一个关键帧并在 y 轴 (0 140) 上将图层偏移 140 像素。
• 添加缓入出效果。 现在我们有了更有趣的动画。

提示：如果您喜欢在视频中观看此内容，请查看下面的剪辑 3 。

更复杂的：对字母的缩放进行动画处理

更进一步，让我们对从信封中弹出的字母进行动画处理，并显示一些“写”在信中的文本行。 为此，我们必须稍微修改之前的动画。 （如果您想快进，您可以观看截屏并重复。）

• 首先将“sheet_bottom_bgr”的最后一个位置关键帧从 0.9s 移动到 1.1s，并将其更改为 0 -190。 我们正在做的是将这张纸从信封中取出，以便我们可以快速将其与我们已经准备好的另一张纸交换。
• 转到 1.1 秒，打开“sheet_top_content”和“sheet_top_bgr”，并将它们添加到时间轴，位置关键帧都为 0 -190。
• 在 1.5 秒处添加关键帧并将它们设为 0 40。
• 为两者启用缓出。

这是前板的运动，它应该看起来像您在图 17 中看到的那样。

现在让我们修复背板。 一旦正面出现，它应该会消失，而正面应该只在此之后出现。

• 转到 1.1s，然后选择“sheet_bottom_bgr”。 添加一个不透明度动画师和一个关键帧。 将其设置为 0%。
• 向后移动一帧并设置另一个不透明度关键帧，使其为 100%。

让我们也对前页进行相应的更改：

• 转到 1.1s，选择“sheet_top_bgr”并添加 100% 的不透明度关键帧。
• 向后移动一帧，并使不透明度为 0%。

您应该看到类似于下图 18 的内容。 我们可以在这里发现两个问题：

• 在转换发生之前，内容显示在信封顶部。
• 交换背面和正面时出现故障。

让我们解决第一个问题。 让我们隐藏内容和复选框，并在前页出现后显示它。

• 转到 1.5 秒，选择“sheet_top_content”并添加 100% 的不透明度关键帧。
• 向后移动一帧并将另一个不透明度关键帧设置为 0%。
• 现在，我们将通过对前面内容中的每一层进行动画处理来使其更有趣。
  • 转到 1.5s 并在 Elements 菜单中搜索“sheet_top_content”的内容。
  • 在“sheet_top_content”中为所有三层添加不透明度关键帧。
  • 将所有三层的不透明度设为 0%。
  • 移动到 1.7 秒并将所有三层设置为 100%。
  • 停留 1.7 秒并选择 Combined-shape ，然后添加一个 Rotate 关键帧。
  • 转到 1.5 秒并将旋转设置为 -45 度。
  • 为旋转添加 Ease-in-out。

第二个问题是由于我们的背板过早消失而发生的故障。

• 转到 1.1 秒，选择“sheet_bottom_bgr”并将其不透明度关键帧向前移动一帧。 以下是您应该查看的内容（图 19）：

为了使其更具吸引力，让我们在封面和内容从信封中弹出时对其进行缩放。 我们可以缩放整个“top_sheet_content”，但这可能会导致某些浏览器出现一些错位。 最好自己缩放每个子层。

• 转到 1.1s，选择“sheet_top_bgr”并添加一个 Scale 关键帧。
  • 对组合形状、“line_top”和“line_bottom”执行相同操作。
• 转到 1.5 秒并添加另一个缩放关键帧，其值为 120% 120%。
  • 对组合形状、“line_top”和“line_bottom”执行相同操作。
• 启用缓入出。
• 因为我们对其进行了缩放，所以我们需要减少整个前板向下移动的量。 转到 1.5s，选择“sheet_top_content”和“sheet_top_bgr”，并将它们的位置从 0 40 更改为 0 20。

提示：在 SVG 中缩放内容是可以的，因为它都是基于矢量的，所以您不会损失任何质量。

这是它现在的样子（图 20）：

一切都很好，但是整个动画需要循环回到第一帧。 那是因为我们想重用它。 我们的想法是让前页向下滑动，使信封合上并转到其原始位置。

• 转到2.8s，选择“sheet_top_bgr”并添加位置关键帧。
  • 对“sheet_top_content”做同样的事情。
• 我们需要添加更多时间，因为默认时间线是 3 秒。 单击时间线上方左下角的齿轮图标，将持续时间更改为 00:04:50（图 21），然后按“Enter”。 我们现在延长了时间线。
• 移动到 3.6 秒，添加另一对 Position 关键帧，并将它们的值设为 0 360。将两个图层的 Position 的缓动更改为 Ease-in-out。

• 1.3s，选择“top_closed”和“top_opened”，添加Scale关键帧。
• 在 1.5 秒时再添加两个。 对于第二个关键帧，“top_closed”应该有 100% 100% 和“top_opened” 100% 0%。 我们已经成功关闭了缩放表后面的翻盖。
• 现在，我们所要做的就是将信封移回中心并确保顶部翻盖再次出现。 转到 3s 并为“g”添加一个位置关键帧。 在 3.4 秒处再添加一个，并将其设为 0 0。转到 2.8 秒，为“top_closed”添加一个不透明度为 0% 的关键帧。 然后，移动到 3 秒并将不透明度更改为 100%。

恭喜！ 我们为整个图标设置了动画。 它应该是这样的（图 22）：

第 3 部分：在真实 Web 环境中实现导出的动画

让我们将图标放置在真实环境中。 我们编写了一个简单的时事通讯表格，并在其中包含了图标。 您可以通过单击“导出 SVG”从 SVGator 导出图标。

单击“订阅”后，将显示一条感谢信息，并开始图标动画。

它通过有两个 SVG 图标来工作：第一个是静态图标，仅包含动画的第一帧，第二个是动画图标。 您可以在 Sketch 文件 → 画板“导出静态”中找到静态图标。 我们已将其作为内联 SVG 元素包含在代码中。 我们还包括了动画 SVG 内联，但默认隐藏它。 您可以查看下载中的代码。 当“订阅”收到点击时，我们隐藏静态 SVG 并显示动画，它会自动启动。

我们在静态 SVG 中做的一个小调整是替换这一行：

 <rect fill="#E6E7EB" fill-rule="evenodd" x="0" y="162" width="384" height="131"></rect>

… 有了这个：

 <rect fill-rule="evenodd" x="0" y="162" width="384" height="131"></rect>

这将删除在所有元素顶部不正确显示的灰色矩形。

这个例子还展示了 SVG 在响应式设计中的出色表现：如果您将窗口缩小，布局将重新排列，图标将放大而不会损失任何质量。

提示：当我们缩小图标时，我们发现工作表离开画布需要太多时间，因此我们不得不返回并稍微编辑该特定时间以使其更短。 我们将“sheet_top_bgr”和“sheet_top_content”的最后一个位置关键帧移动到3.2s，以使移动更快。

如果您愿意，即使在导出动画后也可以调整动画，但在 SVGator 中执行此操作要容易得多，您将拥有方便的 UI。

结论

我们对 SVGator 之类的工具感到非常兴奋，当您制作简单的 SVG 动画时，它确实加快了这个过程。 它易于使用，您可以立即获得精美的动画。

• 它不如 Adob​​e After Effects 强大，但它的适应性更强，它可以将所有内容导出为代码，以便在网络上使用。 将其与 After Effects 相比是苹果和橙子，因为这两种工具是如此不同。
• 当使用 SVGator 进行快速探索时，初学者会看到它更大的价值，但这并不意味着它只针对他们。 高级用户可以使用该工具集思广益或快速探索想法，而无需使用更复杂的工具。 因为 SVGator 会生成代码，所以您可以从那里获取并以您喜欢的方式自定义任何内容。 唯一的缺点是整个动画都放在一个时间轴内，这意味着它基本上是一个 CSS 动画，并且在里面发生的一切在它启动之前都有不同的延迟量。 这意味着您目前不能在动画的某些步骤触发事件，因为一切都是一体化的 CSS。
• 将其与原版代码进行比较也不公平，因为 SVGator 的主要目的是让 SVG 动画更轻松、更快速。 很明显，如果您从头开始编写整个代码，您可以取得更多成就，但这需要您多长时间？
• SVGator 的最大优势之一是它对初学者非常友好。 任何人都可以开始使用它，如果您至少有一些设计或动画软件的经验，学习曲线几乎没有。
• 所有用户在创建帐户后都可以获得 7 天的免费试用期。 包括所有功能，一旦试用结束，他们仍然可以从“我的项目”部分下载动画。 您可以每月（每月 18 美元）、每季度（每季度 45 美元）或每年（每年 144 美元）订阅该应用程序。

进一步阅读关于 SVGator

• 如何使用 SVGator 制作 SVG 动画（视频）
• SVGator 的 Twitter（包含许多迷你教程和有关应用程序的频繁更新）
• SVGator 常见问题

进一步阅读关于使用代码的 SVG 动画

• “我是如何停止担心并学会制作 SVG 动画的，”Boaz Lederer，Medium
• “如何使用 CSS 和 Snap.svg 库优化 SVG 代码和动画 SVG 图标”，CodyHouse
• “面向非开发人员的 CSS 动画第 2 部分 — SVG”，Nicholas Kramer，Prototypr
• “如何轻松创建漂亮的 SVG 动画”，Lewis Menelaws，Medium

特别感谢 Boyan Kostov 帮助我们完成这篇文章 - 我们感谢您的时间和努力！