使用 SVGator 释放路径动画的力量

（这是一篇赞助文章。）去年，关于 SVGator 基本使用的全面介绍发表在 Smashing Magazine 上。 如果您想了解 SVGator 的基础知识、设置您的第一个项目和创建您的第一个动画，我们强烈建议您在继续本文之前阅读它。

今天，我们将重新审视过去几个月添加到其中的一些新功能，包括全新的Path Animator 。

注意： Path Animator 是 SVGator 的一项高级功能，试用用户不可用。 在为期 7 天的试用期中，您可以在应用程序中找到的示例项目中看到 Path Animator 的工作原理，但您无法将其应用于您自己的 SVG，除非您选择了付费计划。 SVGator 是一项基于订阅的服务。 目前，您可以在月度计划（18 美元/月）和年度计划（总计 144 美元，12 美元/月）之间进行选择。 对于较长的项目，我们建议您考虑年度选项。

Path Animator 只是 SVGator 计划在未来几个月发布的高级功能中的第一个。 所有付费用户都可以使用所有新功能，无论他们何时订阅。

路径动画的魅力

SVG 路径动画绝不是新鲜事物。 在过去的几年里，这种丰富矢量图形的方式已经在整个网络中大量使用：

路径动画之所以受欢迎，主要是因为它们相对简单：尽管乍一看它们可能看起来令人印象深刻且复杂，但其基本规则实际上非常简单。

路径动画如何工作？

您可能认为 SVG 路径动画需要一些极其复杂的绘图和变换功能。 但它比看起来要简单得多。 要实现与上述示例类似的效果，您不需要生成、绘制或动画实际路径 - 您只需为它们的笔划设置动画。 这个绝妙的概念允许您通过为单个 SVG 属性设置动画来创建看似复杂的动画： stroke-dashoffset 。

动画这个小属性负责整个效果。 一旦你有一条虚线，你就可以使用虚线和间隙的位置。 将它与正确的设置相结合，它将为您提供所需的自绘 SVG 路径效果。

如果这听起来仍然很神秘，或者您只是想更详细地了解路径动画是如何制作的，您将在本文末尾找到一些关于此主题的有用资源。

无论路径动画与它们的外观相比多么简单，不要认为编码它们总是简单的。 随着您的文件变得越来越复杂，为它们制作动画也是如此。 这就是 SVGator 来救援的地方。

此外，有时您可能不想接触原始 SVG 文件。 或者你可能不太喜欢完全编写代码。 那么 SVGator 已经为您提供了保障。 使用新的 Path Animator，您甚至可以创建最复杂的 SVG 路径动画，而无需接触任何代码。 您还可以将编码与使用 SVGator 结合起来。

为了更好地理解 Path Animator 为我们提供的可能性，我们将介绍三个单独的示例，展示路径动画的不同用例。

示例 #1：动画文本

在第一个示例中，我们将为文本设置动画，营造自写字母的印象。

通常用于刻字，这种可爱的效果也可以应用于其他元素，例如图画和插图。 但是有一个问题：动画元素的样式必须是笔触而不是填充。 这意味着，对于我们的文本，我们不能使用任何现有的字体。

轮廓字体，无论多么细，总是会产生封闭的形状而不是开放的路径。 没有基于线条和笔划的常规字体。

因此，如果我们想使用路径动画来为文本设置动画，我们需要自己绘制（或者找一些现成的适合这个目的的矢量字母）。 在绘制字母时，请随意使用一些现有的字体或排版作为参考——但不要侵犯任何版权！ 请记住，不可能使用开箱即用的字体。

准备文件

我们将从一个简单的手绘草图开始，而不是从现有字体开始：

现在是时候在设计工具中重新绘制草图了。 我使用了 Figma，但您可以使用任何支持 SVG 导出的应用程序，例如 Sketch、Adobe XD 或 Adob​​e Illustrator。

通常，我从钢笔工具开始，大致按照下面作为图层导入的草图：

完成后，我从背景中删除草图并优化路径，直到我对结果感到满意。 不管你使用什么工具，也不管技术，最重要的是将绘图准备为线条，并且只使用笔触，不使用填充。

在这个例子中，我们有四个这样的路径。 第一个是字母“H”； 第二个是中间的三个字母“ell”； “o”是第三个。 第四个路径是感叹号线。

“！”的点是一个例外——它是我们将使用填充而不是描边设置样式的唯一图层。 它将以与其他图层不同的方式进行动画处理，而不使用 Path Animator。

请注意，我们要使用 Path Animator 制作动画的所有路径都是打开的，除了“o”，它是一个椭圆。 尽管使用 Path Animator 对闭合路径（例如椭圆或多边形）进行动画处理非常好且可行，但也值得将其设为开放路径，因为这是控制动画开始位置的最简单方法。 在这个例子中，我在椭圆的字母“l”的末尾添加了一个小间隙，因为这是您通常开始手写“o”的地方。

在将我们的图层导入 SVGator 之前，最好清理图层的结构并以描述性的方式重命名它们。 这将帮助您在使用 SVGator 后快速找到您的文件。

如果您想了解有关为路径动画准备形状的更多信息，我建议您查看 SVGator 的本教程。

仔细准备图层并尽可能多地思考是值得的。 在撰写本文时，在 SVGator 中，您无法将文件重新导入到已经存在的动画中。 在制作动画时，如果您发现需要对原始文件进行一些更改的问题，则必须将其作为新项目再次导入 SVGator 并从头开始制作动画。

创建动画

对图层的结构和命名感到满意后，将它们导入 SVGator。 然后将第一条路径添加到时间轴，并通过从Animators列表中选择它或按Shift + T将 Path Animator 应用到它。

为了实现自绘效果，我们的目标是将路径的笔划变成虚线。 破折号和间隙的长度应等于整个路径的长度。 这允许我们用一个间隙覆盖整个路径以使其消失。 隐藏后，将stroke-dashoffset更改为整个路径被破折号覆盖的点。

SVGator 通过自动提供路径的长度让我们非常方便。 我们需要做的就是单击复制它，并将其粘贴到 SVGator 需要的两个参数中： Dashes和Offset 。 粘贴破折号中的值会将笔划变为虚线。 您无法直接看到它，因为该线的第一个破折号覆盖了整个路径。 设置 Offset 将改变stroke-dashoffset以便间隙覆盖路径。

完成后，让我们通过沿时间线进一步添加新关键帧来创建动画。 将偏移量恢复为零，然后...... ta-da！ 您刚刚创建了一个自绘字母动画。

不过，我们的动画有一个小问题。 这封信是动画的——但从后到前。 也就是说，动画从路径的错误末端开始。 至少有几种方法可以解决它。 首先，我们可以从负偏移量开始并将其设为零，而不是将偏移量从正值设置为零。 不幸的是，这在某些浏览器中可能无法正常工作（例如，Safari 不接受负笔画偏移）。 在我们等待修复这个错误的同时，让我们选择一种不同的方法。

让我们更改 Dashes 值，使路径以空格开头，后跟破折号（默认情况下，虚线始终以破折号开头）。 然后反转偏移动画的值。 这将在相反方向上为线设置动画。

现在我们已经完成了“H”，我们可以继续以相同的方式为所有其他路径设置动画。 最后，我们通过动画感叹号的点来完成。 因为它是一个带填充的圆圈，而不是轮廓，所以我们不会使用 Path Animator。 取而代之的是，我们使用 Scale Animator 在动画结束时使点弹出。

在播放缩放动画时，请务必记住检查元素变换原点的位置。 在 SVG 中，默认情况下，所有元素的变换原点都位于画布的左上角。 这通常使编码转换函数成为一项非常困难和乏味的任务。 幸运的是，SVGator 通过计算与对象而不是画布相关的所有变换，为我们省去了所有这些麻烦。 默认情况下，SVGator 将每个元素的变换原点设置在其自己的左上角。 您可以使用图层名称旁边的按钮从时间轴更改其位置。

让我们为动画添加最后的润色并调整计时功能。 定时函数定义了动画对象随时间变化的速度，允许我们操纵它们的动态并使动画看起来更自然。

在这种情况下，我们想要给人的印象是通过单次连续移动手来书写文本。 因此，我对第一个字母应用了Ease-in函数，对最后一个字母应用了Ease-out函数，中间的字母使用默认的线性函数。 在 SVGator 中，时间函数可以从时间轴应用到 Animator 的参数旁边：

对感叹号应用相同的逻辑后，我们的动画就完成了，可以导出了！

示例 #2：动画图标

现在让我们分析一个更侧重于 UI 的示例。 在这里，我们将使用 SVGator 来复制流行的图标动画：将汉堡菜单变成关闭按钮。

动画的目标是平滑地变换图标，使汉堡的中间条变成一个圆圈，而周围的条相互交叉，形成一个闭合图标。

准备文件

为了更好地理解我们正在构建什么以及如何为此类动画准备文件，从表示动画关键状态的粗略草图开始很有用。

一旦我们对动画的组成有了大致的了解，我们就可以绘制允许我们创建它的形状。 让我们从圆圈开始。 因为我们要使用路径动画，所以我们需要创建一个覆盖整个路线的路径，从汉堡菜单中间的直条开始，并围绕它完成一个圆圈。

菜单图标的其他两个栏有一个更简单的任务——我们只是要旋转它们并与圆心对齐。 一旦我们将所有形状组合在一起，我们就可以将文件导出为 SVG 并将其导入 SVGator。

创建动画

让我们首先将第一个形状添加到时间轴并对其应用 Path Animator。 对于初始状态，我们只希望中间的水平线可见，而路径的其余部分保持隐藏。 要实现它，请将破折号的长度设置为等于汉堡线的长度。 这将使我们的菜单图标中间直线。 要找到正确的值，您可以使用汉堡包的其他行之一的长度。 您可以从时间线或应用右侧栏中的“属性”面板复制它。

然后将以下间隙的长度设置为大于路径剩余长度的值，使其变得透明。

我们动画的初始状态现在已经准备好了。 接下来发生的是我们把这条线变成一个圆圈。 为此，需要同时发生两件事。 首先，我们使用Offset沿路径移动线。 其次，我们改变虚线的宽度，使线条更长，覆盖整个圆圈。

准备好圆圈后，让我们来处理关闭图标。 和之前一样，我们需要同时添加两个动画。 首先，我们希望顶线向下倾斜（45 度），底线向上移动（-45 度），直到它们对称地相互交叉。 其次，我们需要将线条稍微向右移动，以使它们与圆圈对齐。

您可能还记得前面的示例，在 SVGator 中，默认情况下变换原点位于左上角。 这对我们来说非常方便，因为在这种情况下，这正是我们希望他们出现的地方。 我们需要做的就是应用正确的旋转角度。

在将线条与圆对齐时，请注意我们不必单独移动它们。 我们可以将包含这两条线的组添加到时间轴，并使用单个位置动画器将它们一起设置动画，而不是向两条线都添加 Animator。 那是一个漂亮、干净的文件结构得到回报的时刻之一。

接下来要做的是添加一个反向动画，将关闭按钮变回汉堡菜单。 为此，我们基本上可以按照相反的顺序执行前面的步骤。 为了加快速度，复制并粘贴时间轴上的现有关键帧——这是 SVGator 在过去几个月推出的又一改进。

完成后，不要忘记调整计时功能。 在这里，我决定对所有元素使用Ease-in-out效果。 我们的图标已准备好采取行动。

执行

尽管实现微交互远远超出了本文的范围，但让我花点时间简要描述一下如何在实际项目中实现这种动画。

插图和装饰动画通常更直接。 很多时候，您可以直接使用 SVGator 生成的 SVG 文件。 不过，我们不能这样说我们的图标。 我们希望当用户单击按钮打开菜单抽屉时触发动画的第一部分，并且当用户第二次单击按钮关闭菜单时播放动画的第二部分。

为此，我们需要将动画分割成几个单独的部分。 我们不会在这里讨论实现此类动画的技术细节，因为它在很大程度上取决于您正在使用的环境和技术堆栈； 但至少让我们检查生成的 SVG 文件以提取关键的动画状态。

我们将首先隐藏背景并调整画布的大小以匹配图标的尺寸。 在 SVGator 中，我们可以随时执行此操作，并且对我们的画布大小没有任何限制。 我们还可以编辑图标的样式，例如笔划的颜色和宽度，并使用右上角的开关测试您的图形在深色背景上的外观。

准备好后，我们可以将图标导出为 SVG 并在文本编辑器中打开它。

您在文档正文中看到的元素是图形的组成部分。 您还应该注意到第一行代码非常长。 在打开的<svg>标记之后，有一个<style>元素，里面有很多缩小的 CSS。 这就是所有动画发生的地方。

 <svg viewBox="0 0 600 450" fill="none" xmlns="https://www.w3.org/2000/svg"><style>@-webkit-keyframes kf_el_VqluQuq4la_an_DAlSHvvzUV… </style> <!-- a very long line of code that contains all the animations --> <g> <g data-animator-group="true" data-animator-type="0"><g> <g data-animator-group="true" data-animator-type="1"><path d="M244 263H356" stroke-linecap="round"/></g> <g data-animator-group="true" data-animator-type="1"><path d="M244 187H356" stroke-linecap="round"/></g> </g></g> <path d="M244 225H355.5C369 225 387.5 216.4 387.5 192C387.5 161.5 352 137 300 137C251.399 137 212 176.399 212 225C212 273.601 251.399 313 300 313C348.601 313 388 273.601 388 225C388 176.399 349.601 137 301 137" stroke-linecap="round"/> </g> </svg>

SVGator 为我们缩小代码真的很棒。 但是，我们必须撤消它。 完整编写 CSS 代码后（您可以在浏览器的开发工具中或在许多在线代码格式化程序中执行此操作），您会看到它是一个很长的@keyframes列表，后跟一个id规则列表，使用@keyframes在他们的animation属性中。

代码可能看起来不可读（即使格式很好），而是非常重复。 一旦你理解了基本规则，遵循它就不再那么难了。 首先，我们有@keyframes 。 每个动画元素都有自己的@keyframes @-rule。 它们的排序顺序与 SVGator 中的元素相同。 因此，在我们的例子中，第一个 @-rule 适用于汉堡图标的中间栏，第二个适用于顶部栏，依此类推。 里面的关键帧也与 SVGator 中创建的关键帧的顺序相匹配：

 @keyframes kf_el_VqluQuq4la_an_DAlSHvvzUV{ /* middle bar animation */ 0%{ stroke-dasharray: 112, 2000; /* initial state */ } 25%{ stroke-dasharray: 112, 2000; } 50%{ stroke-dasharray: 600, 2000; /* turns into a circle */ } 75%{ stroke-dasharray: 600, 2000; /* back at initial state */ } 100%{ stroke-dasharray: 112, 2000; } }

您现在需要做的就是使用关键帧中的这些值来编码您的交互。 前面还有很多工作要做，但感谢 SVGator，关键部分已经完成。

接下来发生的事情是另一个故事。 但是，如果您想看看这个动画在实践中如何工作的示例，这里有一个小 CodePen 供您使用：

该示例使用 React 构建，并使用状态来切换 CSS 类并触发相应 CSS 值之间的转换。 因此，不需要animation属性和@keyframes @-rules。

您可以使用 SCSS 代码顶部列出的一组 CSS 自定义优先级来控制图标的样式以及过渡的持续时间。

示例#3：动画插图

对于本文的第三个也是最后一个示例，我们将创建一个带有轨道粒子的原子的动画插图。

虚线和虚线

在前面的两个示例中，我们利用了虚线 SVG 路径。 虚线很酷，但你知道 SVG 也支持虚线吗？ SVG 中的虚线不多，不少于圆顶的虚线，虚线的长度等于 0。

如果我们可以有很多点的路径，谁说我们不能有一个点的路径？ 为笔画的偏移设置动画，您将获得一个沿着您想要的任何路径的圆圈动画。 在这个例子中，路径是一个椭圆，一个圆代表一个轨道粒子。

准备文件

由于没有 SVG 元素可以同时具有两个笔划，因此对于每个粒子，我们需要两个椭圆。 第一个是轨道，第二个是粒子。 将它乘以三，再与中间的另一个圆圈结合起来作为原子核，这就是：一个简单的原子插图，可以制作动画了。

注意：在撰写本文时，在 Figma 中创建虚线是一项艰巨的任务。 您不仅不能将破折号的长度设置为零，而且您也不能在破折号之间创建足够长的间隙以覆盖整个路径。 当涉及到导出时，您的所有设置都消失了。 尽管如此，如果您正在使用 Figma，请不要灰心。 我们将在 SVGator 中轻松解决所有这些问题。 如果您使用 Sketch、Illustrator 或类似软件，则根本不会遇到这些问题。

创建动画

将 SVG 文件导入 SVGator 后，我们将从修复虚线开始。 如上所述，要实现完美的圆形点，我们需要将虚线长度设置为零。 我们还将间隙的长度设置为等于路径的长度（从上面复制）。 这将使我们的点成为唯一可见的点。

三个粒子都准备好后，我们可以添加新的关键帧并将偏移设置为路径的一个完整长度。 最后，我们稍微调整一下偏移值，让点的位置感觉更随机一些。

请记住，如果您发现动画太快或太慢，您可以随时在设置中更改其持续时间。 目前，SVGator 支持长达 30 秒的动画。

最后，我为整个图形添加了一点反弹。

现在动画已准备就绪，可以用作加载器图形了。

关于可访问性的简短说明

如您所见，使用 SVG 可以实现的功能几乎没有限制。 路径动画是其工具包中非常重要的一部分。 但正如一位智者所说，权力越大，责任越大。 请不要过度使用它们。 动画可以为您的产品增添活力并取悦用户，但过多的动画也会破坏整个体验。

另外，考虑允许用户禁用动画。 患有晕动病和其他相关疾病的人会发现这样的选择非常有帮助。

结论

这就是今天的内容。 我希望您通过路径动画的可能性享受这次旅程。 要亲自试用它们，只需访问 SVGator 的网站，您还可以了解它的其他功能和定价。 如果您有任何意见或问题，请不要犹豫，在评论中添加它们。 请继续关注 SVGator 的下一次更新——还有许多其他令人惊叹的新功能已经在开发中！

延伸阅读

• “SVG 线动画的工作原理”，Chris Coyer SVG 路径动画的插图指南，精美地解释了它们的实际工作原理。
• “SVG 和设计工具实用指南”，Mikolaj Dobrucki SVG 基础知识的广泛指南，可帮助您了解设计工具如何生成 SVG，以及如何使用它来发挥自己的优势。
• “Revisiting Prefers-Reduced-Motion, The Reduced Motion Media Query,” Eric Bailey对动画和可访问性主题的精彩介绍。
• “如何创建路径动画”，SVGator关于路径动画师的简短而甜蜜的 YouTube 视频教程

有用的资源

• SVGator Path Animations从其原始登录页面阅读有关 Path Animator 的更多信息。
• SVGator 教程一系列视频教程，解释 SVGator 的关键特性。
• SVGator 帮助中心解答有关 SVGator、其功能和会员计划的最常见问题。