Android(安卓)L之 VectorDrawable

Android 从 5.0 开始支持VectorDrawable（矢量图），矢量图有什么好处呢，简单来说矢量图不会失真、具有连贯的动画效果。一个简单的例子如下：（res/drawable）

首先vector 标签是一个drawable对象，所以是放在res/drawable目录的。
vector 标签下有android:width和android:height属性，这两个属性是必填的，定义矢量图形的绝对大小，虽然说是矢量图形随意缩放，但是不能说这里不定义宽高直接到要设置到的目标控件上定义控件的宽高，这样是不允许的，一定要设置这个绝对宽高，要不然会报错。
然后还有个android:viewportHeight和android:viewportWidth属性，这个是画布宽高，也是必填的，定义Path路径的时候就必须在这个画布大小里去绘制，超出画布就显示不出来了。

android:fillColor自然也不用过多解释就是他的填充色，关键就在于android:pathData他是成像的根本，那么pathData的语法呢？

下面通过一个例子做一个说明：

上面代码定义好的一个静态的矢量图，可以像一般的图片资源使用，设置到imageView中会显示出一个三角形（fillcolor填充颜色为橘黄色）。如图所示

控制显示心形的就是上面path这个标签，一个path代表一个元素，

下面来解释一下“M 10,10 100,10 100,40 Z ”这样字符串的意义，首先我们先了解一些相关概念及命令。
一主要有以下一些命令
1. 移动指令：Move Command（M）：M 起始点或者：m 起始点。比如：M 100,250或m 100,250
使用大写M时，表示绝对值; 使用小写m时; 表示相对于前一点的值，如果前一点没有指定，则使用(0,0)，手机屏幕左上角坐标默认就是（0,0）。
2. 绘制指令(Draw Command):
我们可以绘制以下形状：
(1) 直线:Line(L) 格式：L 结束点坐标或: l 结束点坐标。
比如：L 100,100 或 l 100 100。坐标值可以使用x,y（中间用英文逗号隔开）或x y（中间用半角空格隔开）的形式。
(2) 水平直线: Horizontal(水平的) line(H)
(3) 垂直直线: Vertical(垂直的) line(V)
(4) 三次方程式贝塞尔曲线 Cubic Bezier curve(曲线)(C)：通过指定两个控制点来绘制由当前点到指定结束点间的三次方程贝塞尔曲线。
格式：C 第一控制点第二控制点结束点或 c 第一控制点第二控制点结束点
比如：C 100,200 200,400 300,200 或 c 100,200 200,400 300,200
其中，点(100,200)为第一控制点，点(200,400)为第二控制点，点(300,200)为结束点。
(5) 二次方程式贝塞尔曲线: Quadratic(二次的) Bezier curve(Q)
(6) 平滑三次方程式贝塞尔曲线: Smooth cubic Bezier curve(S)
(7) 平滑二次方程式贝塞尔曲线: smooth quadratic Bezier curve(T)
(8) 椭圆圆弧: elliptical(椭圆的) Arc(A)
比如：L 100, 200 L 300,400表示从绝对坐标点(100,200)到另一绝对坐标点(300,400)的一条直线。而l 100, 200 l 300,400则表示相对上一点（如果未指定，则默认为(0,0)坐标点）开始计算的坐标点(100,200)到坐标点为(300,400)的一条直线。

当我们重复使用同一种类型时，就可以省略前面的命令。比如：L 100, 200 L 300,400简写为：L 100, 200 300,400。
3. 关闭指令(close Command):用以将图形的首、尾点用直线连接，以形成一个封闭的区域。
用Z或z表示。
最常用的的命令有
M： move to 移动绘制点
L：line to 直线
C：cubic bezier 三次贝塞尔曲线
Z：close 闭合
*（注意）每个命令都有大小写形式，大写代表后面的参数是绝对坐标，小写表示相对坐标。参数之间用空格或逗号隔开
1.M (x y) 移动到x,y
2.L (x y) 直线连到x,y，还有简化命令H(x) 水平连接、V(y)垂直连接
3.Z，没有参数，连接起点和终点
4.C(x1 y1 x2 y2 x y)，控制点x1,y1 x2,y2，终点x,y
5.Q(x1 y1 x y)，控制点x1,y1，终点x,y
6.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取顺时针方向

或者看这个例子：

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

M25,0 l 50,50 -50,50Z这个路径表示：在100*100的画布内，先把绘制点移动到绝对坐标(25,0)这个点，然后画直线到(50,50)这个点，l指令是相对坐标，大写的L表示绝对坐标，那么l 50,50就是在原点(25,0)的x轴往前移50，往下移50，绝对坐标就是(75,50)，也就是三角形的右边那个点。然后从(50,50)这个点绘制到三角形最下面那个点(-50,50)，这也是相对右边那个点相对坐标，也就是把(75,50)这个绝对坐标当作是原点(0,0),参作这个原点往后移动50再往下移动50，在整个画布中的绝对坐标就是(25，100) 再看一种画法：M300,70 l 0,-70 70,70 0,0 -70,70z这个官方的画法，先定点，然后把定点固定在原点垂直上方，然后往右下移确定三角形右边的定点，最后把点水平向后移动70往下移动70，回到原点的水平轴在y轴上移动140.是先画三角的上半部分再画下半部分。同样是画上面这个三角形：先移动到随便一个点：M300，70然后把线段一端定在三角形下边那个点l 0,70（也就是垂直往下移动了70）后面再补上三角形右边的点l 0,70 70,70（下面的点x轴和y轴都移动70，就到三角形右边的点）M300,70 l 0,70 70,-70  这样就把三角形下半段画好了

VectorDrawable定义的是一张静态图，还有一个类AnimatedVectorDrawable，可以让矢量图有动画效果。一般需要三个步骤：

定义VectorDrawable
```
                    
```
定义AnimatedVectorDrawable，给上面矢量图的元素添加动画
```
           
```
定义动画文件
```
      
```
由于矢量图的特点，AnimatedVectorDawable可以实现一些很特别的效果，对VectorDrawable里的pathData做动画，可以从一个图形渐变到另一个图形，比如Material Design里的toolbar icon；对trimPathStart、trimPathEnd做动画，可以得到图形的绘制轨迹。

SVG Path Data

主要有以下一些命令

M： move to 移动绘制点
L：line to 直线
Z：close 闭合
C：cubic bezier 三次贝塞尔曲线
Q：quatratic bezier 二次贝塞尔曲线
A：ellipse 圆弧

每个命令都有大小写形式，大写代表后面的参数是绝对坐标，小写表示相对坐标。参数之间用空格或逗号隔开

命令详解：

M (x y) 移动到x,y
L (x y) 直线连到x,y，还有简化命令H(x) 水平连接、V(y)垂直连接
Z，没有参数，连接起点和终点
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取顺时针方向
有个图解：

应用

在github上看到一个VectorDrawable应用的例子，实现了一个动态效果的searchbar，原理就是对VectorDrawable trimPathStart这个属性做动画。最初的设计在这里，照着实现一下：

Reference

https://developer.android.com/training/material/drawables.html
https://developer.android.com/reference/android/graphics/drawable/VectorDrawable.html
https://developer.android.com/reference/android/graphics/drawable/AnimatedVectorDrawable.html
http://www.w3.org/TR/SVG11/paths.html#PathData

SVG Path Data

应用

Reference

更多相关文章

随机推荐