SVG描邊動畫漾月，使用了SVG圖形中PATH標簽的stroke特性制作的動畫。
為什么使用SVG胃珍？
相對于其他的圖片格式梁肿，SVG具有更好的交互性，可操作性強堂鲜，并且是矢量圖<-大家都懂的
如何獲得SVG圖形栈雳？
如果你想手寫出精美復雜的SVG圖形，我只能說：“大神求帶”缔莲。
生成SVG的工具有很多哥纫，請大家自行百度/谷歌。我所看到的文章中具體介紹了如何使用Ai導出干凈痴奏，具有標簽的蛀骇，可操作性強的SVG文件，但是該文章中關鍵的引用連接失效了读拆，無法看到具體是怎么把SVG變得干凈和可操作的擅憔，有興趣的同學請自行谷歌。
SVG描邊動畫實現(xiàn)的原理檐晕？
利用SVG圖形Path元素的Stroke的stroke-dasharray和stroke-dashoffset屬性暑诸。設定合適的stroke-dasharray蚌讼，改變stroke-dashoffset來形成動畫，看不懂的請查找相關資料个榕。
/*css example*/
stroke-dasharray: "100 100";
stroke-dashoffset: 100;
“動畫”實現(xiàn)方式選擇
做SVG有關的網(wǎng)頁動畫篡石，目前了解到有兩條大路子：
1. CSS3 transitions
2. js
CSS3的動畫的明顯缺點是無法控制它的繪制時間（筆者表示css的每次transition動畫結束都會觸發(fā)一個transitionend的時間并且有個回調(diào)函數(shù)，有興趣的同學求帶）西采。如果使用Js繪制凰萨，Js需要計算出初始狀態(tài)和終止狀態(tài)之間的每一幀的參數(shù)。
Js的動畫有兩種控制方式：
1. 控制動畫總時長
2. 控制幀率
第一種的缺點是械馆，在性能較弱的設備上得到的動畫效果十分不理想胖眷。
Js的動畫有兩種實現(xiàn)方式：
1. 使用setInterval和setTimeOut計時器來對每一幀
2. requestAnimationFrame（有個Js庫，叫Metronome霹崎，可以研究）
