官方文檔

關于 Vector，在官方開發指南中介紹。本文章是由個人翻譯官方指南然后添加個人理解完成。

由于個人精力有限，多個渠道發布，排版上可能會有問題，如果影響查看，請移步 Android 開發者家園

Vector Drawables 概述

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

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

既然說起 VectorDrawable 了，那就不得不提 SVG (Scalable Vector Graphic)了，這兩個經?；煜?#xff0c;其實 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 矢量图详解的全部內容，希望文章能夠幫你解決所遇到的問題。

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