Android 矢量圖詳解

官方文檔

關於 Vector，在官方開發指南中介紹。本文章是由我的翻譯官方指南而後添加我的理解完成。

因爲我的精力有限，多個渠道發佈，排版上可能會有問題，若是影響查看，請移步 Android 開發者家園

Vector Drawables 概述

VectorDrawable 和 AnimatedVectorDrawable 是在 Android 5.0 系統中第一次加入，固然咱們可使用 Android 的支持庫，來支持舊的版本，經過 VectorDrawableCompat 和 AnimateVectorDrawableCompat 來實現。

VectorDrawble 是在 xml 文件中定義的矢量圖形。xml 文件中定義的矢量圖形，它是一組帶有顏色信息的點、線和曲線，使用矢量圖主要的優勢是圖形可伸縮性。能夠在不損失顯示質量的狀況下進行縮放，這意味着咱們能夠在不一樣的屏幕密度的手機上使用相同的文件。這樣會使 APK 文件變小更加有利於開發人員維護。咱們還能夠經過多個 XML 文件和矢量圖結合用於動畫。

既然提及 VectorDrawable 了，那就不得不提 SVG （Scalable Vector Graphic）了，這兩個常常混淆，其實 SVG 就是一種基於可擴展語言（xml），用於描述二維矢量圖形的一種圖形格式（和咱們常見的 .png 等等圖片同樣，都是一種圖片格式），它有本身的一套編寫規範（使用 XML 編寫的），因此這種圖片是根據他本身的一套規範經過 XML 語言編寫而成的圖片。而咱們的 VectorDrawable 是編程中的，它僅支持 SVG 規範中有限的內容。Android Studio 支持將 SVG 文件轉換成 VectorDrawable 。這就是他們二者的關係。

path 中的經常使用的簡單繪製命令

• moveto 命令 M 移動到新的位置
• closepath 命令 Z 封閉路徑，從當前的位置畫一條直線到該路徑或者子路徑起始位置
• lineto 命令 L ，從當前的位置畫一條線到指定的位置
• horizontal lineto 命令 H 水平畫一條直線到指定位置
• vertical lineto 命令 V 垂直畫一條直線到指定位置
• 貝塞爾曲線 命令 Q
• 光滑二次貝塞爾曲線 命令 T
• elliptical arc 命令 A 橢圓弧

每一個命令都有大小寫的形式，大寫表明後面的參數是絕對座標，小寫表示相對座標（咱們通常用大寫就能夠了），參數之間用空格或者逗號隔開。所謂的相對座標是相對於前面一個點的，好比：M30,0 l 10,10 換算成絕對座標就是 M30,0 L40,10

命令使用實例

• M(x y) 移動到座標 x，y 處
• Z 後面不接參數，直接鏈接起點和終點
• L（x y）直線鏈接到座標 x，y 處
• H（x） 水平鏈接
• V（y） 垂直鏈接
• 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 取順時針方向
  • (x,y) 是終點的座標

VectorDrawable 如何定義

VectorDrawable 在 drawable 文件夾中經過 來定義，這裏先來詳細的介紹一下 vector 中的各個屬性（和網上的許多不同，網上的大多都沒有本身驗證過）

<!--用於定義 vector drawable-->
<vector
        android：name（用於定義這個 vector drawable 的名字）、
        android：width（定義該 drawble 的內部寬度，支持全部的 Android 系統支持的尺寸單位，一般使用 dp）
        android：height（定義該 drawble 的內部高度，支持全部的 Android 系統支持的尺寸單位，一般使用 dp）
        android：viewportWidth(定義矢量圖視圖的寬度，實際上就是對應 path 路徑所使用的數據)
        android：viewportHeight(定義矢量圖視圖的高度，實際上就是對應 path 路徑所使用的數據)
        android：tint（定義該 drawble 線條的顏色，定義了後，你再在路徑裏面設置顏色就沒有做用了）
        android：tintMode（定義 tint 顏色的 Porter-Duff blending 模式，默認值爲 src_in，暫時不用理會）
        android：autoMirrored 設置當系統爲 RTL （right-to-left）佈局的時候，是否自動鏡像該圖片。
        android：alpha 該圖片的透明屬性
        >
    <grup
          // 有時候咱們須要對幾個路徑一塊兒處理，這樣就可使用 group 元素來把多個 path 放到一塊兒，group 支持的屬性有
          android：name 定義 group 的名字
          android：rotation 定義該 group 的路徑旋轉多少度（順時針旋轉）
          android：pivotX 定義縮放和旋轉該 group 時候的 X 參考點。該值相對於 vector 的 viewport 值來指定的。
          android：pivotY 定義縮放和旋轉該 group 時候的 Y 參考點。該值相對於 vector 的 viewport 值來指定的。
          android：scaleX 定義 X 軸的縮放倍數
          android：scaleY 定義 Y 軸的縮放倍數
          android：translateX 定義移動 X 軸的位移。相對於 vector 的 viewport 值來指定的
          android：translateY 定義移動 Y 軸的位移。相對於 vector 的 viewport 值來指定的>
          <path 
                // path 元素裏面的 pathData 就是矢量圖的路徑數據，除此以外還能夠設置其餘的屬性。path 的屬性有：
                android：name 定義該 path 的名字，這樣在其餘地方能夠經過名字來引用這個路徑
                android：pathData 和 SVG 中 d 元素同樣的路徑信息
                android：fillColor 定義填充路徑的顏色，若是沒有定義則不填充路徑
                android：strokeWidth 定義路徑邊框的粗細尺寸
                android：strokeAlpha 定義路徑邊框的透明度
                android：fillAlpha 定義填充路徑顏色的透明度
                android：trimPathStart 從路徑起始位置(path 的 M 位置)截取後剩下的內容，取值範圍從 0 到 1，好比，取值是 0.3 則截取後的內容就是 原長度 - （原長度*0.3） 
                android：trimPathEnd 從路徑起始位置位置截取的內容，取值範圍從 0 到 1，好比，取值是 0.3，則截取後的內容就是 原長度*0.3  
                須要注意的是若是 trimPathStart 和 strimPathEnd 一塊使用的話，這裏有個規律若是 trimPathEnd 取值大於等於 trimPathStart 的時候結果就是他們二者分別截取後內容的交集，若是 trimPathEnd 小於 trimPathStart 的時候，取值就是他們倆的合集（這是通過我無數的實驗得出的規律，你也能夠嘗試一下）
                android：trimPathOffset 其實就是設置開始點的偏移位置（取值 從 0 到 1）1 的話就是開始點和結束的互換了，注意這個路徑是能夠循環的（下面畫圖說明）
                android：strokeLineCap 設置路徑的線頭的形狀，取值爲 butt，round，square 默認是 butt
                android：strokeLineJoin 設置路徑交界處的鏈接方式，取值爲 miter、round、bevel 默認是 miter
                android：strokeMiterLimit 設置斜角的上界 默認是 4 （當 strokeLineJoin 設置爲 "miter" 的時候，繪製兩條線段以銳角相交的時候，所得的斜面可能至關長，當斜面太長，就會變的不協調。strokeMiterLimit 屬性爲斜面的長度設置了一個上限。這個屬性表示斜面長度和線條長度的比值。當 strokeLineJoin 設置爲其餘屬性時，這個屬性是無效的）
               
        </path>
        
        vector 還支持 clip-path 元素，定義當前繪製的剪切路徑。注意：clip-path 只對當前的 group 和子 group 有效。須要 API 大於等於 21
                
                
                
                
               
    
    
    
    </grup>

</vector>

矢量動畫

利用 XML 文件來設置矢量動畫

1. 建立一個矢量圖

   <?xml version="1.0" encoding="utf-8"?>
   <vector xmlns:android="http://schemas.android.com/apk/res/android"
           android:width="200dp"
           android:height="200dp"
           android:viewportWidth="100"
           android:viewportHeight="100">
       <group android:name="head_eyes">
           <path
               android:fillColor="@color/colorPrimary"
               android:name="head"
               android:pathData=" M50,50 A15,15,0,1,1 50,51Z"
               android:strokeWidth="2"
               android:strokeColor="@color/colorPrimary"/>
           <group android:name="eyes">
               <path android:fillColor="@android:color/white"
                     android:name="eye_left"
                     android:pathData="M55,40A2,2,0,1,1,55,41"/>
               <path android:fillColor="@android:color/white"
                     android:name="eye_right"
                     android:pathData="M69,40A2,2,0,1,1,69,41"/>
           </group>
   
           <path android:fillColor="@color/colorAccent"
               android:pathData="M60,55L55,60H65Z"/>
   
       </group>
   </vector>

哈哈，樣子太醜了，你們就湊合着看把。

1. 在 drawble 建立矢量動畫

   目的就是將咱們的矢量圖和 objectAnimator 關聯起來

   <?xml version="1.0" encoding="utf-8"?>
   <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
       // 對應動畫文件
       android:drawable="@drawable/vector_simple">
       <target
           android:animation="@animator/head"
           // 這裏的名字對應你的矢量圖中想要產生動畫的 path 或者 group 或者 clip-path 的名字
           android:name="head_eyes"/>
   
   </animated-vector>

2. 在 animator 中建立動畫

   <?xml version="1.0" encoding="utf-8"?>
   <set xmlns:android="http://schemas.android.com/apk/res/android">
       <objectAnimator
           android:duration="200"
           android:propertyName="translateY"
           android:repeatCount="infinite"
           android:repeatMode="reverse"
           android:valueFrom="0"
           android:valueTo="20"
           android:valueType="floatType"/>
   </set>

3. 佈局文件中添加圖片

   <ImageView
           android:id="@+id/iv_android"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="@drawable/animated_head"
           android:contentDescription="@string/app_name"/>

4. 在程序中啓動動畫

   Drawable drawable =  ivAndroid.getDrawable();
   ((Animatable)drawable).start();

效果圖

在 objectAnimator 的 propertyName 中有兩個很重要的屬性值，trimPathEnd 和 trimPathStart 表示截取，和前面介紹的 path 裏面的相似，利用這個能夠繪製 vectordrawble。注意若是動畫使用這個兩個屬性值的話，animated-vector 中 target 對應的 name 必須是 path 類型不能是 group 效果圖：

SVG 圖片轉成 vectordrawble

利用咱們 Android Studio 提供的工具就能夠將 SVG 格式的圖片直接轉成咱們的 vectordrawble 了。