Android VectorDrawable與SVG

原創

2020-02-22 07:34

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>

定義動畫文件

<objectAnimator
     android:duration="6000"
     android:propertyName="rotation"
     android:valueFrom="0"
     android:valueTo="360" />

<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取順時針方向
有個圖解：