说起动画我是十分感兴趣的，你们呢？哈
下面说说SVG动画是如何实现的。
svg路径描边动画
实现原理：
该动画的实现原理是根据stroke-dasharray和stroke-dashoffset来实现的，那这两个属性是干什么的呢？再次简单的说一下，想具体了解的自行百度0.0
stroke-dasharray属性是用来设置虚线的，有两个值，分别是每段虚线的长度和虚线点的间隔长度。
stroke-dashoffset设置的是虚线的起始位置偏移。
将stroke-dasharray和stroke-dashoffset都设置为线条的总长度，目的是将该虚线各线段间的空白间隔放到可视区域，而将线条放到可视区域之外。
然后我们通过动画一点点减小stroke-dashoffset来使线条平移显现出来，最终呈现出路径描边的效果。
实现方法：
一般我们是将stroke-dasharray设置为线条的总长度，然后将stroke-daashoffset也设置为线条的总长度。
然后利用animation和@keyframes添加动画，动画中将stroke-dashoffset其值最终变为0即可。
其他：
一般我们将stroke-dashoarray和stroke-dashoffset设置为线条总长度，有时我们不能精准知道线条总长度，所以该值设置稍大一些也没问题，仅仅是动画时间变短一些即可。
如果我们非要获取线条的精准总长度，我们通过path.getTotalLength()获取即可，其中path是绘制该线条path的dom。
小demo:
html代码：
<svg width="500" height="500">
<path d="M 50 200 Q 100 100 200 200 T 400 200" class="ani"></path>
</svg>
css代码：
svg {
border: 1px solid #ddd;
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
.ani {
stroke: red;
fill: transparent;
stroke-width: 2px;
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: dash 3s linear forwards;
-webkit-animation: dash 3s linear forwards;
}
SVG SMIL animation动画
SMIL是什么？
SMIL是Synchronized Multimedia Integration Language（同步多媒体集成语言）的缩写，而SVG可以基于这种语言实现动画。
SVG使用SMIL可以做什么？
主要是以下两点：
-
实现平移旋转等
-
沿着运动路径运动
如何使用？
SMIL上有很多标签，我们选择合适的标签，在其上添加需要的属性，即可实现svg动画效果，而不需要css和js代码，由此可见此方法的简单。 以下介绍一些SMIL动画标签（那些属性通过看demo例子应该很容易理解）：
- set
实现特定时间后改变某个属性，但无法实现连续的动画
<svg width="500" height="500">
<text x="100" y="200" style="font-size: 2em">
SIML
<set attributeName="x" to="300" begin="3s"></set>
</text>
</svg>
- animate
实现单属性的动画过渡效果
<svg width="500" height="500">
<g>
<text x="100" y="200" style="font-size: 2em;font-weight: bold;">
SIML
<animate attributeName="x" from="100" to="400" dur="3s" repeatCount="indefinite"></animate>
</text>
</g>
</svg>
-
animateColor
实现颜色的动画，但使用animate即可实现该功能，所以已被废弃。 -
animateTransform
实现单属性的transform的变换动画效果（如果设置多个animateTransform则只有最后一个生效，其他被覆盖）
<svg width="500" height="500">
<g>
<text x="200" y="200" style="font-size: 2em;font-weight: bold;">
SIML
<animateTransform attributeName="transform" begin="0s" dur="3s" type="rotate" from="0" to="45" repeatCount="indefinite"></animateTransform>
</text>
</g>
</svg>
- animateMotion
实现svg图形沿着特定路径运动
<svg width="500" height="500">
<g>
<text x="0" y="0" style="font-size: 2em;font-weight: bold; stroke: red;">
人
<animateMotion path="M 50 200 Q 100 100 200 200 T 400 200" begin="0s" dur="3s" repeatCount="indefinite" rotate="auto"></animateMotion>
</text>
<path d="M 50 200 Q 100 100 200 200 T 400 200" style="stroke-width: 2px; fill: none"></path>
</g>
</svg>
- animate的组合动画 animateTransform是不能自由组合的，会产生覆盖（后面的覆盖前面的），而animate的动画效果是可以组合叠加的。
<svg width="500" height="500">
<g>
<text x="100" y="200" style="font-size: 3em;font-weight: bold;fill:none;">
SIML
<animate attributeName="x" from="100" to="400" begin="0s" dur="3s" repeatCount="indefinite"></animate>
<animate attributeName="opacity" from="0" to="1" begin="0s" dur="3s" repeatCount="indefinite"></animate>
<animate attributeName="stroke" from="#000" to="red" begin="0s" dur="3s" repeatCount="indefinite"></animate>
</text>
</g>
</svg>
这些标签上的基本属性
attributeName
动画设置改变的属性
begin
动画开始前的延迟时间
dur
动画持续时间
from
过渡动画改变属性的初始值
to
过渡动画改变属性的最终值
repeatCount
动画播放次数，默认是播放一次，而'indefined'表示无限循环播放
path
是animateMotion上的一个属性，设置运动路径，和path标签上的d属性设置完全一样
参考来源
http://www.zhangxinxu.com/wordpress/2014/08/so-powerful-svg-smil-animation/