免费获取策划方案多一份参考,总有益处

它山之石

Tashan stone of

案例581

它山之石

SVG动画容易与热的新工具SVGator

来源:派臣科技|时间:2019-07-05|浏览:

2019年网络上最好的图像格式是SVG。SVG不仅独立于分辨率(即SVG图形在任何大小、任何设备上都保持清晰),而且SVG文件的大小也小于其他竞争格式。

SVG最流行的特性之一是能够使用代码访问图形的某些部分,并使用CSS更改填充颜色等属性。但是您知道还可以在SVG文件中嵌入动画代码吗?

SVG动画可能很复杂,需要一些相当复杂的代码才能正确处理。直到现在,因为有了这个神奇的SVGator,您实际上可以在浏览器中设计SVG动画。

自7个多月前SVGator发布以来,它以简单易用的界面和输出的模块化代码的质量赢得了大批粉丝。

从SVGator开始

您可以这样开始SVGator:首先,在您喜爱的图形应用程序中创建SVG文件—您可以使用Sketch、Illustrator,甚至在您喜爱的代码编辑器中手工编写SVG代码。接下来,登录SVGator站点(如果您还没有帐户,请创建一个帐户)。最后,单击“Import SVG”按钮,将图形导入编辑器。一旦你的图形就位,你就可以开始动画了。

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

动画与SVGator

在SVGator中动画图形非常简单。只需从元素列表中选择一个元素,并将其添加到时间轴中,然后为其分配一个或多个动画器;选择一个元素后,添加一个动画器,元素和动画器都会被添加到时间轴中。现在可以向动画器添加关键帧并设置它们的属性。

step-01

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

您可以使用SVGator动画四个属性:位置、旋转、缩放和不透明度。但是不要让这个简短的列表欺骗您,因为您可以通过组合不同的动画元素来创建大量的效果——SVGator的未来计划包括路径动画,它将允许元素沿着预定义的路径进行动画。

step-02

添加动画器,“缩放”为屏蔽元素,“不透明度”为复选标记(2)。

除了定义动画和控制过渡的长度外,您还可以为一个更自然的感觉动作添加缓动。可用的放松效果是线性的(这是一个恒定的速度),放松(开始慢,然后加速),放松(开始快,然后减速),放松(开始慢,加速,然后再次减速)。

step-03

为缩放动画器和不透明度动画器(3)添加关键帧。打开设置选项,确保与图像(4)具有相同的选项。保存项目或导出(5)。

您还可以控制什么触发动画。您可以选择循环动画,限制其播放,或在鼠标悬停时触发它。

SVGator的代码

除了这些顶级工具之外,SVGator还提供了一个代码管理器面板,因此您可以准确地看到应用程序正在生成什么代码。

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

选择SVGator

SVGator背后的团队创建它是为了帮助促进在web上使用动画SVG。因此,他们对您可以创建的项目数量没有任何限制。无论您设计和动画将存储在您的帐户,您可以返回和编辑您的文件在任何时候。

如果您希望将web图形提升到下一个级别,那么可以使用SVG动画,SVGator是您可以使用的最简单的工具之一。有了路线图上的新特性,现在正是学习这个热门新工具的最佳时机。

创建您的SVGator帐户,并开始动画向量今天。

留言

返回顶部

君
重庆网站建设它山之石SVG动画容易与热的新工具SVGator