官方文檔

關于 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 還支持 clip-path 元素，定義當前繪制的剪切路徑。注意：clip-path 只對當前的 group 和子 group 有效。需要 API 大于等于 21

offset說明.png

矢量動畫

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

創建一個矢量圖

<?xml version="1.0" encoding="utf-8"?>

head.png

哈哈，樣子太丑了，大家就湊合著看把。

在 drawble 創建矢量動畫

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

<?xml version="1.0" encoding="utf-8"?>

在 animator 中創建動畫

<?xml version="1.0" encoding="utf-8"?>

布局文件中添加圖片

在程序中啟動動畫

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

效果圖

效果圖.gif

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

trimPathStart.gif

SVG 圖片轉成 vectordrawble

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

svgtovector.png

選擇圖片.png

總結

以上是生活随笔為你收集整理的android 子module混淆_Android 矢量图详解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。