[整理]SVG Path Animations

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，可以研究）