Android VectorDrawable與SVG

標籤：android   向量圖   

VectorDrawable

Android L開始提供了新的API VectorDrawable 可以使用SVG類型的資源，也就是向量圖。在xml檔案中的標籤是<vector>，下面是一個例子

<!-- res/drawable/heart.xml --><vector xmlns:android="http://schemas.android.com/apk/res/android"    <!-- intrinsic size of the drawable -->    android:height="256dp"    android:width="256dp"    <!-- size of the virtual canvas -->    android:viewportWidth="32"    android:viewportHeight="32">  <!-- draw a path -->  <path android:fillColor="#8fff"      android:pathData="M20.5,9.5                        c-1.955,0,-3.83,1.268,-4.5,3                        c-0.67,-1.732,-2.547,-3,-4.5,-3                        C8.957,9.5,7,11.432,7,14                        c0,3.53,3.793,6.257,9,11.5                        c5.207,-5.242,9,-7.97,9,-11.5                        C25,11.432,23.043,9.5,20.5,9.5z" /></vector>

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

• 定義VectorDrawable

<vector xmlns:android="http://schemas.android.com/apk/res/android"     android:height="64dp"     android:width="64dp"     android:viewportHeight="600"     android:viewportWidth="600" >     <group         android:name="rotationGroup"         android:pivotX="300.0"         android:pivotY="300.0"         android:rotation="45.0" >         <path             android:name="v"             android:fillColor="#000000"             android:pathData="M300,70 l 0,-70 70,70 0,0 -70,70z" />     </group> </vector>

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

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"   android:drawable="@drawable/vectordrawable" >     <target         android:name="rotationGroup"         android:animation="@anim/rotation" />     <target         android:name="v"         android:animation="@anim/path_morph" /> </animated-vector>

• 定義動畫檔案

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"   android:drawable="@drawable/vectordrawable" >     <target         android:name="rotationGroup"         android:animation="@anim/rotation" />     <target         android:name="v"         android:animation="@anim/path_morph" /> </animated-vector>

<set xmlns:android="http://schemas.android.com/apk/res/android">     <objectAnimator         android:duration="3000"         android:propertyName="pathData"         android:valueFrom="M300,70 l 0,-70 70,70 0,0   -70,70z"         android:valueTo="M300,70 l 0,-70 70,0  0,140 -70,0 z"         android:valueType="pathType"/> </set>

由於向量圖的特點，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

• https://developer.android.com/training/material/drawables.html
• https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html
• https://developer.android.com/reference/android/graphics/drawable/AnimatedVectorDrawable.html
• http://www.w3.org/TR/SVG11/paths.html#PathData

Android VectorDrawable與SVG