SVG描邊動畫實現過程

準備工具：Adobe AI+PS

一、肯定SVG畫布的大小，在PS中切出須要描邊效果的區域，以此區域的大小作爲SVG容器的大小。

 

二、將PS中切好的圖片直接拖拽到AI中

 

 

三、使用AI中的鋼筆工具勾勒出SVG路徑，注意要將前景色置透明，不然路徑包圍的區域將會被前景色填充。使用鋼筆工具可適當多添加些錨點，以保證路徑的精確。

 

 

 

四、筆畫多的路徑須要分開繪製，以上圖中的「留」字爲栗子

 

 

 

五、重複上面步驟，將全部添加描邊效果的部位勾勒出來

 

 

六、在AI中將鋼筆工具勾勒好的路徑保存成 SVG 格式      File → Save As  選擇SVG格式保存

 

 

 

 

 

 

 

 

 

七、打開剛剛保存好的 SVG 文件，就獲得了 SVG 的路徑代碼

 

 

 

 

八、將得到到的路徑代碼按需稍加修改，其中描邊的顏色和描邊的寬度可在AI中繪製的時候設置好，也可在生成的代碼中按需修改。

 

 

九、CSS3 SVG描邊動畫及實現原理，依賴兩個屬性stroke-dasharray和stroke-dashoffset
stroke-dasharray 表示虛線描邊。可選值爲：none, dasharray, inherit. 其中，none表示不是虛線；dasharray爲一個逗號或空格分隔的數值列表。表示各個虛線端的長度。能夠是固定的長度值，也能夠是百分比值；inherit表繼承。
stroke-dashoffset 表示虛線的起始偏移。可選值爲：percentage, length, inherit. 百分比值，長度值，繼承。
原理就是將描邊設置虛線，stroke-dasharray的數值與路徑長度一致或者大於路徑長度便可，需嘗試肯定，路徑長的話就給個大點的值，路徑短就給個小點的值，效果滿意便可。
而後再設置路徑的偏移量stroke-dashoffset與stroke-dasharray的值同樣的大便可，而後添加定義好的動畫，將偏移量從樣式中設置好的數值過渡到0，就實現了描邊的效果。

 

/**********SVG描邊動畫**********/

@include keyframes(dash, webkit moz ms spec){
    to {
        stroke-dashoffset: 0;
    }
}
/**********SVG描邊動畫**********/

path,rect{
    stroke-dasharray: 400;
    stroke-dashoffset: 400;
    @include animation(dash 1.5s ease-in-out 1);
    &.p-long{
        stroke-dasharray: 2000;
        stroke-dashoffset: 2000;
        @include animation(dash 1.5s ease-in-out 1);
    }
}

十、描邊效果

 

 

十一、後續處理，經過 js 控制SVG效果執行完成以後將包裹着SVG的DIV隱藏起來，再將正常的設計稿樣子顯示出來。

這樣就實現了先是看到SVG的路徑動畫，動畫執行以後看到真實內容的效果了~