今天，我们将逐步指导您使用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空间中的显示方式。 您可以执行五种不同类型的转换：
-
translate
-
scale
-
rotate
-
skewX
-
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轴垂直发生，如下所示：
动画变换
现在您知道了转换的实际作用，可以开始在不同转换状态之间创建动画。 基本过程包括三个步骤：
- 设置转换的初始状态：
from状态。
- 设置第二个转换状态：
to状态。
- 设置时间和重复之间的动画过渡
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