网站建设使用热门新工具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的未来计划包括路径动画，这将使元素能够沿着预定义的路径进行动画。

添加动画师，屏蔽元素的“刻度”和复选标记（2）的“不透明度”。

除了定义动画和控制过渡的长度外，您还可以添加缓动以获得更自然的感觉动作。可用的缓动效应是线性的（这是一个恒定的速度），缓入（缓慢开始并加速），缓出（缓慢开始，缓慢开始）和缓出（开始缓慢，速度缓慢然后再减速）。

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

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

SVGator的代码

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

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

选择SVGator

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

如果您希望将网页图形带到下一个级别，那么动画SVG就是要走的路，而SVGator是您可以用来创建它们的最简单的工具之一。借助路线图上的新功能，这是挑选这款热门新工具的绝佳时机。