【Web動畫】SVG 線條動畫入門

通常我們說的 Web 動畫，包含了三大類。

• CSS3 動畫
• javascript 動畫（canvas）
• html 動畫（SVG）

個人認為 3 種動畫各有優劣，實際應用中根據掌握情況作出取捨，本文討論的是我認為 SVG 中在實際項目中非常有應用價值 SVG 線條動畫。

舉個慄子

SVG 線條動畫，在一些特定的場合下可以解決使用 CSS 無法完成的動畫。尤其是在進度條方面，看看最近項目里的一個小需求，一個這種形狀的進度條：

把裡面的進度條單獨拿出來，也就是需要實現這樣一個效果：

腦洞大開一下，使用 CSS3 如何實現這樣一個進度條呢。

CSS3 是可以做到的，就是很麻煩。但是如果採用 SVG 的話，迎刃而解。

我們假定你在閱讀本文的時候有了一定的 SVG 基礎，上面代碼看看就懂了，好了，本文到此結束。

好吧，還是一步一步解釋，上面進度條的主要 SVG 代碼如下：

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" class="circle-load-rect-svg" width="300" height="200" viewbox="0 0 600 400">
    <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-path"/>
    <polyline points="5 5, 575 5, 575 200, 5 200" class="g-rect-fill"/>
</svg>

SVG 為何

可縮放矢量圖形，即SVG，是W3C XML的分枝語言之一，用於標記可縮放的矢量圖形。（摘自MDN）

上面代碼中，先談談 svg 標簽：

• version： 表示 <svg> 的版本，目前只有 1.0，1.1 兩種
• xmlns：http://www.w3.org/2000/svg 固定值
• xmlns:xlink：http://www.w3.org/1999/xlink 固定值
• xml:space：preserve 固定值，上述三個值固定，表示命名空間，當數據單獨存在svg文件內時，這3個值不能省略
• class：就是我們熟悉的 class
• width | height： 定義 svg 畫布的大小
• viewbox： 定義了畫布上可以顯示的區域，當 viewBox 的大小和 svg 不同時，viewBox 在屏幕上的顯示會縮放至 svg 同等大小（暫時可以不用理解）

有了 svg 標簽，我們就可以愉快的在內部添加 SVG 圖形了，上面，我在 svg 中定義了兩個 polyline 標簽。

SVG 基本形狀

polyline：是SVG的一個基本形狀，用來創建一系列直線連接多個點。

其實，polyline 是一個比較不常用的形狀，比較常用的是path，rect，circle 等。這裡我使用polyline 的原因是需要使用 stroke-linejoin 和 stroke-linecap 屬性，線上段連接處創建圓滑過渡角。

SVG 中定義了一些基本形狀，在繼續下文之前，建議點進去先瞭解一些基本圖形的標簽及寫法：

SVG 線條動畫

好，終於到本文的重點了。

上面，我們給兩個 polyline 都設置了 class，SVG 圖形的一個好處就是部分屬性樣式可以使用 CSS 的方式書寫，更重要的是可以配合 CSS 動畫一起使用。

上面，主要的 CSS 代碼：

.g-rect-path{
    fill: none;
    stroke-width:10;
    stroke:#d3dce6;
    stroke-linejoin:round;
    stroke-linecap:round;
}

.g-rect-fill{
    fill: none;
    stroke-width:10;
    stroke:#ff7700;
    stroke-linejoin:round;
    stroke-linecap:round;
    stroke-dasharray: 0, 1370;
    stroke-dashoffset: 0;
    animation: lineMove 2s ease-out infinite;
}

@keyframes lineMove {
    0%{
        stroke-dasharray: 0, 1350;
    }
    100%{
        stroke-dasharray: 1350, 1350;
    }
}

這尼瑪是什麼 CSS？怎麼除了 animation 全都不認識？ 

莫慌，其實很多和 CSS 對比一下非常好理解，只是換了個名字：

• fill：類比 css 中的 background-color，給 svg 圖形填充顏色；
• stroke-width：類比 css 中的 border-width，給 svg 圖形設定邊框寬度；
• stroke：類比 css 中的 border-color，給 svg 圖形設定邊框顏色；
• stroke-linejoin | stroke-linecap：上文稍微提到過，設定線段連接處的樣式；
• stroke-dasharray：值是一組數組，沒數量上限，每個數字交替表示劃線與間隔的寬度；
• stroke-dashoffset：則是虛線的偏移量

重點講講能夠實現線條動畫的關鍵屬性 stroke-dasharray 。

屬性 stroke-dasharray 可控制用來描邊的點劃線的圖案範式。

它是一個<length>和<percentage>數列，數與數之間用逗號或者空白隔開，指定短劃線和缺口的長度。如果提供了奇數個值，則這個值的數列重覆一次，從而變成偶數個值。因此，5,3,2等同於5,3,2,5,3,2。

解釋很蒼白，直接看例子：

上面，填充進度條，使用了下麵這個動畫 ：

@keyframes lineMove {
    0%{
        stroke-dasharray: 0, 1350;
    }
    100%{
        stroke-dasharray: 1350, 1350;
    }
}

stroke-dasharray: 0, 1350;，表示線框短劃線和缺口的長度分別為 0 和 1350，所以一開始整個圖形都是被缺口占據，所以在視覺效果上長度為 0。

然後過渡到 stroke-dasharray: 1350, 1350，表示線框短劃線和缺口的長度分別為 1350 和 1350，因為整個圖形的長度就是 1350，所以整個進度條會被慢慢填充滿。

掌握了這個技巧後，就可以使用 stroke-dasharray 和 stroke-dashoffset 製作很多不錯的交互場景：

SVG 線條動畫實現按鈕交互

SVG 線條動畫實現圓形進度條

多 SVG 圖形線條動畫配合

之前我司一個 h5 裡面應用過的，多SVG 圖形線條動畫配合，可以製作一些比較酷炫的動畫，很有科技感。

正文結束，我在我的 Github 上，使用 SVG 實現了一些圖形 -- SVG奇思妙想，Demo可以戳這裡。

下篇文章將會詳述非規則圖形，如何使用 PS + AI 生成 path 路徑，實現 SVG 動畫，放個 Demo，敬請期待。

（12.28更新，下篇文章已出：【Web動畫】SVG 實現複雜線條動畫） 

到此本文結束，如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。