如何将“ animateTransform”用于嵌入式SVG动画

今天，我们将逐步指导您使用animateTransform生成带有SVG（可缩放矢量图形）的内联动画的基础知识。

如果您是SVG的新手，我建议您查看可伸缩矢量图形（SVG）入门，以快速入门 。

您将要学习的技术将允许您创建复杂的图标和图像动画，而无需单个GIF，JPEG或PNG，JavaScript零且没有最微弱的Flash细语。

您创建的动画将是易于编辑的，因为它们是纯代码，并且在查看结果时仅占用几KB的宝贵带宽。

开始之前

要对SVG形状进行动画处理，首先需要具有创建形状的能力。 我发现创建SVG的最简单方法是使用Bohemian Coding中的Sketch 。 如果您不拥有Sketch，则可以免费使用30天的本教程试用版。

我们将处理SVG代码，因此在Sketch中绘制形状后，请在其周围创建一个切片并将该切片导出为SVG文件。

然后，您将能够在代码编辑器（例如Sublime Text）中打开导出的文件，并从内部复制SVG代码。 您需要的只是从开始标记到结束标记的代码。

例如，Sketch为上图所示的蓝色矩形生成以下SVG代码：

为了使代码在视觉上更易于使用，我们将对代码进行一些小的更改。

将svg元素的width和height为100%然后删除viewBox设置。 还要删除Generator注释以及title ， desc ， defs和g元素。

您应该以如下形式结束：

将该代码放入HTML文档中，然后在浏览器中查看时，您应该在页面上看到与在Sketch中看到的相同的蓝色矩形：

注意：上图在背景中包括X和Y轴，因为您需要了解它们才能创建动画。 您很快就会了解原因。

“ animateTransform”做什么？

简短的答案是， animateTransform元素通过在要应用SVG的形状上设置变换属性来生成动画。

鉴于此，逻辑上的下一个问题是：

好的，那么“转换”会做什么？

将transform设置添加到形状后，您可以修改该形状在2D空间中的显示方式。 您可以执行五种不同类型的转换：

1. translate
   
2. scale
   
3. rotate
   
4. skewX
   
5. skewY

animateTransform属性使您可以在变换的不同状态之间进行动画处理，因此在开始制作动画之前，了解变换实际上是如何工作的很重要。

变换和2D空间

因为变换是在2D空间中进行的，所以它们的设置都与在X / Y轴上绘制的X和Y坐标有关，正如您先前在蓝色矩形后面看到的那样。

• X轴是2D空间中的水平线， Y轴是垂直线。 默认情况下，每个形状在X和Y轴上都从0开始。
• 从X轴上的0位置开始，正值对应于向右移动，负值对应于向左移动。
• 从Y轴的0位置开始，正值对应于向下移动，而负值对应于向上移动。

如果这还没有完全意义，请不要担心，因为当您在下面看到每种转换类型的示例时，它将变得更加清晰。

也不用担心这些转换的代码，因为当我们着手创建动画时我们将介绍它。 首先，我只想让您了解五种类型的转换实际要做的事情。

翻译

这会在X轴（水平）和Y轴（垂直）上移动形状的位置。

例如，这是我们的蓝色矩形，其在X （水平）轴上的translate值为150 ，在Y （垂直）轴上的translate值为20 ：

请记住，在上一节中， X轴上的正值对应于向右移动，而Y轴上的正值对应于向右移动。

通过将X的translate值设置为正150 ，我们的矩形向右移动了150个像素。 将Y的值设置为正20可将矩形向下移动20个像素。

规模

这会将形状的整体大小乘以X轴（宽度）和Y轴（高度）。

比例设置用作形状原始大小的倍数。 例如，如果将X比例设置为3则它将使形状变宽三倍。 如果我们将Y比例尺设置为1.25它将使形状高出四分之一倍，如下所示：

旋转

这样可以围绕给定点旋转形状度。

通过设置旋转形状的度数来进行旋转。 例如，这是我们的矩形旋转了45度：

默认情况下，形状将绕其左上角旋转，但您也可以使其绕其他点旋转。 我们将在本教程的后面部分介绍如何完成此操作。

歪斜

这会沿X（水平）轴倾斜形状。

沿X轴倾斜也可以以度为单位。 例如，在下面的图像中，我们的矩形沿X轴倾斜了20度：

偏斜

这会使形状沿Y（垂直）轴倾斜一定角度。

SkewY工作方式与SkewX ，只有转换沿Y轴垂直发生，如下所示：

动画变换

现在您知道了转换的实际作用，可以开始在不同转换状态之间创建动画。 基本过程包括三个步骤：

1. 设置转换的初始状态： from状态。
   
2. 设置第二个转换状态： to状态。
   
3. 设置时间和重复之间的动画过渡 from和to 州。

通过一个实际的例子可以最好地理解这一点，因此让我们开始对translate转换进行动画处理。

动画平移转换

你会记得，早些时候，我们开始与我们的蓝色长方形在其默认的位置0 0 ，即0的X轴和0的Y轴。 我们将把这个位置设置为我们的from状态。

然后我们研究了该相同的蓝色矩形的与翻译的设定例150 20施加的，即150上的X轴和20上Y轴。 我们将此位置设置为我们to声明的位置。

使用animateTransform我们可以使矩形在两秒钟内在我们的from和to之间平滑滑动。

您的SVG形状（在这种情况下为矩形）将需要同时具有开始和结束标记，例如 。

animateTransform属性应放在这些标签之间，如下所示：

查看animateTransform标记内设置的属性。 这些是控制动画运行方式的因素。

我们将type设置为翻译，这意味着我们将应用translate转换类型。 按照计划，我们将0 0位置设置为from状态，将150 20位置设置为to状态。

begin的值设置为0s ，这意味着动画将在加载后零秒开始，而dur设置为2s ，这意味着动画将运行两秒钟。 最后，我们将repeatCount设置为indefinite这意味着动画将循环播放。

这为我们提供了以下动画：

动画化其他转换

旋转所有其他四种类型的转换的过程完全相同。 将type值设置为所需的任何转换类型后，输入from和to转换状态的值。

例如，我们可以使用以下animateTransform设置将矩形缩放到您在比例转换的上一节中看到的尺寸：

由于比例转换设置会乘以形状的原始大小，因此我们在from设置中以1 1开头。 这样做会将其原始大小设置为1的倍数。

我们to的设定3 1.25将我们的动画改造规模高达X轴原宽度的三倍，和一又四分之一在Y原来的高度轴。

注意 ：您会发现实际的浏览器内动画运行起来比上面看到的屏幕截图GIF平滑得多。

动画多重转换

我们还可以将到目前为止创建的两个动画组合在一起，以同时进行平移和缩放。 您只能在rect标签内使用单个animateTransform标签，因此要使用多个动画，您需要并入一组g标签，这些g标签代表一组SVG对象。

要使此工作有效，请在现有rect标签周围添加开始和结束标签：

然后在标记之外但在 标记之前添加第二个动画。 在这种情况下，我们将重新引入翻译转换：

现在，我们同时具有缩放动画和转换动画：

您可以为每个形状或组一次使用animateTransform 。 如果您需要添加更多的动画，请在代码周围包装另一组标签，并将其他animateTransform标签嵌套在其中。

让我们快速看一下其余三种转换类型，每种转换类型都是通过仅将type ， from和to更改to设置而创建的，并且还与我们的原始翻译动画结合在一起的。

旋转动画（加上翻译）

在这个例子中type已经被设置为rotate ， from已经被设置为0以开始没有旋转，并to已被设置为45 ，所以我们可以在两秒内旋转45度：

SkewX和SkewY动画（加上翻译）

在以下两个动画中， type分别设置为skewX和skewY ， from设置为0开始无倾斜， to设置为20所以我们在两秒钟内倾斜了20度：

实际示例：加载图标

您可以使用这些基本技术为动画创建无限的可能性，但是最直接有用的方法之一是创建加载图标，而您以前可能依赖动画GIF。

这是我使用Sketch在大约五分钟内创建的加载图标：

然后，我将其导出到SVG文件，该文件提供了以下代码：

鉴于此图标在一个组中包含多个形状，并且正如我们从上面了解到的那样，您可以将animateTransform应用于一个组，我在最后一个标记之前添加了动画代码：

上面的代码将图标设置为从0到360度旋转，即一个完整的圆圈。

旋转轴

请注意，这次我在from和to设置中还包括了另外两个数字。 这告诉动画围绕形状自身的内部X / Y轴18 18上的一个点旋转，即给定尺寸为36x36像素的形状的中心。

这将产生以下动画：

同样，您的浏览器内动画将比上述GIF平滑，因此请务必检查出真实的东西 。 如您所见，将动画组合在一起非常容易快捷，您可以充分利用它们。

包起来

如果您还没有开始使用SVG动画，那么现在应该拥有所需的工具来开始一个良好的开端。

进一步阅读

• 动画加载程序SVG的出色Codepen示例
• 有关animateTransform如何在W3C工作的更多信息。
• 索取本教程的源代码副本，试用示例，并乐于创建自己的内联SVG动画！

翻译自: https://webdesign.tutsplus.com/tutorials/how-to-use-animatetransform-for-inline-svg-animation--cms-22296