帥氣的SVG路徑描邊動畫 (path animation) 實戰應用

這是個人一個關於SVG的應用的技術分享網站svgtrick.com，會同步一些文章到這裏來，更多關於SVG技術應用能夠去網站看看。

要是以爲文章還不錯的話，能夠多多推薦哦。

今天這篇文章來聊聊SVG路徑描邊動畫。

關於路徑描邊動畫你們能夠去看看這兩個網站，Playstation 4和Xbox One，這兩個網站中就使用了SVG中的路徑（path）來實現的描邊動畫效果。

上面圖所示的效果就是咱們要實現的效果。

準備矢量文件

在實際編寫動畫效果前，最重要的是要準備矢量文件。第一步是要使用Illustrator來建立你須要描邊效果的矢量文件，須要使用鋼筆工具來建立描邊效果的矢量文件。固然若是你僅僅是對怎麼實現描邊的動畫效果感興趣，能夠跳過這一步。

命名圖層

在設計圖形的時候，要養成良好的圖層命名習慣，尤爲是要導出SVG文件的時候更應如此。若是不對圖層命好命，那麼導出來的SVG文件會異常複雜難以辨認，因此爲了後面開發方便，仍是好好的對圖層命好命吧。圖層的名字保持簡潔容易理解就能夠了。對於嵌套的子圖層也要命好名，以下圖所示：

導出

設計好圖形後，就可使用Illustrator來導出爲SVG文件了，在導出文件前須要對圖形進行一些設置，相關的設置能夠去看看我之前寫一篇文章，這裏就再也不闡述了。

輸出SVG文件

再一次提醒在輸出SVG文件前，記得把圖層命好名。上面的圖像導出SVG後，使用代碼編輯器工具打開SVG文件：

看到代碼裏的ID了麼？經過ID咱們就能夠清楚的知道每條路徑（patn）所對應的圖形，這就是圖層命名帶來的好處。想象一下，若是你在導出前沒有命好名，爲了找到每條路徑（path）所對應的圖形那是怎樣的一種痛苦。

優化

固然導出SVG後，還須要進一步優化和壓縮SVG文件，通常使用像SVGO相似的工具就能夠很好的對SVG文件進行優化。不過，像咱們如今這樣要直接來操縱SVG文件來編寫動畫效果，最好是不要以開始就對SVG文件進行優化。咱們能夠在邊寫完動畫效果後再對它進行優化。

至於SVG文件的優化能夠去看看這篇文章。

動起來

在開始實現路徑（path）描邊動畫前，先要明白stroke-dasharray 和stroke-dashoffset這兩個概念。

Stroke Dash Array

在SVG中也能夠像CSS中那樣指定邊框爲虛線要用到屬性stroke-dasharray。stroke-dasharray屬性的參數，是一組用逗號分割的數字組成的序列。須要注意的是，這裏的數字必須用逗號分割，雖然也能夠插入空格，可是數字之間必須用逗號分開。每一組數字，第一個用來表示實線，第二個用來表示空白。

若是隻有一個數字5，則表示會先畫5px實線，緊接着是5px空白，而後又是5px實線，從而造成虛線。

好比我有一條200px的線，我把stroke-dasharray的指定爲200，它就表示先畫200px實線，緊接着是200px空白，而後又是200px實線，從而造成虛線。

Stroke Dash Offset

stroke-dashoffset屬性表示路徑從開始位置的偏移量。好比在下面我定義了stroke-dasharray的值爲五、十、30、10表示5px的虛線、10px的空白、30px的虛線、10px的空白，如此循環。而後，經過改變它的stroke-dashoffset的值來看看會發生什麼：

從圖片中能夠看到，經過調整stroke-dashoffset的值，能夠從新設置路徑開始的位置。在上面的實例中，我設置stroke-dashoffset的值爲15px，能夠看到路徑移動了15px的距離。

動態改變偏移值

咱們把路徑的stroke-dasharray和stroke-dashoffset都設置爲200px的值，會發現什麼也看不到了，由於路徑的虛線和空白距離都是同樣的，而stroke-dashoffset的值也是200px，即表示路徑從開始的位置偏移了200px的值（記住路徑的偏移是從左邊的原點開始的），因此就看到一片空白。

若是使用CSS3的來動態改變路徑的偏移值即從200px到0，就會看到路徑就像是用筆慢慢畫出來的。

冰淇淋描邊動畫效果

原理明白，下面正式開幹了。

首先在Illustrator中獲得相關路徑的長度，能夠在文檔信息面板中獲得路徑的長度。

爲了更好的來編寫動畫效果，須要給每個路徑賦予了一個類名，這樣能夠針對每一條路徑來更加精細控制動畫效果。

而後，使用上面說的stroke-dasharray 和stroke-dashoffset兩個屬性來實現描邊動畫效果。

一個帥氣的路徑描邊動畫效果就實現了。

看起來好像不錯了，可是還有優化的空間。

進一步優化

經過改變一些路徑的虛線的長度，能夠達到加快路徑繪製的動畫效果。很好理解，一樣在2s內繪製一個短的虛線確定要比繪製一個長的虛線的要快，即移動小一點的偏移量要比大一點的偏移值在一樣的時間內確定是要快一點。配合動畫的延遲執行即animation-delay可使動畫效果更有趣一點。

最終線上代碼效果能夠去這裏看看demo。

最後要提醒一點的是：這種動畫效果對於使用embedded方式來引入SVG的情形是不支持的。若是要使用這樣的動畫效果，最好是使用inline svg的方式來引入svg即直接把SVG文件代碼寫到html文件中。

友情提醒

下面來講說一些瀏覽器的支持狀況。

Mircosoft Edge

最新的Mircosoft Edge瀏覽器是支持這種描邊動畫效果的，不過它要求使用有明確單位的值，好比stroke-dasharray的值就必須爲200px。

Internet Explorer

不幸的的是，Internet Explorer瀏覽器不支持在CSS中使用動畫來控制stroke-dashoffset的值。

若是你必定要在IE上也實現描邊動畫效果，能夠藉助下面兩種javascript方法來實現：

解決方法1。

解決方法2是使用一個javascript的庫來實現，vivus。

原文地址，根據本身的理解有所刪減。

推薦參考資料：

How SVG Line Animation Works

Polygon feature design: SVG animations for fun and profit