svg动画制作_如何使用SVGator轻松制作SVG动画

svg动画制作

SVG动画是在网络上使用动画GIF的绝佳选择，但并不总是那么容易。 在本教程中，我将说明如何使用名为“ SVGator”的在线工具轻松地为SVG设置动画。

SVGator允许您导入SVG文件，然后为这些SVG中的各个元素设置动画。

使用SVGator对SVG进行动画处理

SVGator快速入门

您可以通过访问www.svgator.com找到SVGator 。

SVGator是一种在线SVG动画工具，其订阅费用（在撰写本文时）每月18美元，如果每年支付，则每月12美元。 提供7天免费试用，因此您可以在提交之前先看一下。 它超级易于使用，不需要任何编码技能，并且是跨平台的。

登录后，将显示所有已保存的项目。 您可以复制，删除，下载它们，也可以在动画编辑器中对其进行编辑。 如果您曾经使用过Adobe Animate，After Effects或任何视频编辑软件，都将对编辑器UI感到熟悉。 主阶段保存您的动画，而时间轴则在底部显示您的图层和关键帧：

左侧面板是Elements树的主页，显示了SVG中的元素，在右侧，您还有更多选择，还有一个代码编辑器，它显示了您正在创建的代码。

1.足够多的东西，让我们动起来！

我们将使用SVGator对Envato Elements中的两个图形进行动画处理。 首先是来自“ 专业网络图标” ：

通过点击Import New在SVGator的仪表板页面上开始。 上载您的静态SVG文件，并观看创建的新项目。

在动画编辑器的“ 元素”面板中，您会注意到SVG文件中包含的所有元素的下拉列表。 它们的名称可能不是最佳名称，但是您可以通过在导入项目之前确保在Adobe Illustrator（或您的编辑软件）中正确命名SVG的所有图层来改善它们的名称。

2.选择要动画的元素

您可以通过在“元素”列表中单击该元素或在舞台上单击该元素本身来选择要设置动画的元素。 点击项目旁边的+按钮将在时间轴上添加一个图层。 在这里，我们选择了大齿轮，它有一个奇怪的图层名称（但这没关系）：

3.选择一个动画师

将元素添加到时间线后，我们现在需要从列表中选择一个动画器 。 可用的选项有：

• 位置
• 旋转
• 规模
• 不透明度

在选择元素的同时，我们将点击Rotate ，然后选择所需的缓动类型：

我们还可以设置该动画的属性，但是首先我们需要在时间轴上创建一些关键帧。

4.创建一些关键帧

关键帧是时间轴上某些属性发生更改的点。 点击+按钮，将其添加到元素的时间轴中：

然后将进度条（播放头）沿时间轴移动到另一个点，并添加另一个关键帧。 选择第二个关键帧后，我们可以编辑元素的旋转属性。 在这里，我们已经声明，到第二个关键帧，我们的元素应该旋转一次（如果愿意，我们还可以指定旋转度）。

单击播放按钮，您将看到动画循环。

5.对第二个齿轮重复

现在，将另一个Animator添加到时间轴中，以获取较小的齿轮。 完全按照我们第一个步骤完成动画。

完成动画制作后，您可以导出最终的SVG，以准备在网络上使用。

6.更复杂的动画

如果您观看视频，您会看到我从Envato Elements： Country Landscape中拍摄了另一个图形，然后对其进行了动画处理。 这是最终结果：

该过程与我们介绍的过程相同：确定要设置动画的元素，添加动画器，在时间轴上放置关键帧，更改缓动和属性，然后导出！ 此循环动画中有更多元素（SVGator支持最多300个），但是通过尝试重新创建此乡村风景场景，您可以看到现在可以做什么。

结论

SVGator提供了一种简单的方法来为通常可能要转换为GIF的各种动画创建SVG。 它使您可以进行精细控制，可以保存和编辑项目，并且最终结果具有可伸缩性和超轻量级的特点。 试试看，让我们知道您的想法！

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-easily-animate-svgs-with-svgator--cms-32181

svg动画制作