官方文档

关于 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




Android 矢量图xml android 矢量图 变黑_Android 矢量图xml


offset说明.png

矢量动画

利用 XML 文件来设置矢量动画

  1. 创建一个矢量图
<?xml version="1.0" encoding="utf-8"?>


Android 矢量图xml android 矢量图 变黑_xml_02


head.png

哈哈，样子太丑了，大家就凑合着看把。

  1. 在 drawble 创建矢量动画
  2. 目的就是将我们的矢量图和 objectAnimator 关联起来
<?xml version="1.0" encoding="utf-8"?>
  1. 在 animator 中创建动画
<?xml version="1.0" encoding="utf-8"?>
  1. 布局文件中添加图片
  1. 在程序中启动动画
Drawable drawable = ivAndroid.getDrawable();((Animatable)drawable).start();

效果图


Android 矢量图xml android 矢量图 变黑_Android 矢量图xml_03


效果图.gif

在 objectAnimator 的 propertyName 中有两个很重要的属性值，trimPathEnd 和 trimPathStart 表示截取，和前面介绍的 path 里面的类似，利用这个可以绘制 vectordrawble。注意如果动画使用这个两个属性值的话，animated-vector 中 target 对应的 name 必须是 path 类型不能是 group 效果图：


Android 矢量图xml android 矢量图 变黑_android 子module混淆_04


trimPathStart.gif

SVG 图片转成 vectordrawble

利用我们 Android Studio 提供的工具就可以将 SVG 格式的图片直接转成我们的 vectordrawble 了。


Android 矢量图xml android 矢量图 变黑_Android 矢量图xml_05


svgtovector.png


Android 矢量图xml android 矢量图 变黑_android 子module混淆_06


选择图片.png