svg动画

svg animation元素

<set>：可以在特定时间之后修改某个属性值（也可以是CSS属性值）
<animation>：基础动画元素，实现单属性的动画过渡效果
<animateColor>：颜色动画
<animateTransform>：变换动画效果
<animateMotion>：让svg各种图形沿着特定的path路径运动

---

svg animation参数

1. attributeName = <attributeName>：要变化的元素属性名称。

可以是元素直接暴露的属性，如元素上的x，y属性等；也可以是css属性。

2. attributeType = "CSS | XML | auto"：表明attributeName属性值的列表。

• 如果attributeName值为x，y以及transform就属于XML；
• 如果attributeName值为opacity内容就属于CSS；
• auto为默认值，自动判断attributeName的值属于CSS还是XML（实际上实现当成CSS处理，如果发现不认识，直接XML类别处理）

3. from，to，by，values

• from：动画的起始值
• to：动画的结束值，例如from是100,to值为160则表示移动到160这个位置
• by：动画的相对变化值，例如from是100, by值为160则表示移动到100+160这个位置
• values：用分号分隔的一个或多个值，是动画的多个关键值点

如果to和by同时出现，只识别to值；当values值设置并能识别时候，from, to, by的值都会被忽略。

4. begin，end

-begin：动画开始的时间

• end：动画结束时间

5. dur： 动画延迟时间

6. calcMode, keyTimes, keySplines

1. 这几个参数是控制动画先快还是先慢类似这样作用的
   calcMode的属性包含4个值：
   -discrete：from值直接跳到to值
   -linear：animateMotion元素以外元素的calcMode默认值。动画从头到尾的速率都是一致的

• paced：通过插值让动画的变化步调平稳均匀。仅支持线性数值区域内的值，这样点之间“距离”的概念才能被计算（如position, width, height等）。
• spline：插值定义贝塞尔曲线。spline点的定义在keyTimes属性中，每个时间间隔控制点由keySplines定义。

2. keyTimes = "<list>"
keyTimes是关键时间点，<list>是分号分隔一组值。前面提到过values也是多值，这里有一些约定的规则：
   keyTimes值的数目要和values一致，如果是from/to/by动画，keyTimes就必须有两个值。
   对于linear和spline动画，第一个数字要是0, 最后一个是1。
   每个连续的时间值必须比它前面的值大或者相等。
3. keySplines = "<list>"
keySplines表示的是与keyTimes相关联的一组贝塞尔控制点（默认0 0 1 1）。每个控制点使用4个浮点值表示：x1 y1 x2 y2。只有模式是spline时候这个参数才有用，也是分号分隔，值范围0~1，总是比keyTimes少一个值。

7. repeatCount，repeatDur

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

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

8. fill

fill表示动画间隙的填充方式。参数有：

• remove：默认值，表示动画结束直接回到开始的地方。
• freeze：“冻结”，表示动画结束后保持动画结束之后的状态。

9. accumulate，additive

1. accumulate是累积的意思。支持参数有：

• none ：默认值。
• sum：表示动画结束时候的位置作为下次动画的起始位置。

2. additive控制动画是否附加。支持参数有：

• replace：默认值。
• sum：表示动画的基础知识会附加到其他低优先级的动画上。

10. restart

• always是默认值，表示总是。
• whenNotActive表示动画正在进行的时候，是不能重启动画的。
• never表示动画是一波流。

11. min，max

min/max表示动画执行最短和最长时间。

---

动画的暂停与播放

• 暂停动画： svg.pauseAnimations();
• 重启动画：svg.unpauseAnimations()

参考资料：超级强大的SVG SMIL animation动画详解