滨海新区网建文件：如何使用SVGator动画您的SVG文件

滨海新区网建文件提出可伸缩矢量图形(SVGS)是非常棒的，如果你想要设计移动友好的网站(你应该！)。它们是完全可伸缩的，轻量级的，最好的部分是你可以给他们动画(与普通图像不同)。问题是，如果级联样式表(CascadingStyleSheets，CSS)不那么方便，那么动画SVG可能会很复杂。

幸运的是，有许多工具可以简化整个动画过程。在本文中，我们将向您介绍我们的最爱之一，名为SVGator..然后，我们将教您如何使用它来动画SVG文件。

我们开始工作吧!

为什么要使用svgs？

乍一看，SVG看起来就像任何其他类型的图像。但是，如果您查看过去的外观，由于几个原因，这种特殊的文件类型是独特的。让我们谈谈最重要的问题：

· 是基于向量的。在大多数情况下，您在网站上看到的图像是由像素组成的。有了SVG，一切都是关于向量的这与接下来的几点有关。

· 它们具有高度的可扩展性。基于向量的文件保持质量不管你显示的是什么分辨率。这使得svgs成为您可以使用的最适合移动的文件类型之一。

· 它们很轻。因为您处理的是向量而不是像素，所以SVG文件更轻量级，这意味着加载时间更短。

· 你可以动你的矢量。有了SVG，你可以使用CSS和JavaScript来激活你的矢量。例如，您可以使用GIF实现类似的效果，但是这些效果往往非常重。

尽管有很多优点，但SVG并不适合每一种情况。如果您想要显示复杂的图形，例如照片，您最好使用传统的文件格式，如PNG或JPEG。

但是，当涉及到徽标、图标和其他简单的图形时，您可以使用向量复制，使用SVG更有意义。这种方法不仅保证了它们的响应能力，而且还能缩短几毫秒的时间从你的装货时间.

在过去，我们已经讨论过如何动画SVG文件使用手动CSS方法。现在，让我们来看看您可以使用专门的服务做些什么。

SVGator简介

SVGator是一个非常简单的工具。它允许您导入SVG文件并使用关键帧(预定义的效果集合)动画它们。你有很多控制你的动画的外观和他们的时间。它甚至使您能够将多种类型的动画添加到同一个SVG文件中，如果使用CSS添加动画，可能会变得复杂。

使用SVGator，您可以使用矢量的位置、旋转、缩放和不透明度。这不是最全面的设置列表，但是工具本身很容易使用。

主要特点：

· 导入和动画您最喜欢的SVG文件。

· 转换你的文件的位置，旋转，比例和不透明度。

· 使用关键帧完全控制您的动画。

· 根据你的意愿混合和匹配动画。

价格：免费七天试用，计划从每月18美元开始更多信息

如何使用SVGator动画您的SVG文件

开始使用SVGator很简单。只需单击登录按钮位于主页上，并设置一个新帐户。您不需要输入任何支付信息来使用平台的七天试用，这样您就可以在不提交服务的情况下对服务进行彻底的测试。

一旦您的帐户准备就绪，平台将您重新定向到仪表板，在那里所有的魔术发生。一旦打开SVGator，您就会看到一个测试映像，其中包括一些简单的动画，这些动画用于向您展示它的功能：

若要查看此测试动画，请单击玩，打，踢按钮位于屏幕左下角：

您可以通过单击进口SVG按钮在屏幕顶部。执行此操作时，SVGator将自动检测其元素并将其分层到专用的 左边的选项卡：

例如，滨海新区网建文件秒表由三个元素组成。内圈和外圈，顶部的突出按钮。如果您单击左侧选项卡上的每个组件，它将突出显示其相应的部分。

在屏幕底部，有一个时间线显示您添加到SVG文件中的所有动画。时间线上的菱形图标表示关键帧，您可以移动它们以修改动画的时间：

默认情况下，SVGator在其时间线上只显示3秒，但是您可以通过单击屏幕左侧的计时器旁边的齿轮图标来修改它：

除了调整动画的整个运行时之外，您还可以启用一个“mouseover”选项，这意味着除非您将光标放在动画上，否则动画不会触发。

现在，继续播放时间线上的关键帧，这样你就能感觉到时间上的差异。准备好后，可以通过单击要使用时间线左边的选择器来调整的元素来添加新的动画。

在突出显示元素之后，请查看动画师选项卡并单击要添加的效果：

例如，如果我们选择不透明度整个SVG的效果，我们可以使它淡出随着动画的进展。为此，让我们在秒表要素：

您会注意到我们将初始关键帧设置为2秒标记。但是，SVG将以10%的不透明度开始，除非我们通过在时间线开始时添加100%不透明的关键帧来关闭循环：

要向每个动画添加额外的关键帧，只需单击时间线旁边每个元素中的蓝色菱形即可。一些动画，如不透明度，则只能使您将两个关键帧相加，而其他几个关键帧，例如位置，可以支持更多。

现在，您的两个关键帧已经就位，因此单击玩，打，踢按钮可以看到秒表随着时间的推移而淡出：

总之，用SVGator添加动画可以归结为每个元素选择您想要的效果，并添加关键帧来表示它们的进度。您可以混合动画并调整它们的值以获得独特的结果，但是过程始终保持不变。

一旦您对动画感到满意，就可以使用出口SVG按钮在屏幕顶部并保存它们。然后，只需在安装中支持SVG文件类型之后，将它们上传到WordPress。

结语

添加一点天赋，你的网站使用动画可以是一个很好的触摸。使用SVGS，您可以确保您的图形将缩放，无论您的访问者使用什么服务。这样的话，你的动画将永远是令人叹为观止的。

但是，滨海新区网建文件动画SVG文件需要您使用CSS。如果你不介意修改一些代码，那就没有问题了。然而，它可能很难得到你想要的确切效果，特别是如果你不是一个编码专家。使用诸如SVGator，您可以选择要实现的动画，测试它们，然后将生成的SVG文件添加到您的网站中。

你有任何关于如何动画SVG文件的问题吗？让我们在下面的评论部分讨论它们吧！