SVG描边动画，使用了SVG图形中PATH标签的stroke特性制作的动画。
为什么使用SVG？
相对于其他的图片格式，SVG具有更好的交互性，可操作性强，并且是矢量图<-大家都懂的
如何获得SVG图形？
如果你想手写出精美复杂的SVG图形，我只能说：“大神求带”。
生成SVG的工具有很多，请大家自行百度/谷歌。我所看到的文章中具体介绍了如何使用Ai导出干净，具有标签的，可操作性强的SVG文件，但是该文章中关键的引用连接失效了，无法看到具体是怎么把SVG变得干净和可操作的，有兴趣的同学请自行谷歌。
SVG描边动画实现的原理？
利用SVG图形Path元素的Stroke的stroke-dasharray和stroke-dashoffset属性。设定合适的stroke-dasharray，改变stroke-dashoffset来形成动画，看不懂的请查找相关资料。
/*css example*/
stroke-dasharray: "100 100";
stroke-dashoffset: 100;
“动画”实现方式选择
做SVG有关的网页动画，目前了解到有两条大路子：
1. CSS3 transitions
2. js
CSS3的动画的明显缺点是无法控制它的绘制时间（笔者表示css的每次transition动画结束都会触发一个transitionend的时间并且有个回调函数，有兴趣的同学求带）。如果使用Js绘制，Js需要计算出初始状态和终止状态之间的每一帧的参数。
Js的动画有两种控制方式：
1. 控制动画总时长
2. 控制帧率
第一种的缺点是，在性能较弱的设备上得到的动画效果十分不理想。
Js的动画有两种实现方式：
1. 使用setInterval和setTimeOut计时器来对每一帧
2. requestAnimationFrame（有个Js库，叫Metronome，可以研究）
