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