【W(wǎng)eb動(dòng)畫】SVG 實(shí)現(xiàn)復(fù)雜線條動(dòng)畫
在上一篇文章中，我們初步實(shí)現(xiàn)了一些利用基本圖形就能完成的線條動(dòng)畫：
【W(wǎng)eb動(dòng)畫】SVG 線條動(dòng)畫入門[1]
當(dāng)然，事物都是朝著熵增焓減的方向發(fā)展的，復(fù)雜線條也肯定比有序線條要多。
所以，很多時(shí)候，我們無法人工去畫出一些十分復(fù)雜動(dòng)畫的線條，這個(gè)時(shí)候，就要借助我們前端的好幫手 PS 和 AI：
好了，假定我們現(xiàn)在要制作下圖 GIF 這樣的一個(gè) loading 圖：
上面這個(gè) SVG 線條動(dòng)畫的路徑 path ，如果靠自己手工一個(gè)點(diǎn)一個(gè)點(diǎn)定位調(diào)試畫出來的話，嘿嘿嘿你去試試。
使用 PS 導(dǎo)出路徑
估計(jì)靠手工能畫出來，也沒了大半條命。好，輪到工具上場(chǎng)，看看我們的原圖在 PS 下長(zhǎng)什么樣子(支持透明通道的 PNG、GIF 為佳)：
好，選中選框工具，按下 CTRL 選中圖層， 再選擇建立工作路徑：
這個(gè)時(shí)候會(huì)彈出一個(gè)設(shè)定容差大小的選擇，可以用不同大小的容差多試幾次，直到得到一個(gè)自己滿意的路徑。
- 容差是什么?可以理解為一種精確度，在選取顏色時(shí)所設(shè)置的選取范圍，容差越大，選取的范圍也越大，其數(shù)值是在0-255之間。
好，這個(gè)時(shí)候，路徑算是建立完成了，可以把圖層的透明度設(shè)置為 0 ，就能清晰的看到路徑長(zhǎng)啥樣：
嗯，路徑還挺帥的。
好，到了 PS 中的最后一步，點(diǎn)擊文件選項(xiàng)，導(dǎo)出路徑到 illustrator ，看圖，照著操作就好：
在 illustrator 中生成 SVG 文件
打開 AI ，打開剛剛用 PS 導(dǎo)出的 *.ai 文件。
- 沒有 AI ?身為前端居然連 AI 也沒裝(￣△￣;) ，其實(shí)我也是因?yàn)?SVG 才上手的，趕緊下一個(gè)吧。
可能你看到的是一片空白，別慌，使用選擇工具選一個(gè)矩形，就能選中路徑啦。
如果你是 PS 鋼筆工具小能手，還可以繼續(xù)對(duì)路徑進(jìn)行修改，直到自己滿意為止。
OK，接下來就是調(diào)整畫布大小，最好是路徑左上角和畫布左上角對(duì)齊，然后選中存儲(chǔ)為 SVG 文件。
好，其實(shí) AI 也沒做什么，路徑是使用 PS 生成的，為什么不直接用 PS 生成 *.svg 文件呢?因?yàn)槲矣玫陌姹?PS 還沒支持直接存儲(chǔ)為 SVG 格式。然后其實(shí)也可以直接在 AI 上繪制路徑，這個(gè)就看設(shè)計(jì)師或者你對(duì)哪個(gè)工具更熟悉了。
獲取 SVG 的 path 路徑
OK，最后把剛剛保存的 *.svg 路徑的文件用瀏覽器打開，一片空白是正常的，右鍵查看網(wǎng)頁(yè)源代碼：
大功告成，這里面，路徑就是我們需要的路徑了!
好，把我們要的
CodePen Demo -- SVG Path Animation[2]
利用這個(gè)技巧，我們就可以去生成各類復(fù)雜的 SVG 動(dòng)畫了：
使用 javascript 計(jì)算 path 路徑長(zhǎng)度
還有一個(gè)問題，線條動(dòng)畫需要知道整個(gè) path 路徑的長(zhǎng)度，簡(jiǎn)單的線條我們還可以利用加減法算出整個(gè)圖形的長(zhǎng)度。那么復(fù)雜路徑的長(zhǎng)度怎么計(jì)算?
利用一段簡(jiǎn)單的 js 可以完成：
- <svg>
- <path d="...">
- </svg>
- var obj = document.querySelector("path");
- var length = obj.getTotalLength();
- console.log(length); // 377.0433
好了，有了復(fù)雜圖形的一些路徑，我們就可以制作出很多酷炫 SVG 動(dòng)畫效果了。撒花。
最后
本文到此結(jié)束，一個(gè)簡(jiǎn)單的制作復(fù)雜 SVG 路徑的技巧，希望對(duì)你有幫助 :)
更多精彩 CSS 技術(shù)文章匯總在我的 Github -- iCSS[3] ，持續(xù)更新，歡迎點(diǎn)個(gè) star 訂閱收藏。
如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。
參考資料
[1]【W(wǎng)eb動(dòng)畫】SVG 線條動(dòng)畫入門:
http://www.cnblogs.com/coco1s/p/6225973.html
[2]CodePen Demo -- SVG Path Animation:
http://codepen.io/Chokcoco/pen/GNbwYV/
[3]Github -- iCSS:
https://github.com/chokcoco/iCSS
