近期看了幾篇三精-大精wing的“交互炸了”系列文章，收穫頗多，這裏學習記錄一下。
本文知識點一覽：
項目地址在最下面。
本篇主要記錄如何動態繪製曲線，從而形成很精緻的特性，先上圖：
SVG簡介
SVG 意爲可縮放矢量圖形（Scalable Vector Graphics），使用 XML 格式定義圖像。其優勢：
SVG 可被非常多的工具讀取和修改（比如記事本）
SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質量地打印
SVG 可在圖像質量不下降的情況下被放大
SVG 圖像中的文本是可選的，同時也是可搜索的（很適合製作地圖）
SVG 可以與 Java 技術一起運行
SVG 是開放的標準
更多可查看 w3school的SVG教程
SVG路徑
格式：
M = moveto， 相當於android 裏的 moveTo()
L = lineto， 相當於lineTo()進行畫直線
H = horizontal lineto， 畫水平直線
V = vertical lineto， 畫豎直直線
C = curveto， 相當於android 裏的 cubicTo()
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath
點我查看一個完整的svg路徑，在空白處右鍵，選擇查看源代碼，可查看其源碼：
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path d="M153 334
C153 334 151 334 151 334
C151 339 153 344 156 344
C164 344 171 339 171 334
C171 322 164 314 156 314
C142 314 131 322 131 334
C131 350 142 364 156 364
C175 364 191 350 191 334
C191 311 175 294 156 294
C131 294 111 311 111 334
C111 361 131 384 156 384
C186 384 211 361 211 334
C211 300 186 274 156 274"
style="fill:white;stroke:red;stroke-width:2"/>
</svg>因此，只要我們能得到上面path字段中的路徑字符串，接下來就可以爲所欲爲了。
如何製作並使用SVG路徑圖
這裏我們有兩種方式：
首先我們可以自己畫，推薦一個開源項目：Method Draw，可在線繪製，然後導出SVG，但畢竟我們不是幹UI的，所以我們可以選擇
Plan B，把圖片轉換成SVG。
推薦一款神器：Vector Magic，記得下載破解版。我這裏用的是GIMP，由於GIMP要用魔棒選擇邊界，所以這個工具只能用來轉換
簡單的圖形，複雜圖形，請選擇Vector Magic。
打開一張圖：
用魔棒工具描邊：
選擇路徑：
導出路徑：
如此便製作好了一個SVG，打開是這樣：
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
width="3.125in" height="3.125in"
viewBox="0 0 225 225">
<path id="選區"
fill="none" stroke="black" stroke-width="1"
d="M 225.00,0.00
C 225.00,0.00 225.00,225.00 225.00,225.00
225.00,225.00 0.00,225.00 0.00,225.00
0.00,225.00 0.00,0.00 0.00,0.00
0.00,0.00 225.00,0.00 225.00,0.00 Z
……中間的省略……
M 184.00,187.00
C 181.96,192.65 175.76,191.16 171.00,190.00
173.09,184.03 178.96,186.10 184.00,187.00 Z" />
</svg>
接下來，我們只需要把path字段中的字符串保存到String文件中即可：
如何動態繪製曲線
我們已經拿到了路徑的字符串，接下來就是解析字符串，轉換成Path對象了，這裏直接用了GAStudio哥的一個工具
這裏之所以要取最大值，因爲我們的路徑可能有很多條，查看上面我們得到的路徑字符串，每個Z代表一段結束。如果不取最大值，會
導致：較短路徑繪製完畢後，較長的路徑仍然沒有閉合，大家可以嘗試註釋掉取最值的代碼，然後給mLength賦不同值，看看最終繪製的效果，就能明白了。
接下來我們配合屬性動畫進行動態繪製：
代碼很簡單，但是這個api可能比較陌生：DashPathEffect(float intervals[], float phase).
DashPathEffect 可以使 paint 畫出類似虛線的樣子，並且可以任意指定虛實的排列方式。intervals 數組，必須是偶數長度，
且 >=2，指定了多少長度的實線之後再畫多少長度的空白。
我們這裏指定，繪製 distance 以後留白，視覺效果就是隻繪製distance 的路徑。
下面繪製跑動線時，先繪製0長度實線，再繪製 distance 空白，然後繪製10dp的高亮線，最後留白，視覺效果就是一個不斷追蹤的
高亮線。
如何製作GIF圖
思路，先錄製視頻，再用工具轉換。
博主使用的android studio，直接用自帶的錄像工具錄像：
參數使用默認：
在手機上演示完畢後，保存錄像。
轉換過程可以使用PS，博主隨便在網上找了一個工具，用着感覺還不錯：
設置起終點和文件尺寸，尺寸不宜太大，保存即可。