网页设计要使用到的SVG动画制作工具，SVGATOR轻松实现SVG动画

2018年网络上最佳的图像格式是SVG。不仅SVG分辨率独立 – 意味着SVG图形在任何设备上都保持清晰，但SVG文件大小比其他竞争格式小。

SVG最受欢迎的功能之一是能够使用代码访问图形的各个部分，并使用CSS来更改填充颜色等属性。但是你知道你也可以在SVG文件中嵌入动画代码吗？

动画SVG可能很复杂，需要一些非常复杂的代码来实现。到目前为止，因为有了惊人的SVGator，你可以在你的浏览器中实际设计SVG动画。

自7个月前推出以来，SVGator凭借其简单易用的界面以及输出的模块化代码的质量赢得了大批粉丝。

开始使用SVGator

您可以像这样开始使用SVGator：首先，在您喜欢的图形应用程序中创建SVG文件 – 您可以使用Sketch或Illustrator，甚至可以在您喜欢的代码编辑器中手动编写SVG代码。接下来，登录SVGator站点（如果您还没有帐户，请创建一个帐户）。最后，单击“导入SVG”按钮将图形带入编辑器。一旦你的图形到位，你就可以开始制作动画了。

任何曾经使用动画应用程序的人都熟悉用户界面，这使得保持SVGator的学习曲线变得浅薄。在屏幕中央，您将看到您的SVG图形。在左侧，您将看到设计的不同元素分成列表。在右侧，您将看到一个上下文属性面板，该面板根据您选择的元素而变化。UI的底部是时间轴，用于将图形中的元素分隔为不同的通道，并允许您独立地为图形的不同部分设置动画。

使用SVGator进行动画制作

在SVGator中制作动画图形非常简单。只需从元素列表中选择一个元素，然后将其添加到时间轴，然后为其分配一个或多个动画师; 交替选择一个元素，添加一个动画师，元素和动画师都将添加到时间轴。您现在可以向动画师添加关键帧并设置其属性。

选择一个元素并将其添加到时间轴（1）。

您可以使用SVGator设置四种属性：位置，旋转，缩放和不透明度。但是不要让短名单欺骗你，因为你可以通过组合不同的动画元素来创建大范围的效果 – SVGator的未来计划包括路径动画，这将使元素能够沿着预定义的路径进行动画制作。

添加动画师，屏幕元素为“scale”，复选标记为“opacity”（2）。

除了定义动画和控制过渡的长度之外，您还可以添加缓动以获得更自然的动感。可用的缓动效果是线性的（这是一个恒定的速度），缓入（开始缓慢和加速），缓出（开始快速和慢速），以及轻松进入（开始缓慢，速度）起来，然后再慢下来）。

为比例动画师和不透明度动画师添加关键帧（3）。打开设置选项，确保您具有与图像相同的选项（4）。保存您的项目或导出（5）。

您还可以控制触发动画的内容。您可以选择循环播放动画，限制播放或在鼠标悬停时触发动画。

SVGator的代码

除了这些顶级工具，SVGator还具有代码管理器面板，因此您可以准确地看到应用程序生成的代码。

SVGator导出干净，格式良好的代码。因此，没有编码知识的设计人员可以使用它来设计动画，然后将该代码交给开发人员进行自定义，而不会出现任何解释问题。

选择SVGator

SVGator背后的团队创建了它，以帮助推广在网络上使用动画SVG。因此，他们对您可以创建的项目数量没有任何限制。无论您的设计和动画是什么，都将存储在您的帐户中，您可以随时返回和编辑您的文件。

如果您希望将Web图形提升到一个新的水平，那么动画SVG就是您的选择，而SVGator是您可以用来创建它们的最简单的工具之一。借助路线图中的新功能，这是获取这一热门新工具的最佳时机。