如何使用 SVGator 3.0 在一处创建、编辑和动画化 SVG

本文得到了 SVGator 亲爱的朋友的大力支持，他们热衷于设计和制作独特、高质量和令人难忘的动画。 谢谢！

SVGator 正在不断发展，并且正在不断发展。 三年前，我们发表了一篇关于 SVGator 基本使用的综合介绍。 当时它只是一个应用程序，仅用于动画在其他应用程序中创建的 SVG 文件。 两年前，我们向您介绍了新版本的 SVGator 及其改进的动画功能。 这一次，我们将推出一个新的主要版本的 SVGator，它提供了一个成熟、完整的环境，用于从头开始绘制和动画 SVG 图形。

注意：本教程中介绍的一些 SVGator 功能是付费的。 在免费计划中，您可以创建和导出无限数量的 SVG 图形。 您还可以使用基本动画功能并每月导出 3 个动画。 高级动画功能可通过付费计划获得，起价为 11 美元/月。

在本文中，我们将遵循创建自定义 SVG 加载器的过程，从头开始绘制并应用各种视觉效果，通过创建不同类型的动画，到导出文件并准备在 Web 上使用。

我们首先创建一个新的空白文件并更改其背景颜色。

从这里开始，我们可以开始绘制我们稍后要制作动画的插图。 SVGator 允许您绘制所有标准的 SVG 形状，例如椭圆、矩形和多边形，以及使用钢笔和铅笔工具来绘制您自己的。 您还可以使用布尔函数将形状相互组合。

为了让我更容易创建所需的形状，我首先在画布中心画了一个圆圈作为指南。 幸运的是，得益于智能的导向系统和捕捉功能，SVGator 使对齐和测量元素变得非常简单。 您还可以使用网格和标尺来获得更好的精度和保真度。

接下来，使用钢笔工具，我们大致按照下方圆形的形状绘制第一个斑点。 铅笔工具也可以很好地实现这一目的。 真正酷的是 SVGator 的铅笔工具创建的形状通常比其他应用程序中的同类工具少得多的节点点，这使得结果不仅看起来更平滑，而且文件大小也更轻。

在 SVGator 中创建和编辑形状可能感觉与在其他矢量工具中有些不同，但是一旦您习惯了它，这真的是一件轻而易举的事。 同样重要的是要注意 SVGator 的所有绘图功能都是完全免费的，因此您可以免费使用它作为您的 SVG 创建软件。

准备好第一个 blob 后，是时候对其进行一些样式设置了。 在这里，我们偶然发现了该应用程序最大的竞争优势之一。 其他允许您导出 SVG 文件的流行矢量图形应用程序通常必须利用它们的功能来适应过多的格式和用例。 同时，应用程序主要关注用户界面，主要满足 HTML 和 CSS 属性的可能，很少喜欢 SVG 特定的功能，例如笔划标记或过滤器。

SVGator 专门用于创建 SVG 文件，特别是充分利用了这种格式所提供的功能。 这包括特定于 SVG 如何处理描边、填充、渐变元素（您听说过 SVG 渐变的spreadMethod属性吗？）、过滤器（例如模糊、阴影或棕褐色）和许多其他选项的选项。

它还允许您设置样式（您的填充、笔触、效果等），确信最终结果将符合预期，因为所有这些功能都是专门为 SVG 文件创建的。

在我们的例子中，一个渐变填充和一个渐变描边就可以了。 我还在元素上应用了一个光模糊滤镜作为最后的润色。 请注意，由于 SVGator 使用原生 SVG 过滤器而不是 CSS，它允许您分别控制两个轴的模糊属性。 在这种情况下，我只应用了 x 轴模糊。

接下来，我们可以复制 blob 并再次使用钢笔工具创建另外两个不同的 blob。 钢笔工具的工作方式使修改形状变得非常容易，而不会失去其流畅、连续的线条。

作为插图的最后一个元素，我们添加了一些随机放置的发光点。 它们只不过是应用了渐变填充的圆圈。

我们的加载器在其初始状态下已准备就绪。 现在，是最有趣的部分了：动画！

我们将首先为插图的哪个元素设置动画并不重要。 在我的例子中，我从为火花设置动画开始。 通过为每个元素添加一个位置动画器，我们可以创建复杂的路径动画。 路径动画允许我们使元素随着时间的推移遵循任何形状的路径。 在我们的例子中，将使闪光在画布周围循环，以创造一种围绕插图的中心元素飞行的印象。 我们还可以使用 Scale 和 Opacity Animators 使闪光看起来离观察者越来越近，并增强 3D 空间中的运动错觉。

注意：如果您想了解有关创建路径动画的更多信息，我建议您观看本教程：“运动路径动画 - 沿自定义路径为任何对象设置动画。”

要为 blob 设置动画，可以使用 Morph animator。 它允许我们及时修改形状并在这些状态之间创建平滑过渡。 为了在两个形状之间实现漂亮、干净的过渡，我们在 Morph 动画师的时间轴上添加了一个关键帧，并使用钢笔工具修改了形状——就像我们在绘制额外的斑点时所做的那样。

如果您想了解有关创建变形动画的更多信息，本教程不仅会向您介绍基础知识，还会将其提升到一个全新的水平：“高级变形动画教程”。

每个动画的一个重要部分是它的计时功能。 对于火花，我主要使用 Ease In Out 计时功能。 这使得点在到达轨道的狭窄转弯时减速并在直线延伸时加速，帮助运动看起来更接近在多维空间的这种视角下看起来的样子。

对于 blob，我还使用了 Ease In Out 函数。 您会注意到，这两个计时功能都与默认情况下的 Ease In Out 功能不同。 我使用贝塞尔曲线界面将它们“锐化”了一点。 这让我可以让动作看起来流畅自然，没有突然的转弯和打嗝，也没有太明显的减速。

经过一些小的调整后，文件就可以导出了。 新版本的 SVGator 结合了预览功能和导出功能。 多亏了这一点，您可以在测试和更改导出设置的同时实时浏览器预览动画。

在我们的例子中，我们希望动画充当无限循环。 您还可以控制图形的行为，以在加载或用户的操作（例如单击或滚动）时显示。

导出的文件与我们在应用程序中创建的动画完美匹配，可以在网络上使用。

我希望你喜欢这篇文章，它会激励你在你的工作中用 SVG 创造最神奇的东西！

下一步去哪儿？ 您可以在下面找到一些有用的资源来继续您的 SVG 和 SVGator 之旅：

• SVGator 教程
  一系列简短的视频教程，可帮助您开始使用 SVGator。
• SVGator 帮助中心
  有关 SVGator、其功能和会员计划的最常见问题的解答。
• 使用 SVGator 释放路径动画的力量
  广泛介绍路径动画以及如何使用 SVGator 创建它们。