SVG进阶-SMIL动画

SMIL

SMIL是指同步多媒体集成语言（Synchronized Multimedia Integration Language）SVG相关的动画都是基于这种语言标准实现的

SMIL允许你做下面这些事情：

动画元素的数值属性（X, Y, …）
动画属性变换（平移或旋转）
动画颜色属性
沿着运动路径运动

其中前面三条CSS3都是可以实现的，就是最后一条，暂时还不能实现。当然啦SMIL这门标准的订立不是为了解决CSS3的缺陷的。

SVG的动画元素是和SMIL开发组合作开发的。SMIL开发组和SVG开发组合作开发了SMIL动画规范，在规范中制定了一个基本的XML动画特征集合。SVG吸收了SMIL动画规范当中的动画优点，并提供了一些SVG继承实现。

SVG 动画标签参数详解

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

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

attributeName = <attributeName>

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

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，因此在设置的时候就需要标明一些属性的类别。

from，to，by，values

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

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

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

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

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

from, to, by, values虽然属于一个家族，但是相互之间还是有制约关系的。有以下一些规则：

a. 如果动画的起始值与元素的默认值是一样的，from参数可以省略。

b. （不考虑values）to,by两个参数至少需要有一个出现。否则动画效果没有。to表示绝对值，by表示相对值。

c. 如果to,by同时出现，则by打酱油，只识别to。

e. values可以是一个值或多值。根据我在Chrome浏览器下的测试，是一个值的时候是没有动画效果。多值时候有动画效果。当values值设置并能识别时候，from, to, by 的值都会被忽略。那values属性是干什么的呢？别看名字挺大众的，其还是有些功力的。我们实现动画，不可能就是单纯的从a位置到b位置，有时候，需要去c位置过渡下。此时，实际上有3个动画关键点。而from, to/by只能驾驭两个，此时就是values大显身手的时候了！

<svg width="600" height="600" xmlns="http://www.w3.org/2000/svg"><text font-size="120" y="150" x="160">SMIL<animate attributeName="x" values="160;40;160" dur="3s" repeatCount="indefinite" /></text>
</svg>

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

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="600" height="600" xmlns="http://www.w3.org/2000/svg"><text font-size="120" y="160" x="160">SMIL<animate attributeName="x" to="60" begin="accessKey(s)" dur="3s" repeatCount="indefinite" /></text>
</svg>

dur

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

calcMode, keyTimes, keySplines

用于设置动画执行的快慢，类似于CSS3中的 -timing-function

repeatCount, repeatDur

repeatCount表示动画执行次数，可以是合法数值或者”indefinite“（动画循环到电脑死机）。

repeatDur定义重复动画的总时间。可以是普通时间值或者”indefinite（”动画循环到电脑死机）。

fill

fill表示动画间隙的填充方式。支持参数有：freeze | remove. 其中remove是默认值，表示动画结束直接回到开始的地方。freeze“冻结”表示动画结束后像是被冻住了，元素保持了动画结束之后的状态。

accumulate, additive

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

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

举个例子：

<animateMotion begin="0" dur="5s" path="M20,50 C20,-50 180,150 180,50 C180-50 20,150 20,50 z" additive="sum" fill="freeze" />
<animateMotion begin="5s" dur="5s" path="M 20,50 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z" additive="sum" fill="freeze" />
<animateMotion begin="10s" dur="5s" path="M250,80 H40,30 20,10z" additive="sum" fill="freeze" />

这里轮到第二个动画的时候，路径是从第一个动画路径结束地方开始的，于是，3个动画完美无缝连接起来了。

<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"/>

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

restart

用于设置动画是否可以重复执行。可设置的值为’always | whenNotActive | never’。always是默认值，表示总是，也就是点一次圈圈，马儿跑一下。whenNotActive表示动画正在进行的时候，是不能重启动画的。never表示动画是一波流。

min, max

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

动画暂停裕播放

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

// 暂停 svg.pauseAnimations();

// 重启动 svg.unpauseAnimations()

这一章主要是罗列一些动画标签的属性使用，涉及的值非常多。