评论

SVG动画教程

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动画详解

最后一次编辑于  09-12  (未经腾讯允许,不得转载)
点赞 1
收藏
评论