目录[^1]
一、SVG SMIL Animation概览
1.1 SMIL是什么？
全称Synchronized Multimedia Integration Language
SMIL允许你做这些事情：
- 动画元素的数值属性（X，Y,...）
- 动画属性变换（平移或旋转或缩放）
- 动画颜色变换
- 沿着指定路径运动 CSS3不能做到
1.2 SMIL强大之处
SMIL的强大之处在于：不需要CSS，不需要JS，只需要 animate 元素即可。实例:
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="200" y="200" width="60" height="60" fill="red"></rect>
<animateTransform attributeName="transform" begin="0s" dur="10s" type="rotate" from="0 160 160" to="360 160 160" repeatCount="indefinite"/>
</svg>
SMIL在各大浏览器都支持
二、SMIL Animation元素及效果概览
- <set>
- <animate>
- <animateColor>
- <animateTransform>
- <animateMotion>
2.1 <set />
<set>意思是设置，此元素没有动画效果。但是可以实现基本的延迟功能。也就是说，可以在特定时间之后修改某个属性值（也可以是CSS属性值）。
实例：矩形会在3s后从x="160" 移动到x="60"的位置。
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
<rect x="200" y="200" width="60" height="60" fill="red">
<set attributeName="x" attributeType="XML" to="60" begin="3s" />
</rect>
</svg>
2.2 <animate />
基础动画元素。实现单属性的动画过渡效果。实例：矩形沿着X轴平移
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
<rect x="200" y="200" width="60" height="60" fill="red">
<animate attributeName="x" from="200" to="10" begin="0s" dur="1s" repeatCount="indefinite" />
</rect>
</svg>
2.3 <animateColor />
颜色动画，其可以实现的功能与效果，animate也可以做到，因此，该属性已经被废弃
2.4 <animateTransform></animateTransform>
实现 transform 变换动画效果。实例，矩形快速变大：
<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000">
<rect x="200" y="200" width="60" height="60" fill="red"></rect>
<animateTransform attributeName="transform" begin="0s" dur="3s" type="scale" from="1" to="3"></animateTransform>
</svg>
2.5 <animateMotion>
animateMotion元素可以让SVG各种图形沿着特定的 path 路径运动。实例：矩形按照既定路径运动
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-400 -400 800 800">
<rect x="-25" y="-25" width="50" height="50" fill="rgba(0,255,255,.6)">
<animateMotion path="M 0 0 L 100 100 A 200 200 0 1 0 0 -100" dur="3s" rotate="auto" fill="freeze"></animateMotion>
</rect>
<path id="motion-path" d="M 0 0 L 100 100 A 200 200 0 1 0 0 -100" fill="none" stroke="gray"></path>
</svg>
2.6 自由组合
让矩形沿着路径来回移动，并更改颜色
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="-400 -400 800 800">
<circle cx="0" cy="0" r="5" fill="red"></circle>
<circle cx="0" cy="-100" r="5" fill="yellow"></circle>
<rect x="-25" y="-25" rx="5" ry="5" width="50" height="50" fill="red">
<animateMotion id="clockwise" path="M 0 0 L 100 100 A 200 200 0 1 0 0 -100" dur="3s" rotate="auto" begin="0; counterclockwise.end + 1s" fill="freeze"></animateMotion>
<animateMotion id="counterclockwise" path="M 0 -100 A 200 200 0 1 1 100 100 L 0 0" dur="3s" begin="clockwise.end + 1s" rotate="auto" fill="freeze"></animateMotion>
<animate id="toYellow" attributeType="XML" attributeName="fill"
begin="0; toRed.end + 1s"
from="red" to="yellow" dur="3s" fill="freeze"></animate>
<animate id="toRed" attributeType="XML" attributeName="fill"
begin="toYellow.end + 1s"
from="yellow" to="red" dur="3s" fill="freeze"></animate>
</rect>
<path id="motion-path" d="M 0 0 L 100 100 A 200 200 0 1 0 0 -100" fill="none" stroke="gray"></path>
</svg>
三、SVG Animation参数详解
3.1 attributeName = <attributeName>
需要变化的元素属性名称：
- 可以是元素直接暴露的属性，例如，对于反复出现的矩形对应的
<rect>元素上的x，y或者rx，ry - 还可以是CSS属性。例如，透明度
opacity。
3.2 attributeType = "CSS | XML | auto"
attributeType支持三个固定参数，CSS、XML、auto，用来表示attributeType属性值的列表。x,y以及transform就属于XML；opacity就属于CSS；auto为默认值，自动判别的意思，实际上县当成CSS处理，如果发现不认识，直接XML类别处理。因此如果不确定某属性是XML还是CSS类别的时候设置为auto。虽然如此，为了浏览器性能最佳，还是尽量区分类别。
3.3 from，to，by，values
上面的4个属性是一个家族的，他们解决的问题是，从哪里来？到哪里去？怎么去？去干什么？
- from = "value" ：动画的起始值。
- to = "value" ：指定动画的结束值。
- by = "value" ：动画的相对变化值。
- values = "list" ：用分号分隔的一个或多个值，可以看出是动画的多个关键值点。
from，to，by，values虽然是一个家族的，但是相互之间还是有制约关系的：
-
如果动画的起始值与元素的默认值是一样的，
form参数可以省略。 -
（不考虑values）to、by两个参数至少需要有一个出现，否则没有动画效果。to表示绝对值，by表示相对值。
拿位移举例，如果from="100"，to="160"则表示移动到160这个位置，但是by="160"表示100+160=260，表示移动到260的位置。 -
如果
to，by同时出现，则by打酱油，只是别to。 -
如果to，by，values都没设置，自然没动画效果。如果任意（包括from）一个属性的值不合法，严格来说是没有动画效果的。但是Chrome有容错机制，可能会出现动画。
-
values可以是一个或多个值。当
values的值设置并被识别时，from，to，by的值都会被忽略。
values的功能就是实现多点之间动画。而from，to，by只能实现两个点的切换。实例，矩形来回移动：
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="-400 -400 800 800">
<rect x="-25" y="-25" rx="5" ry="5" width="50" height="50" fill="red">
<animate attributeName="fill" values="red;green;blue;black" dur="4s" fill="freeze" />
<animate attributeName="x" values="0;300;100;500" dur="4s" fill="freeze"/>
</rect>
</svg>
总结为五个动画：from-to动画、from-by动画、to动画、by动画、values动画。
3.4 begin，end
begin指动画开始的时间，看上去很简单。例如begin="3s"只是最基本的表示方式。
begin的定义是分号分隔的一组值。例如begin="3s;5s"表示的是3s之后动画走一下，5s的时候再走一下（如果之前的动画没走完，会立即停止并从头开始）
SVG Animate中的时间表示
常见单位有"h" | "min" | "s" | "ms",以上单位都是英文单位的缩写。
时间值支持小数写法，因此90s也可以用1.5min表示。时间值还支持hh:mm:ss这种写法，因此，90s我们也可以使用01:30表示。
还有一点，十进制的小数值是秒的浮点定义，什么意思呢？例如 begin="1.5" 没有单位，这里的小数点表示秒，也就是 1.5s的意思。所以上面N次出现的begin=3s 也可以简写作 begin="3"。
begin的单值除了普通的value还有下面这些类别的value：
-
offset-value 表示偏移值，数值前面有+ 或 - ，指相对于document的begin值；
-
syncbase-value 基于同步确定的值。语法为：[ID].begin/end +/- 时间值。
例如: 2.6综合实例的begin="0; counterclockwise.end + 1s"意思是上一个动画结束1s之后。 -
event-value 这个表示与时间相关联的值。类似于 ”点击执行该动画“， 语法为：
id.event +- time
例如：begin = "circle.click + 2s"表示点击2s之后执行动画
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="-400 -400 800 800">
<circle id="circle" cx="100" cy="100" r="20"></circle>
<rect x="-25" y="-25" rx="5" ry="5" width="100" height="100" fill="red">
<animate attributeName="x" to="260" begin="circle.click + 2s" dur="2s" />
</rect>
</svg>
需要注意的是，这类与实践关联的SVG需要内联在页面中，否则click什么的都是徒劳。
-
repeat-value 指重复多少次之后做什么。语法为：[ID].repeat（整数） +/- 时间值。
实例：矩形水平移动两次之后，斜向运动
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="100" y="100" width="100" height="100" fill="#ff5050">
<animate id="x" attributeName="x" to="800" begin="0s" dur="3s" repeatCount="indefinite" />
<animate attributeName="y" to="800" begin="x.repeat(2)" dur="3s" fill="freeze" />
</rect>
</svg>
begin="x.repeat(2)"指id为x的元素的动画重复2次之后执行该动画。
-
accessKey-value 定义快捷键。即按下某个按键动画开始。语法为:
accessKey("character").character表示快捷键所在字符。
实例：按下A键动画执行（firefox上可用，chrome不支持）
<svg xmlns="http://www.w3.org/2000/svg">
<rect x="100" y="100" width="100" height="100" fill="#ff5050">
<animate attributeName="x" to="400" begin="accessKey(a)" dur="3s" repeatCount="indefinite" />
</rect>
</svg>
-
wallclock-sync-value 指真实世界的时钟定义，时间语法是基于ISO8601中定义的语法，例如：2018-01-23T10:40:54.45+01:00
-
indefinite 就是这个字符串值，表示无限等待，需要
beginElement()方法触，或者指向该动画元素的超链接（SVG中的a元素）触发。
beginElement()触发实例：
<svg id="svg" xmlns="http://www.w3.org/2000/svg" width="600" height="200">
<rect x="100" y="100" width="100" height="100">
<animate attributeName="x" to="400" begin="indefinite" dur="2s">
</rect>
</svg>
<script type="text/javascript">
var animate = document.getElementsByTagName("animate")[0];
if (animate){
document.getElementById("svg").onclick = function(){
animate.beginElement();
}
}
</script>
超链接（a标签）触发实例：
<svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="200">
<rect x="100" y="100" width="100" height="100">
<animate id="animate" attributeName="x" to="400" begin="indefinite" dur="2s"/>
</rect>
<a xlink:href="#animate">
<text x="100" y="60" fill="#cd0000" font-size="30">点击</text>
</a>
</svg>
end与begin的属性大同小异，无需重复说明。
3.5 dur
dur有两种值：常规时间值 | “indefinite”
常规时间值就是（3s）这种正常值；indefinite指时间无限。
动画时间无限，实际上就是动画不执行，因此设置“indefinite”跟没有设置dur值一个意思，与dur解析异常一个意思。
3.6 calcMode, keyTimes, keySplines
这几个参数是控制动画节奏，先快后慢还是先慢后快。
- calcMode属性支持4个值：discrete 、linear、paced、spline中文意思是：离散，线性、踏步、样条
- discrete : from值直接跳转到to的值
- linear：animateMotion元素以外元素的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值不合法或个数不对，是没有动画效果的。
来看一个综合实例：演示效果
<svg width="320" height="100" xmlns="http://www.w3.org/2000/svg">
<text font-size="60" y="60" x="160">马
<animate attributeName="x" dur="5s" values="0; 20; 160" calcMode="linear" />
</text>
</svg>
<svg width="320" height="100" xmlns="http://www.w3.org/2000/svg">
<text font-size="60" y="60" x="160">马
<animate attributeName="x" dur="5s" values="0; 80; 160" calcMode="paced"/>
</text>
</svg>
<svg width="320" height="100" xmlns="http://www.w3.org/2000/svg">
<text font-size="60" y="60" x="160">马
<animate attributeName="x" dur="5s" values="0; 80; 160" keyTimes="0; .8; 1" calcMode="linear"/>
</text>
</svg>
<svg width="320" height="100" xmlns="http://www.w3.org/2000/svg">
<text font-size="60" y="60" x="160">马
<animate attributeName="x" dur="5s" values="0; 80; 160" keyTimes="0; .8; 1" calcMode="spline" keySplines=".5 0 .5 1; 0 0 1 1" />
</text>
</svg>
values确定动画的关键位置，keyTimes确定到这个关键点需要的时间，keySplines确定的是每个时间之间的贝塞尔曲线，也就是具体缓动表现。
CSS3写的transition动画效果，也是这么回事，只是values值就两个，所以，keyTimes只能是0；1，贝塞尔曲线就一个，要不ease，要不liner。
keySplines=".5 0 .5 1; 0 0 1 1"这里的动画曲线可以自由调节，可以参考以下曲线：
3.7 repeatCount，repeatDur
repeatCount 表示动画执行次数，可以是合法数值或者"indefinite"(动画循环到电脑死机)。
repeatDur 定义重复动画的总时间。可以是普通时间值或者"indefinite"(动画循环到电脑死机)。
<animate attributeName="x" to="60" dur="3s" repeatCount="indefinite" repeatDur="10s" />
动画执行 3 + 1/3 次。因为repeatDur=“10s”
3.8 fill
fill表示动画间隙的填充方式。支持参数有：freeze | remove，其中remove是默认值，表示动画结束直接回到开始的地方，freeze表示动画结束冻住，表示保持动画结束的信息。
3.9 accumulate，additive
accumulate 是累积的意思。支持参数有none | sum 。默认值是none，值sum表示动画结束时的位置作为下次动画的起始位置。
additive 控制动画是否附加。支持参数有：replace | sum。默认值replace，值sum表示动画的基础指示会附加到其他低优先级的动画上。
实例1，
<animateMotion begin="0" dur="5s" path="[some path]" additive="sum" fill="freeze" />
<animateMotion begin="5s" dur="5s" path="[some path]" additive="sum" fill="freeze" />
<animateMotion begin="10s" dur="5s" path="[some path]" additive="sum" fill="freeze" />
轮到第二个动画的时候，路径从第一个动画路径结束的地方开始，三个动画完美结合
实例2：在线查看效果
<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">
<rect x="200" y="200" width="20" height="20"></rect>
<animateTransform attributeName="transform" type="scale" from="1" to="4" dur="5s" additive="sum" fill="freeze"/>
<animateTransform attributeName="transform" type="rotate" from="0 10 10" to="360 10 10" dur="5s" fill="freeze" additive="sum"/>;
</svg>
3.10 restart
restart这个属性诞生的背景如下：很多动画其触发可能与事件相关，例如，点击圆圈，矩形就跑。而且，似乎每点一次，矩形就动一下。现在，存在这种情况，希望矩形只动一次，之后点击就不动了。这种需求迫使restart参数的出现。
支持的参数有：** always | whenNotActive | never**
always 是默认值，表示总是，也就是点一次圈圈，马儿跑一下。
whenNotActive 表示动画正在执行的时候，不能重启动画。
never 表示执行一次就不再执行。
3.11 min,max
min/max表示动画执行最短和最长时间。支持参数为时间值和"media"（没接元素有效），max还支持indefinite。
四、动画暂停与播放
SVG Animation中是有内置的API可以暂停和启动动画，语法：
//暂停
svg.pauseAnimations();
//播放
svg.unpauseAnimation();
通过ID获取SVG元素
var svgElement = document.getElementById("rect1")
五、animeJS动画库
http://animejs.com/
SVG和animeJS搭配使用可以做出非常流畅的动画。
可以查看我的
实例1：http://jsbin.com/faxikem/5/edit?html,output
实例2：https://github.com/PowerXuan/MonstarLogoSVGAnimation
网友评论