SVG動畫

【轉】 SVG 學習<五> SVG動畫

先上個動畫圖

說道SVG動畫不得不提到兩個屬性：stroke-dasharray（這個前面有提到，作虛線的）stroke-dashoffset （這個是關鍵）。

先說說stroke-dasharray 以前提過 能夠把線條作成虛線狀，值能夠爲一個數值 也能夠是一個數組。詳見：SVG 學習<二>進階 SVG世界，視野，視窗 stroke屬性 svg分組 最後一段。在動畫裏 stroke-dasharray 用來繪製路徑或者虛線環繞效果。

stroke-dashoffset ： 官方解釋 svg的偏移

作了幾個demo後發現 stroke-dashoffset 相似margin只不過 stroke-dashoffset 的偏移是相對於 圖形或線段的第一個點，好比 矩形就是相對於矩形右上角的點，偏移則是相對於svg元素路徑的偏移。

案例分解

先看上圖的第二個圖形（紅色矩形）

HTML代碼

<rect class="No1" x="220" y="30" width="200" height="200" fill="none" stroke-width="10" stroke="red"/>

css代碼

        .No1{
            stroke-dasharray: 900;
              stroke-dashoffset: 900;
              -webkit-animation: dash 5s linear infinite;
              animation: dash 5s linear infinite;
        }
/*動畫*/
        @-webkit-keyframes anim { to { stroke-dashoffset: 0; } }
        @keyframes anim { to { stroke-dashoffset: 0; } }

代碼解析 

stroke-dasharray 的值 大於等於 矩形周長，若等於周長動畫完成後動畫馬上結束，這裏我設置的值比周長多100 動畫會在圖形繪製結束後幾秒後結束，視覺效果會好一些。

stroke-dashoffset 的值 通常等於 矩形周長 ，若大於 矩形周長 動畫效果延時出現， 若小於 矩形周長 動畫效果提早出現。

 

第三個藍色虛線環繞矩形

HTML代碼

<rect class="No2" x="460" y="30" width="100" height="200" fill="none" stroke-width="10" stroke="blue"/>

css代碼

        .No2{
            stroke-dasharray: 30;
              stroke-dashoffset: 600;
              -webkit-animation: anim 5s linear infinite;
              animation: anim 5s linear infinite;
        }
/*動畫*/
        @-webkit-keyframes anim { to { stroke-dashoffset: 0; } }
        @keyframes anim { to { stroke-dashoffset: 0; } }

stroke-dasharray和矩形周長差值成倍數 則造成虛線環繞效果。

 

第四個綠色矩形

HTML代碼

<rect class="No3" x="620" y="30" width="250" height="150" fill="none" stroke-width="10" stroke="green"/>

css代碼

        .No3{
            stroke-dasharray: 900;
              stroke-dashoffset: 2700;
              -webkit-animation: anim 5s linear infinite;
              animation: anim 5s linear infinite;
        }
/*動畫*/
        @-webkit-keyframes anim { to { stroke-dashoffset: 0; } }
        @keyframes anim { to { stroke-dashoffset: 0; } }

stroke-dashoffset 值爲矩形周長三倍 邊框圍繞矩形三週， 若爲矩形周長兩倍 邊框圍繞矩形兩週。

 

第一個青色五角星

HTMl代碼

<polygon points="100,10 40,180 190,60 10,60 160,180" stroke-width="5" stroke="rgb(0,200,200)" fill="none"/>

css代碼

        polygon{
            stroke-dasharray: 2000;
              stroke-dashoffset: 2000;
              transition: 2s all;
        }
        svg:hover polygon{
            stroke-dasharray: 30,10;
            stroke-dashoffset: 0;
        }

hover效果 stroke-dashoffset 值大於等於五角星全部邊長總和。

 

若還有不懂，多試幾回demo改改 stroke-dashoffset 和 stroke-dasharray的值就明白了。