如何将“ 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代码:


    
    Slice 2
    Created with Sketch.
    
    
        
    

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

svg元素的widthheight100%然后删除viewBox设置。 还要删除Generator注释以及titledescdefsg元素。

您应该以如下形式结束:


  

将该代码放入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轴是垂直线。 默认情况下,每个形状在XY轴上都从0开始。
  • X轴上的0位置开始,正值对应于向右移动,负值对应于向左移动。
  • Y轴的0位置开始,正值对应于向下移动,而负值对应于向上移动。

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

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

翻译

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

例如,这是我们的蓝色矩形,其在X (水平)轴上的translate值为150 ,在Y (垂直)轴上的translate值为20

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

通过将Xtranslate值设置为正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. 设置时间和重复之间的动画过渡 fromto 州。

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

动画平移转换

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

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

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

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

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


    
  

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

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

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

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

动画化其他转换

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

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

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

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

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

动画多重转换

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

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


  
    
  
  

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


  
    
  
  
  

现在,我们同时具有缩放动画和转换动画:

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

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

旋转动画(加上翻译)

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

SkewX和SkewY动画(加上翻译)

在以下两个动画中, type分别设置为skewXskewYfrom设置为0开始无倾斜, to设置为20所以我们在两秒钟内倾斜了20度:

实际示例:加载图标

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

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

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


    
    loader01 2
    Created with Sketch.
    
    
        
            
            
            
            
            
            
            
            
            
            
            
            
        
    

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


        
    

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

旋转轴

请注意,这次我在fromto设置中还包括了另外两个数字。 这告诉动画围绕形状自身的内部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

你可能感兴趣的:(如何将“ animateTransform”用于嵌入式SVG动画)