svg动画制作_如何使⽤SVGator轻松制作SVG动画
svg动画制作
SVG动画是在⽹络上使⽤动画GIF的绝佳选择，但并不总是那么容易。 在本教程中，我将说明如何使⽤名为“ SVGator”的在线⼯具轻松地为SVG设置动画。
SVGator允许您导⼊SVG⽂件，然后为这些SVG中的各个元素设置动画。
使⽤SVGator对SVG进⾏动画处理
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.创建⼀些关键帧
关键帧是时间轴上某些属性发⽣更改的点。 点击+按钮，将其添加到元素的时间轴中：
然后将进度条（播放头）沿时间轴移动到另⼀个点，并添加另⼀个关键帧。 选择第⼆个关键帧后，我们可以编辑元素的旋转属性。 在这⾥，我们已经声明，到第⼆个关键帧，我们的元素应该旋转⼀次（如果愿意，我们还可以指定旋转度）。
单击播放按钮，您将看到动画循环。
svg图形5.对第⼆个齿轮重复
现在，将另⼀个Animator添加到时间轴中，以获取较⼩的齿轮。 完全按照我们第⼀个步骤完成动画。
完成动画制作后，您可以导出最终的SVG，以准备在⽹络上使⽤。
6.更复杂的动画
如果您观看视频，您会看到我从Envato Elements： 拍摄了另⼀个图形，然后对其进⾏了动画处理。 这是最终结果：
该过程与我们介绍的过程相同：确定要设置动画的元素，添加动画器，在时间轴上放置关键帧，更改缓动和属性，然后导出！ 此循环动画中有更多元素（SVGator⽀持最多300个），但是通过尝试重新创建此乡村风景场景，您可以看到现在可以做什么。
结论
SVGator提供了⼀种简单的⽅法来为通常可能要转换为GIF的各种动画创建SVG。 它使您可以进⾏精细控制，可以保存和编辑项⽬，并且最终结果具有可伸缩性和超轻量级的特点。 试试看，让我们知道您的想法！
svg动画制作

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。