之前一直看别人写的各种svg动画，画的svg图画，感觉好炫酷，也感觉好难，总有一种无法入手的感觉。但最近由于工作需要，要做一些小动画，要模仿app的原生的，就做了一些尝试及学习。下面是我的一些学习心得：
要做svg动画，就要首先了解一下svg动画的过程
以圆形缓冲加载动画为例：
- 首先要确定画布的位置：
- 画一个底边圆
- 画一个加载的圆
<svg xmlns="" version="1.1" id="my_appointment" width="56" height="56">
<circle stroke-width="4" stroke="#f00" fill="none" r="26" cx="28" cy="28"></circle>
<circle stroke-width="4" stroke="#000" fill="none" r="26" cx="28" cy="28" stroke-dasharray="0 163.36281798666926"></circle>
</svg>
效果图如下：
其工作原理 就是通过stroke-dasharray参数来实现动画效果
SVG stroke-dasharray 属性
stroke-dasharray用于创建虚线，也就是把svg图用虚线来画，这个属性可以是一个数组，数组里面的值就是虚线的值，依次循环。
而实现这个动画的核心就是控制虚线的值
首先 我们要求一下这个圆的周长。2*Math.PI*r（这里可能要用到一些平面几何的知识，忘记的小伙伴需要去求一下）
这里我们只需要为stroke-dasharray 设置2个参数 虚线长 间隔长
核心代码：
perimeter=2*Math.PI*R;
obj.attr("stroke-dasharray",perimeter*0.01*start+" "+perimeter*(1-0.01*start));
实现：
function animal(obj,R,deriction,start,end) {
var perimeter=2*Math.PI*R;
var tt=setInterval(function () {
obj.attr("stroke-dasharray",perimeter*0.01*start+" "+perimeter*(1-0.01*start));
if(deriction){
if(start>end){
clearInterval(tt);
}
start++;
}else{
if(start<end){
clearInterval(tt);
}
start--;
}
},50)
_this 动画的父对象 start 开始的百分比为整数如1 end 结束的百分比 如100 direction 布尔值 true 顺时针 false 逆时针 line_w边线宽的一半
}