近期看了幾篇三精-大精wing的“互動炸了”系列文章，收穫頗多，這裡學習記錄一下。

本文知識點一覽：

專案地址在最下面。

本篇主要記錄如何動態繪製曲線，從而形成很精緻的特性，先上圖：

SVG簡介

SVG 意為可縮放向量圖形（Scalable Vector Graphics），使用 XML 格式定義影象。其優勢：

SVG 可被非常多的工具讀取和修改（比如記事本）

SVG 與 JPEG 和 GIF 影象比起來，尺寸更小，且可壓縮性更強。

SVG 是可伸縮的

SVG 影象可在任何的解析度下被高質量地列印

SVG 可在影象質量不下降的情況下被放大

SVG 影象中的文字是可選的，同時也是可搜尋的（很適合製作地圖）

SVG 可以與 Java 技術一起執行

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，博主隨便在網上找了一個工具，用著感覺還不錯：

設定起終點和檔案尺寸，尺寸不宜太大，儲存即可。