【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 實現複雜線條動畫） 

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