今天,我们将逐步指导您使用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