官方文檔

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

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

Vector Drawables 概述

VectorDrawable 和 AnimatedVectorDrawable 是在 Android 5.0 系統(tǒng)中第一次加入，當(dāng)然我們可以使用 Android 的支持庫，來支持舊的版本，通過 VectorDrawableCompat 和 AnimateVectorDrawableCompat 來實(shí)現(xiàn)。

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

既然說起 VectorDrawable 了，那就不得不提 SVG (Scalable Vector Graphic)了，這兩個經(jīng)常混淆，其實(shí) SVG 就是一種基于可擴(kuò)展語言(xml)，用于描述二維矢量圖形的一種圖形格式(和我們常見的 .png 等等圖片一樣，都是一種圖片格式)，它有自己的一套編寫規(guī)范(使用 XML 編寫的)，所以這種圖片是根據(jù)他自己的一套規(guī)范通過 XML 語言編寫而成的圖片。而我們的 VectorDrawable 是編程中的，它僅支持 SVG 規(guī)范中有限的內(nèi)容。Android Studio 支持將 SVG 文件轉(zhuǎn)換成 VectorDrawable 。這就是他們兩者的關(guān)系。

path 中的常用的簡單繪制命令

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

每個命令都有大小寫的形式，大寫代表后面的參數(shù)是絕對坐標(biāo)，小寫表示相對坐標(biāo)(我們一般用大寫就可以了)，參數(shù)之間用空格或者逗號隔開。所謂的相對坐標(biāo)是相對于前面一個點(diǎn)的，比如：M30,0 l 10,10 換算成絕對坐標(biāo)就是 M30,0 L40,10

命令使用實(shí)例

• M(x y) 移動到坐標(biāo) x，y 處
• Z 后面不接參數(shù)，直接連接起點(diǎn)和終點(diǎn)
• L(x y)直線連接到坐標(biāo) x，y 處
• H(x) 水平連接
• V(y) 垂直連接
• C(x1 y1 x2 y2 x y)控制點(diǎn) x1，y1 x2，y2 終點(diǎn)坐標(biāo) x，y
• Q(x1 y1 x y)控制帶點(diǎn) x1，y1 終點(diǎn)坐標(biāo) x ，y；
• A(rx，ry，x-axis-rotation，large-arc-flag，sweep-flag，x，y)；
• rx,ry 橢圓半徑
• x-axis-rotation x 軸旋轉(zhuǎn)角度
• large-arc-flag 為 0 的時(shí)候表示取小弧度，1 的時(shí)候取大弧度
• sweep-flag 0 取逆時(shí)針方向，1 取順時(shí)針方向
• (x,y) 是終點(diǎn)的坐標(biāo)

VectorDrawable 如何定義

VectorDrawable 在 drawable 文件夾中通過 來定義，這里先來詳細(xì)的介紹一下 vector 中的各個屬性(和網(wǎng)上的許多不一樣，網(wǎng)上的大多都沒有自己驗(yàn)證過)

vector 還支持 clip-path 元素，定義當(dāng)前繪制的剪切路徑。注意：clip-path 只對當(dāng)前的 group 和子 group 有效。需要 API 大于等于 21

offset說明.png

矢量動畫

利用 XML 文件來設(shè)置矢量動畫

創(chuàng)建一個矢量圖

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

head.png

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

在 drawble 創(chuàng)建矢量動畫

目的就是將我們的矢量圖和 objectAnimator 關(guān)聯(lián)起來

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

在 animator 中創(chuàng)建動畫

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

布局文件中添加圖片

在程序中啟動動畫

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

效果圖

效果圖.gif

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

trimPathStart.gif

SVG 圖片轉(zhuǎn)成 vectordrawble

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

svgtovector.png

選擇圖片.png

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。