Android VectorDrawable與SVG

VectorDrawable

Android L開始提供了新的API VectorDrawable 可以使用SVG類型的資源，也就是矢量圖。在xml文件中的標簽是，下面是一個例子

    android:height=256dp
    android:width=256dp
    
    android:viewportWidth=32
    android:viewportHeight=32>

  
  

這樣就定義好了一個靜態的矢量圖，可以像一般的圖片資源使用，設置到imageView中會顯示出一個心形。控制顯示心形的就是上面path這個標簽，一個path代表一個元素，繪制的內容是pathData下的一長串字符，裡面是SVG繪制的一系列命令，提供moveTo、lineTo、close等操作，可以和Graphics 中的Path操作對應起來，具體可以查看SVG path Ref，後面會簡要說明一下。
VectorDrawable定義的是一張靜態圖，還有一個類AnimatedVectorDrawable，可以讓矢量圖有動畫效果。一般需要三個步驟：

定義VectorDrawable

定義AnimatedVectorDrawable，給上面矢量圖的元素添加動畫

定義動畫文件

由於矢量圖的特點，AnimatedVectorDawable可以實現一些很特別的效果，對VectorDrawable裡的pathData做動畫，可以從一個圖形漸變到另一個圖形，比如Material Design裡的toolbar icon；對trimPathStart、trimPathEnd做動畫，可以得到圖形的繪制軌跡。

SVG Path Data

主要有以下一些命令

M： move to 移動繪制點 L：line to 直線 Z：close 閉合 C：cubic bezier 三次貝塞爾曲線 Q：quatratic bezier 二次貝塞爾曲線 A：ellipse 圓弧

每個命令都有大小寫形式，大寫代表後面的參數是絕對坐標，小寫表示相對坐標。參數之間用空格或逗號隔開

命令詳解：

M (x y) 移動到x,y L (x y) 直線連到x,y，還有簡化命令H(x) 水平連接、V(y)垂直連接 Z，沒有參數，連接起點和終點 C(x1 y1 x2 y2 x y)，控制點x1,y1 x2,y2，終點x,y Q(x1 y1 x y)，控制點x1,y1，終點x,y A(rx ry x-axis-rotation large-arc-flag sweep-flag x y)
rx ry 橢圓半徑
x-axis-rotation x軸旋轉角度
large-arc-flag 為0時表示取小弧度，1時取大弧度
sweep-flag 0取逆時針方向，1取順時針方向
有個圖解：

應用

在github上看到一個VectorDrawable應用的例子，實現了一個動態效果的searchbar，原理就是對VectorDrawable trimPathStart這個屬性做動畫。最初的設計在這裡，照著實現一下：

Reference

 www.2cto.com