SVG路徑動畫解密

原文: SVG路徑動畫解密

原文連接：http://www.gbtags.com/gb/share/5581.htm

SVG路徑動畫效果如今貌似愈來愈多網站都使用了，給個人感受就像是一段時間的流行而已，剛一出來你們都感受很炫酷，時間久了也就審美疲勞啦！若是還不知道什麼是SVG路徑動畫的童鞋，快來看一個demo吧：http://tympanus.net/Development/SVGDrawingAnimation/

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

怎麼樣？是否是很炫酷！另外這種技術還能夠實現將logo外徑做爲loading的進度環，好比如今的天貓app裏的加載進度條。想知道這是怎麼實現的嗎，我也是前些天略微研究了一下，在此分享出來吧！

要作出一個這樣的特效首先有幾個關鍵點：

1. 核心技術：SVG路徑圖+SVG樣式（stroke-dasharray和stroke-dashoffset），stroke-dasharray用於建立虛線，也就是把svg圖用虛線來畫，這個屬性能夠是一個數組，數組裏面的值就是虛線的值，依次循環。詳情：http://www.w3cschool.cc/svg/svg-stroke.html，而stroke-dashoffset顧名思義就是虛線在原路徑上的相對偏移量了。
2. 開發前準備：將png圖在ai中打開，利用鋼筆工具描邊，畫出描邊的路徑並另存爲SVG矢量圖，這就是要html中要用的路徑了（大神若是能夠在html中直接用path畫出想要的路徑能夠直接畫！）
3. 實現原理：利用css3的animation動畫特效來控制stroke-dasharray和stroke-dashoffset值的改變，以達到路徑動畫的效果

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

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

就是我用illustrator鋼筆隨手畫的一個閉合路徑，而後另存爲.svg文件，打開後將<svg>代碼部分考到html中，並稍微改動一下成爲

1. <svg width="400px" height="400px">
2. <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"/>
3. <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"/>
4. </svg>

 這個樣子，svg內的兩個path是徹底相同的，第一個是用來描邊的，第二個是一個背景路徑而已，能夠根據需求選擇性刪掉。

CSS部分是重點：

1. #test {
2. stroke-dasharray: 0,852.45;/*表示虛線描邊。數組是虛線數組。詳解：http://www.w3cschool.cc/svg/svg-stroke.html。[0，圖路徑長]*/
3. stroke-dashoffset: 0;/*表示虛線的起始偏移*/
4. -webkit-animation: polanim 3s linear infinite ;
5. -webkit-animation-fill-mode:both ;
6. }
7.  
8. @-webkit-keyframes polanim {
9. 0% {
10. stroke-dasharray: 0, 852.45;
11. stroke-dashoffset:0;
12. }
14. 50% {
15. stroke-dasharray: 852.45, 0;
16. stroke-dashoffset:0;
17. }
19. 100% {
20. stroke-dasharray: 0, 852.45;
21. stroke-dashoffset:-852.45;
22. }
23. }

 給須要描邊的那個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提早計算出來，代碼是：

1. var path = document.getElementById('test');
2. var length = path.getTotalLength();
3. console.log(length)

 在css動畫設置中設置不一樣的百分比時間和不規則的stroke-dasharray\stroke-dashoffset就能夠像demo中那個logo似的達到不那麼死板的效果

原文連接：http://www.gbtags.com/gb/share/5581.htm