SVG路徑動畫解密
原文鏈接：http://www.gbtags.com/gb/share/5581.htm
SVG路徑動畫效果現在貌似越來越多網站都使用了，給我的感覺就像是一段時間的流行而已，剛一出來大家都感覺很炫酷，時間久了也就審美疲勞啦！如果還不知道什麽是SVG路徑動畫的童鞋，快來看一個demo吧：http://tympanus.net/Development/SVGDrawingAnimation/
課程庫相關課程：?常用的三種生成SVG圖形動畫方式
怎麽樣？是不是很炫酷！另外這種技術還可以實現將logo外徑作為loading的進度環，比如現在的天貓app裏的加載進度條。想知道這是怎麽實現的嗎，我也是前些天略微研究了一下，在此分享出來吧！
要做出一個這樣的特效首先有幾個關鍵點：
-
核心技術：SVG路徑圖+SVG樣式（stroke-dasharray和stroke-dashoffset），stroke-dasharray用於創建虛線，也就是把svg圖用虛線來畫，這個屬性可以是一個數組，數組裏面的值就是虛線的值，依次循環。詳情：http://www.w3cschool.cc/svg/svg-stroke.html，而stroke-dashoffset顧名思義就是虛線在原路徑上的相對偏移量了。
- 開發前準備：將png圖在ai中打開，利用鋼筆工具描邊，畫出描邊的路徑並另存為SVG矢量圖，這就是要html中要用的路徑了（大神如果可以在html中直接用path畫出想要的路徑可以直接畫！）
- 實現原理：利用css3的animation動畫特效來控制stroke-dasharray和stroke-dashoffset值的改變，以達到路徑動畫的效果
是不是恍然大悟了，看上去很簡單的樣子吧！這裏來個本站的代碼分享：?demo傳送門
?現在詳細說明一下demo，這個demo中最下面那個不規則形狀
就是我用illustrator鋼筆隨手畫的一個閉合路徑，然後另存為.svg文件，打開後將<svg>代碼部分考到html中，並稍微改動一下成為
- <svg width="400px" height="400px">
- <path id="test" fill="none" stroke="#fff" stroke-width="3" d="M197,218c0,0-112,31-23,77s95,82,110,16s246.28,104,13.64-69S108,130.477,197,218z"/>
- <path fill="none" stroke="#fff" stroke-width="3" d="M197,218c0,0-112,31-23,77s95,82,110,16s246.28,104,13.64-69S108,130.477,197,218z" opacity="0.05"/>
- </svg>
?這個樣子，svg內的兩個path是完全相同的，第一個是用來描邊的，第二個是一個背景路徑而已，可以根據需求選擇性刪掉。
CSS部分是重點：
- #test {
- stroke-dasharray: 0,852.45;/*表示虛線描邊。數組是虛線數組。詳解：http://www.w3cschool.cc/svg/svg-stroke.html。[0，圖路徑長]*/
- stroke-dashoffset: 0;/*表示虛線的起始偏移*/
- -webkit-animation: polanim 3s linear infinite ;
- -webkit-animation-fill-mode:both ;
- }
- ?
- @-webkit-keyframes polanim {
- 0% {
- stroke-dasharray: 0, 852.45;
- stroke-dashoffset:0;
- }
- 50% {
- stroke-dasharray: 852.45, 0;
- stroke-dashoffset:0;
- }
- 100% {
- stroke-dasharray: 0, 852.45;
- stroke-dashoffset:-852.45;
- }
- }
?給需要描邊的那個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提前計算出來，代碼是：
- var path = document.getElementById(‘test‘);
- var length = path.getTotalLength();
- console.log(length)
?在css動畫設置中設置不同的百分比時間和不規則的stroke-dasharray\stroke-dashoffset就可以像demo中那個logo似的達到不那麽死板的效果
原文鏈接：http://www.gbtags.com/gb/share/5581.htm
SVG路徑動畫解密