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()
这一章主要是罗列一些动画标签的属性使用，涉及的值非常多。