评论

SVG动画教程

2019-09-12
7812浏览
1评论

SVG动画能够实现和CSS3动画类似的效果，除此之外还能够实现强大的路径动画，也就是使物体按照一定的路径移动。让我们跟着这篇SVG动画的入门教程开始学习吧。

SVG动画能够实现和CSS3动画类似的效果，除此之外还能够实现强大的路径动画，也就是使物体按照一定的路径移动。

从语法上看CSS代码是样式代码，而SVG动画，是SVG中的一些动画标签。

SVG 动画元素介绍

svg可以设置动画的元素有5个，分别为
<set>
<animate>
<animateColor>
<animateTransform>
<animateMotion>

接下来我们具体来看看每一个元素的作用

set

set用于设置属性值，可以用于实现延迟设置功能，也就是可以在特定时间之后修改某个属性值。

<svg height="400" width="400">
	<rect width="90" height="90" fill="yellow" >
        <set attributeName="x" attributeType="XML" to="60" begin="3s" />
    </rect>
</svg>

这里的attributeName是定义要设置的属性，attributeType是定义要设置属性的类型，to为定义的值，begin为延迟时间。后面会详细讲解。

animate

实现基础动画，跟css3中的animation类似。

<svg height="400" width="400">
    <rect width="90" height="90" fill="yellow" >
        <animate attributeName="x" from="160" to="60" begin="0s" dur="3s"/>
    </rect>
</svg>

animateColor

用于设置颜色的动画，不过颜色动画使用animate也可以实现，所以这个属性已经被废弃。

animateTransform

用于实现样式过渡动画，类似于css3中的transition属性

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
    <rect width="90" height="90" fill="yellow" >
        <animateTransform attributeName="transform" begin="0s" dur="3s"  type="rotate" from="1" to="90" repeatCount="indefinite"/>
    </rect>
</svg>

animateMotion

animateMotion 元素可以用于定义SVG路径动画。如下例子(例子中的path与动画无关，只是用于标示)

<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect width="20" height="20" fill="red"  >
        <animateMotion path="M0,0 Q50,60 80,140 T340,100" begin="0s" dur="20s" repeatCount="indefinite"/>
    </rect>
    
    <path xmlns="http://www.w3.org/2000/svg" d="M0,0 Q50,60 80,140 T340,100" id="svg_13" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/>
</svg>

效果如下

不过这个矩形不管运动到哪都是水平的，我们可以设置成文本照着path的方向做旋转

<svg width="360" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect width="20" height="20" fill="red"  >
        <animateMotion path="M0,0 Q50,60 80,140 T340,100" begin="0s" dur="20s" rotate="auto" repeatCount="indefinite"/>
    </rect>
    
    <path xmlns="http://www.w3.org/2000/svg" d="M0,0 Q50,60 80,140 T340,100" id="svg_13" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="5" stroke="#000000" fill="none"/>
</svg>

自由组合

自由组合也就是设置多个样式的动画，比方说同时设置位置和透明度的变化。只需设置多个animate即可

<svg width="320" height="320" xmlns="http://www.w3.org/2000/svg">
    <rect width="90" height="90" fill="yellow" >
    	<animate attributeName="x" from="160" to="60" begin="0s" dur="3s" repeatCount="indefinite" />
    	<animate attributeName="opacity" from="1" to="0" begin="0s" dur="3s" repeatCount="indefinite" />
    </rect>
</svg>

SVG 动画标签参数详解

前面章节中，我们了解了SVG具有四种主要的动画标签<set>,<animate>,<animateTranform>,<animateMotion>。

这一章主要讲其中参数的作用。

1、attributeName = <attributeName>

要变化的元素属性名称，可以是SVG标签上的属性，如font-size，width，height等，也可以是CSS属性，如opacity这些。这个属性跟下面的attributeType 一起使用。

2、attributeType=“CSS | XML | auto”

attributeType支持三个固定参数"CSS | XML | auto"，用来表明定义在attributeName上面的属性值。比如我们定义的属性是属于SVG标签上的属性，那么直接设置attributeType=‘xml’，如果是设置css属性，则设置type值为css。auto为默认值，自动判别attributeName的属性是属于XML还是CSS（实际上是先当成CSS处理，如果发现不认识，直接XML类别处理）。因此，如果你不确信某属性是XML类别还是CSS类别的时候，我的建议是不设置attributeType值，直接让浏览器自己去判断，几乎无差错。

之所以需要这个attributeType，是因为有些属性，其实即是属于XML也是属于CSS，因此在设置的时候就需要标明一些属性的类别。

3、from，to，by，values

上面4个属性是一个系列的，用于表示动画执行过程的状态

from = “value” 动画的起始值。

to = “value” 指定动画的结束值。

by = “value” 动画的相对变化值。

values = “list” 用分号分隔的一个或多个值，可以看出是动画的多个关键值点。

from, to, by, values相互之间存在有一些制约关系。需要满足以下一些规则：

  • 如果动画的起始值与元素的默认值是一样的，from参数可以省略。
  • to,by两个参数至少需要有一个出现（不考虑values）。否则动画效果没有。to表示绝对值，by表示相对值。
  • 如果to,by同时出现，则by打酱油，只识别to。
  • values可以设置多个动画节点，不同于to/by只能设置单个动画节点，当values值有效设置了之后，from, to, by 的值都会被忽略。
<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
    <text font-family="microsoft yahei" font-size="120" y="150" x="160">马
        <animate attributeName="x" values="160;40;160" dur="3s" repeatCount="indefinite" />
    </text>
</svg>

总结一下，可以设置的动画组合为from-to动画、from-by动画、to动画、by动画以及values动画。

4. begin, end

begin是指动画开始的时间。跟CSS3中的-delta有点像，但begin具备的功能比-delta多很多。

begin可以设置的值：

1、具体时间值 'h' | 'min' | 's' | 'ms'这些，默认单位是's'

2、偏移值，'+/-'，应该指相对于，某个操作的值，如begin="x.end-1s"，

3、基于另一个动画的值，如某一个动画执行完成后开始执行，如begin="x.end"

4、与事件关联的值，如点击时开始执行动画begin="circle.click"

5、与某个动画执行次数相关的，比如某个元素执行2次后开始执行begin="x.repeat(2)"

6、与键盘事件相关的，比如按下某个键开始执行 begin="accessKey(s)"

<svg width="320" height="200" xmlns="http://www.w3.org/2000/svg">
    <text font-family="microsoft yahei" font-size="120" y="160" x="160">马
        <animate attributeName="x" to="60" begin="accessKey(s)" dur="3s" repeatCount="indefinite" />
    </text>
</svg>

end 个属性跟begin相对，属性值的有效类型一样。

5. dur

动画执行的时长，可以设置的值为常规的时间值或者
‘indefinite’。设置’indefinite’跟没有设置动画是一个意思。

6. calcMode, keyTimes, keySplines

用于设置动画执行的节奏和各个阶段执行的快慢，类似于CSS3中的-timing-function。

1、calcMode

用于定义动画执行的节奏，也就是在规定时间内是如何完成这一整套动画的。calcMode属性支持4个值分别为：discrete,linear,paced,spline。

  • discrete：不连续的运动，就是从一个状态直接跳到另一个状态下，如从from状态直接跳到to状态
  • linear：线性运动，animateMotion元素以外元素的calcMode默认值。动画从头到尾的速率都是一致的。每个动画阶段的执行时间都是一致。
  • paced ：线性运动，动画从头到尾执行速度都是一样，如果设置了paced，keyTimes无效。
  • spline ： 属于可以自定义执行速度，类似于-timing-function: cubic-bezier()这一CSS属性。我们可以通过keyTimes和keySplines属性来定义各个动画的执行效果。
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="50" height="50" fill="blue">
        <animate xlink:href="#ant" attributeName="x" calcMode="discrete" values="10;30;150" dur="4s"/>
    </rect>
    
    <rect x="10" y="60" width="50" height="50" fill="blue">
        <animate xlink:href="#ant" attributeName="x" calcMode="linear" values="10;30;150" dur="4s" />
    </rect>
    
    <rect x="10" y="110" width="50" height="50" fill="blue">
        <animate xlink:href="#ant" attributeName="x" calcMode="paced" values="10;30;150" dur="4s"/>
    </rect>
    
    <rect x="10" y="160" width="50" height="50" fill="blue">
        <animate xlink:href="#ant" attributeName="x" calcMode="spline" values="10;30;150" keyTimes="0; .8; 1" dur="4s" />
    </rect>
</svg>

2、keyTimes

keyTimes用于限定各个阶段的执行时间，是一串0-1的浮点数字组，每个数值的有效取值范围为0-1，代表每一个动画阶段必须在那个时间点执行完成。

keyTimes的数字组长度要和values长度一直，如果是to/by动画就只有两个值。否则会当做无效处理。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    
    <rect x="10" y="10" width="50" height="50" fill="blue">
        <animate xlink:href="#ant" attributeName="x" calcMode="spline" values="10;90;150" keyTimes="0; .8; 1" dur="4s"/>
    </rect>
    
    <rect x="10" y="60" width="50" height="50" fill="blue">
        <animate xlink:href="#ant" attributeName="x" calcMode="spline" values="10;90;150" keyTimes="0; .2; 1" dur="4s"/>
    </rect>
</svg>

3、keySplines

当calcMode的值为spline时才有效，对应的值为一组三次贝塞尔曲线的控制点，默认为(0,0,1,1)。这个值完全类似于-timing-function: cubic-bezier()的这个CSS属性值。keySplines可以设置多组，每一组用";"隔开。

每一组代表在这个动画阶段中执行的速率

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="50" height="50" fill="blue">
        <animate xlink:href="#ant" attributeName="x" calcMode="spline" values="10;90;150" keyTimes="0; .8; 1" keySplines="0.42 0 1 1;0 0 0.59 1;0.42 0 1 1;" dur="4s"/>
    </rect>
</svg>

7. repeatCount, repeatDur

repeatCount表示动画执行次数，可以是合法数值或者"indefinite"。

repeatDur定义重复动画的总时间。可以是普通时间值或者"indefinite"。

8. fill

fill表示动画间隙的填充方式。支持参数有：freeze | remove。

  • remove ：是默认值，表示动画结束直接回到开始的地方。
  • freeze ：表示动画结束后元素固定在结束的位置。

9. accumulate, additive

accumulate是累积的意思。支持参数有：none | sum. 默认值是none。如果值是sum表示动画结束时候的位置作为下次动画的起始位置。

additive控制动画是否附加。支持参数有：replace | sum. 默认值是replace。如果值是sum表示动画的基础知识会附加到其他低优先级的动画上，

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="50" height="50" fill="blue">
        <animateTransform attributeName="transform" type="scale" from="1" to="3" dur="10s" repeatCount="indefinite" additive="sum"/>
        <animateTransform attributeName="transform" type="rotate" from="0 30 20" to="360 30 20" dur="10s" fill="freeze" repeatCount="indefinite" additive="sum"/>;
    </rect>
</svg>

这里，两个动画同时都是transform，都要使用一个type属性，好在这个例子additive="sum"是累加的而不是replace替换。于是，我们就可以是实现一边旋转一边放大的效果

10. restart

用于设置动画是否可以重复执行。可设置的值为’always | whenNotActive | never’。

  • always是默认值，表示总是，也就是没触发一次动画执行一次。
  • whenNotActive：表示动画正在进行的时候，是不能重启动画的。
  • never：表示动画不能被重新触发。

11. min, max

表示动画执行的最短和最长时间。

动画暂停裕播放

SVG 提供一些js接口可以用于控制动画

// 暂停
svg.pauseAnimations();

// 重启动
svg.unpauseAnimations();

参考文章

超级强大的SVG SMIL animation动画详解

点赞 1
收藏
评论

1 个评论

  • 吃饱了睡
    吃饱了睡
    2019-11-28

    这个rect 可以换成img吗

    2019-11-28
    赞同
    回复
请 登录 后发表内容
作者介绍

文章标签
svgsvg动画