SVG animation 回顾 - Chrimisia(2)_H5之家 - 中国HTML5教程资源分享第一站

⑦ "indefinite"就是这个字符串值，表示“无限等待”。据说需要beginElement()方法触发或者指向该动画元素的超链接(SVG中的a元素)。点击我们的svg, 触发animate元素的beginElement()方法，前提是begin="indefinite".

触发事件后运动

var animate = document.getElementsByTagName("animate")[0]; if (animate) { document.getElementById("svg").onclick = function() { animate.beginElement(); }; }

a元素的xlink:href指向的我们的动画元素

点击我

5. dur
后面两种：常规时间值 | "indefinite".

“常规时间值”就是3s之类的正常值；"indefinite"指事件无限。动画时间无限，实际上就是动画压根不执行的意思。因此，设置为"indefinite"跟没有dur是一个意思，与dur解析异常一个意思。

6. calcMode, keyTimes, keySplines
这几个参数是控制动画先快还是先慢类似这样作用的。

calcMode属性支持4个值：discrete | linear | paced | spline. 中文意思分别是：“离散”|“线性”|“踏步”|“样条”。

discretefrom值直接跳到to值。linearanimateMotion元素以外元素的calcMode默认值。动画从头到尾的速率都是一致的。paced通过插值让动画的变化步调平稳均匀。仅支持线性数值区域内的值，这样点之间“距离”的概念才能被计算（如position, width, height等）。如果”paced“指定，任何keyTimes或keySplines值都会打酱油。spline插值定义贝塞尔曲线。spline点的定义在keyTimes属性中，每个时间间隔控制点由keySplines定义。

keyTimes = “<list>”
跟上面提到的<list>类似，都是分号分隔一组值。keyTimes从名字上看是关键时间点的意思，大致就是这个意思。前面提到过values也是多值，这里有一些约定的规则：

　　一、keyTimes值的数目要和values一致，如果是from/to/by动画，keyTimes就必须有两个值。

　　二、对于linear和spline动画，第一个数字要是0, 最后一个是1。

　　三、每个连续的时间值必须比它前面的值大或者相等。

paced模式下，keyTimes会被忽略；keyTimes定义错误，也会被忽略；dur为indefinite也会被忽略。

keySplines = “<list>”
keySplines表示的是与keyTimes相关联的一组贝塞尔控制点（默认0 0 1 1）。每个控制点使用4个浮点值表示：x1 y1 x2 y2. 只有模式是spline时候这个参数才有用，也是分号分隔，值范围0~1，总是比keyTimes少一个值。

如果keySplines值不合法或个数不对，是没有动画效果的。

如下4个SVG，只展示重要部分代码：

就是values, keyTimes, keySplines三个人之间事情。values确定动画的关键位置，keyTimes确定到这个关键点需要的时间，keySplines确定的是每个时间点段之间的贝塞尔曲线，也就是具体的缓动表现。平时CSS3写的transition动画效果，也是这么回事，这是values值就两个，所以，keyTimes只能是0;1, 贝塞尔曲线就只有一个，要不ease, 要不linear等

7. repeatCount, repeatDur

repeatCount表示动画执行次数，可以是合法数值或者”indefinite“（动画循环到电脑死机）。
repeatDur定义重复动画的总时间。可以是普通时间值或者”indefinite（”动画循环到电脑死机）。

动画只玩执行完整3个 + 一个1/3个动画。因为repeat总时间就10s而已。

8. fill

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

9. accumulate, additive

accumulate是累积的意思。支持参数有：none | sum. 默认值是none. 如果值是sum表示动画结束时候的位置作为下次动画的起始位置。
additive控制动画是否附加。支持参数有：replace | sum. 默认值是replace. 如果值是sum表示动画的基础知识会附加到其他低优先级的动画上，

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

;

两个动画同时都是transform，都要使用一个type属性，好在这个例子additive="sum"是累加的而不是replace替换。

于是，我们就可以是实现一边旋转一边放大的效果。

10. restart

restart这个属性诞生的背景如下：很多动画呢，其触发可能与事件相关。现在，存在这种情况，希望点击一次反应一次，之后再点击就没有反应。这种需求的出现迫使restart参数的出现。支持的参数有：always | whenNotActive | never.

always是默认值，表示总是，也就是点一次，触发一次事件。whenNotActive表示动画正在进行的时候，是不能重启动画的。never表示动画是一波流。

11. min, max

min/max表示动画执行最短和最长时间。支持参数为时间值和"media"（媒介元素有效）, max还支持indefinite.

四、动画的暂停与播放

SVG animation中是有内置的API可以暂停和启动动画的

// svg指当前svg DOM元素 // 暂停 svg.pauseAnimations(); // 重启动 svg.unpauseAnimations()