SVG路徑動畫解密

原文:

svg路徑動畫解密

svg路徑動畫效果現在貌似越來越多**都使用了，給我的感覺就像是一段時間的流行而已，剛一出來大家都感覺很炫酷，時間久了也就審美疲勞啦！如果還不知道什麼是

svg路徑動畫的童鞋，快來看乙個demo吧：

課程庫相關課程： 常用的三種生成svg圖形動畫方式

核心技術：

svg路徑圖+

svg樣式（stroke-dasharray和stroke-dashoffset），stroke-dasharray用於建立虛線，也就是把svg圖用虛線來畫，這個屬性可以是乙個陣列，陣列裡面的值就是虛線的值，依次迴圈。詳情：而stroke-dashoffset顧名思義就是虛線在原路徑上的相對偏移量了。

開發前準備：將png圖在ai中開啟，利用鋼筆工具描邊，畫出描邊的路徑並另存為svg向量圖，這就是要html中要用的路徑了（大神如果可以在html中直接用path畫出想要的路徑可以直接畫！）

實現原理：利用css3的animation動畫特效來控制stroke-dasharray和stroke-dashoffset值的改變，以達到路徑動畫的效果

是不是恍然大悟了，看上去很簡單的樣子吧！這裡來個本站的**分享： demo傳送門

現在詳細說明一下demo，這個demo中最下面那個不規則形狀

就是我用illustrator鋼筆隨手畫的乙個閉合路徑，然後另存為.svg檔案，開啟後將

這個樣子，svg內的兩個path是完全相同的，第乙個是用來描邊的，第二個是乙個背景路徑而已，可以根據需求選擇性刪掉。

css部分是重點：

@-webkit

-keyframes polanim 50%

100%

}

給需要描邊的那個path定義乙個id（class也行），然後在css中定義了stroke-dasharray、

stroke-dashoffset這兩個關鍵點，唯一疑惑的就是那個

stroke-dasharray: 0,

852.45

;的那個

852.45

了吧，這個值就是整個路徑的長度。前50%的動畫通過animation來動態改變

stroke-dasharray的值，就好像乙個路徑上的虛線的實部分從短到長，而虛部分從長到短從而達到了路徑動畫的效果，後50%的動畫是想讓路徑畫完後，再按照路徑消失一圈，這裡用到了

stroke-dasharray和

stroke-dashoffset的同時改變，也就是虛線的

實部分從長到短的同時再改變虛線的偏移量，把實部分往回拉。如果實在想不通的話就反覆試著改這幾個引數值來看看各是什麼效果好啦。

哦 對了，

整個路徑的長度

852.45可以用js提前計算出來，**是：

path

=document

.getelementbyid

('test'

);var

length

=path

.gettotallength

();console

.log

(length

)

在css動畫設定中設定不同的百分比時間和不規則的stroke-dasharray\

stroke-dashoffset

就可以像demo中那個logo似的達到不那麼死板的效果

SVG路徑動畫 3

該css屬性主要用於在svg中建立各種虛線 line1 line2 該css屬性用於偏移虛線 注意 stroke dasharray與stroke dashoffset要配套使用。在無stroke dasharray的情況下，stroke dashoffset不起作用 先來看乙個簡單的例子 line...

svg波浪動畫

之前做過css動畫 canvas動畫，但svg動畫第一次做，最終效果如下圖所示。由上圖可以看出，波浪動畫是由多個不同的 波浪 組成，而每個波浪則是由近似正弦圖形組成，最後的 波動 效果，其實是靜態的波浪迴圈向左運動產生的。上面是寫好的單個波浪，其中d屬性繪製了形狀，fill屬性表示填充的顏色。d屬性...

SVG 形狀 路徑

標籤用來定義路徑。標籤用來定義路徑。下面的命令可用於路徑資料 注釋 以上所有命令均允許小寫字母。大寫表示絕對定位，小寫表示相對定位。請把下面的 拷貝到記事本，然後把檔案儲存為 path1.svg 把此檔案放入您的 web 目錄 上面的例子定義了一條路徑，它開始於位置 250 150，到達位置 150...