SVG实战开发学习（八）——动画
【SVG支持的SML动画元素的通用属性】
SVG中的动画元素有五个，它们都可以随着时间的变化而改变SVG元素的属性或样式值，如下所示；
<animate>：改变数值的属性或样式的值；
<set>：改变非数值的属性或样式的值，如visibility属性等；
<animateMotion>：沿着某路径移动SVG元素获得动画效果；
<animateColor>：改变某些元素与颜色有关的属性或样式的值；
<animate Transform>：改变SVG元素进行坐标变换时的动画效果；
1、与标示相关的常用属性
（1）attributeName="<attributeName>"：指明所作用的SVG元素中哪个属性或样式需要产生动画效果。
（2）attributeType=" XML | CSS | auto ":指明产生动画效果的属性或样式值是在哪个命名空间定义的。"XML"表示"attributeName"的值是默认的XML命名空间里定义的XML属性名；"CSS"表示"attributeName"的值是默认CSS属性的名称；"auto"是默认值，解析器解析时先在CSS属性列表中查找是否有匹配"attributeName"的属性名，然后再在XML的命名空间里找。
2、与时间控制相关的常用属性
begin=" <clock-time-value> | wallclock-sync-value | indefine | eventName "：定义动画的开始时刻。定义的值有很多种。
a) 时间偏移值：如"3s"表示3S后开始播放动画，还可以采用"min"（分钟），"h"（小时）等。也可以使用形如"hh:mm:ss.xxxx"的精确长时间表示形式，其含义是hh小时mm分钟ss.xxxx秒后开始播放动画。
b)现实世界中的时间：定义成将来的某个具体时刻，但定义后要保证SVG文档在这个时间之前打开。
c)Indefinite：表示这个动画不会自动开始，需要使用动态脚步调用"beginElement()"方法或指向该动画元素的超链接被激活才会开始。
d)eventName:表示在某个事件触发时开始播放动画。如：begin="mousedown"，鼠标左键按下时开始播放动画。
dur="<clock-time-value | indefinite>"：定义动画的持续时间，取值含义类似"begin"属性。
end="<clock-time-value | indefinite> "：定义动画的结束时刻，取值含义类似"begin"属性。不同的是，如果是"indefinite"属性，需要使用动态脚本调用"endElement()"方法才会结束，如果取值是"3s"、"3min"这样的时间形式，结束时刻与开始时刻无关，3秒或者3分钟后就结束。
e)restart="always | whenNotactive | never"：定义动画重播的方式，默认值是"always",表示动画任意时刻都可以重播，比如设定了动画播放的触发条件是"mousedown"，那么只有在鼠标左键按下的时候才会重播。"whenNotactive"表示该动画只有在播放结束后才会重新开始，过程中不受任何影响。"never"表示该动画不会重播，只播一次。
f)repeatCount="<integer>|indefinite"：定义动画重播的次数，需整数值。如果取值是"indefinite",那么表示无限重播。
g)repeatDur="<integer> | indefinite "：定义动画重播的总时间，比如取值是"5s"，而该动画播放一次的时间是1秒，那么动画最多只会重播5次（5/1=5）就会停止；取值是"indefinite"表示无限重复播放。
h)fill=" freeze | remove "：定义动画播放完毕后是停留在播放的终点还是回到起始位置。"freeze"表示"凝固" 在播放的终点；"remove"表示"移除"所有内容回到播放的起点。
【 与过程控制相关的常用属性 】
下面看看动画元素都含有哪些相关属性（不适用于<set>元素）。
a)from="<value>"：定义该动画元素所作用的属性值在开始变化时的值。
b)to="<value>"：定义该动画元素所作用的属性值在结束变化时的值。
c)by="<value>"：定义该动画元素所作用的属性值每次变化的步长值。
以上三个属性不同时使用，一般采用"from"、"to"、和 "from"、"by"这两个组合。
d)calcMode="discrete | linear | paced |spline"：定义动画关键点直接过渡的插值计算方式。"discrete"表示不采用插值算法，动画是从一个关键点跳跃到另外一个关键点，可想而知，动画效果就是跳跃式的；"linear"表示采用线性插值算法，这是<animate>元素和<set>元素采用的默认插值算法："paced"表示采用在时间上均匀变化的方法插值："spline"表示采用三次贝塞尔曲线的方式来插值，需要"keySplines"
属性的配合。
【与动画叠加相关的常用属性】
a)additive=" replace |sum "：定义动画播放过程中是否在前一帧的基础上进行，默认值是"replace"，也就是每次点擦除上一帧的动画效果。"sum"表示叠加所有的动画效果。
b)accumulate=" none | sum "：定义动画在循环播放的时候，后一次播放是否擦除前一次的痕迹，所以这是针对播放次数而不是帧。默认值是"sum"表示不擦擦，"none"表示擦除。
由此可见，设置"accumulate"属性为"sum"时，也就等同于设置"additive"的属性为"sum"。
