SVG 線條動畫入門

一般咱們說的 Web 動畫，包含了三大類。

• CSS3 動畫

• javascript 動畫（canvas）

• html 動畫（SVG）

我的認爲 3 種動畫各有優劣，實際應用中根據掌握狀況做出取捨，本文討論的是我認爲 SVG 中在實際項目中很是有應用價值 SVG 線條動畫。

舉個栗子
SVG 線條動畫，在一些特定的場合下能夠解決使用 CSS 沒法完成的動畫。尤爲是在進度條方面，看看最近項目裏的一個小需求，一個這種形狀的進度條：

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

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

CSS3 是能夠作到的，就是很麻煩。可是若是採用 SVG 的話，迎刃而解。

See the Pen 不規則進度條 by Chokcoco (@Chokcoco) on CodePen.

咱們假定你在閱讀本文的時候有了必定的 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： 表示 的版本，目前只有 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 可控制用來描邊的點劃線的圖案範式。

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

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

See the Pen stroke-dasharray by Chokcoco (@Chokcoco) on CodePen.

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

@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 線條動畫實現按鈕交互

See the Pen svg線條動畫實現按鈕交互 by Chokcoco (@Chokcoco) on CodePen.

SVG 線條動畫實現圓形進度條
See the Pen svg線條動畫實現圓形進度條 by Chokcoco (@Chokcoco) on CodePen.

多 SVG 圖形線條動畫配合
以前我司一個 h5 裏面應用過的，多SVG 圖形線條動畫配合，能夠製做一些比較酷炫的動畫，頗有科技感。

See the Pen JbQNME by Chokcoco (@Chokcoco) on CodePen.

正文結束，我在個人 Github 上，使用 SVG 實現了一些圖形 — SVG奇思妙想（https://github.com/chokcoco/SVG），Demo能夠戳這裏（http://sbco.cc/demo/svg/html/index.html）。

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

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