Android 矢量图详解

官方文档

关于 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 drawable-->
<vector
        android：name（用于定义这个 vector drawable 的名字）、
        android：width（定义该 drawble 的内部宽度，支持全部的 Android 系统支持的尺寸单位，一般使用 dp）
        android：height（定义该 drawble 的内部高度，支持全部的 Android 系统支持的尺寸单位，一般使用 dp）
        android：viewportWidth(定义矢量图视图的宽度，实际上就是对应 path 路径所使用的数据)
        android：viewportHeight(定义矢量图视图的高度，实际上就是对应 path 路径所使用的数据)
        android：tint（定义该 drawble 线条的颜色，定义了后，你再在路径里面设置颜色就没有做用了）
        android：tintMode（定义 tint 颜色的 Porter-Duff blending 模式，默认值为 src_in，暂时不用理会）
        android：autoMirrored 设置当系统为 RTL （right-to-left）布局的时候，是否自动镜像该图片。
        android：alpha 该图片的透明属性
        >
    <grup
          // 有时候咱们须要对几个路径一块儿处理，这样就可使用 group 元素来把多个 path 放到一块儿，group 支持的属性有
          android：name 定义 group 的名字
          android：rotation 定义该 group 的路径旋转多少度（顺时针旋转）
          android：pivotX 定义缩放和旋转该 group 时候的 X 参考点。该值相对于 vector 的 viewport 值来指定的。
          android：pivotY 定义缩放和旋转该 group 时候的 Y 参考点。该值相对于 vector 的 viewport 值来指定的。
          android：scaleX 定义 X 轴的缩放倍数
          android：scaleY 定义 Y 轴的缩放倍数
          android：translateX 定义移动 X 轴的位移。相对于 vector 的 viewport 值来指定的
          android：translateY 定义移动 Y 轴的位移。相对于 vector 的 viewport 值来指定的>
          <path 
                // path 元素里面的 pathData 就是矢量图的路径数据，除此以外还能够设置其余的属性。path 的属性有：
                android：name 定义该 path 的名字，这样在其余地方能够经过名字来引用这个路径
                android：pathData 和 SVG 中 d 元素同样的路径信息
                android：fillColor 定义填充路径的颜色，若是没有定义则不填充路径
                android：strokeWidth 定义路径边框的粗细尺寸
                android：strokeAlpha 定义路径边框的透明度
                android：fillAlpha 定义填充路径颜色的透明度
                android：trimPathStart 从路径起始位置(path 的 M 位置)截取后剩下的内容，取值范围从 0 到 1，好比，取值是 0.3 则截取后的内容就是 原长度 - （原长度*0.3） 
                android：trimPathEnd 从路径起始位置位置截取的内容，取值范围从 0 到 1，好比，取值是 0.3，则截取后的内容就是 原长度*0.3  
                须要注意的是若是 trimPathStart 和 strimPathEnd 一块使用的话，这里有个规律若是 trimPathEnd 取值大于等于 trimPathStart 的时候结果就是他们二者分别截取后内容的交集，若是 trimPathEnd 小于 trimPathStart 的时候，取值就是他们俩的合集（这是通过我无数的实验得出的规律，你也能够尝试一下）
                android：trimPathOffset 其实就是设置开始点的偏移位置（取值 从 0 到 1）1 的话就是开始点和结束的互换了，注意这个路径是能够循环的（下面画图说明）
                android：strokeLineCap 设置路径的线头的形状，取值为 butt，round，square 默认是 butt
                android：strokeLineJoin 设置路径交界处的链接方式，取值为 miter、round、bevel 默认是 miter
                android：strokeMiterLimit 设置斜角的上界 默认是 4 （当 strokeLineJoin 设置为 "miter" 的时候，绘制两条线段以锐角相交的时候，所得的斜面可能至关长，当斜面太长，就会变的不协调。strokeMiterLimit 属性为斜面的长度设置了一个上限。这个属性表示斜面长度和线条长度的比值。当 strokeLineJoin 设置为其余属性时，这个属性是无效的）
               
        </path>
        
        vector 还支持 clip-path 元素，定义当前绘制的剪切路径。注意：clip-path 只对当前的 group 和子 group 有效。须要 API 大于等于 21
                
                
                
                
               
    
    
    
    </grup>

</vector>

矢量动画

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

1. 建立一个矢量图

   <?xml version="1.0" encoding="utf-8"?>
   <vector xmlns:android="http://schemas.android.com/apk/res/android"
           android:width="200dp"
           android:height="200dp"
           android:viewportWidth="100"
           android:viewportHeight="100">
       <group android:name="head_eyes">
           <path
               android:fillColor="@color/colorPrimary"
               android:name="head"
               android:pathData=" M50,50 A15,15,0,1,1 50,51Z"
               android:strokeWidth="2"
               android:strokeColor="@color/colorPrimary"/>
           <group android:name="eyes">
               <path android:fillColor="@android:color/white"
                     android:name="eye_left"
                     android:pathData="M55,40A2,2,0,1,1,55,41"/>
               <path android:fillColor="@android:color/white"
                     android:name="eye_right"
                     android:pathData="M69,40A2,2,0,1,1,69,41"/>
           </group>
   
           <path android:fillColor="@color/colorAccent"
               android:pathData="M60,55L55,60H65Z"/>
   
       </group>
   </vector>

哈哈，样子太丑了，你们就凑合着看把。

1. 在 drawble 建立矢量动画

   目的就是将咱们的矢量图和 objectAnimator 关联起来

   <?xml version="1.0" encoding="utf-8"?>
   <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
       // 对应动画文件
       android:drawable="@drawable/vector_simple">
       <target
           android:animation="@animator/head"
           // 这里的名字对应你的矢量图中想要产生动画的 path 或者 group 或者 clip-path 的名字
           android:name="head_eyes"/>
   
   </animated-vector>

2. 在 animator 中建立动画

   <?xml version="1.0" encoding="utf-8"?>
   <set xmlns:android="http://schemas.android.com/apk/res/android">
       <objectAnimator
           android:duration="200"
           android:propertyName="translateY"
           android:repeatCount="infinite"
           android:repeatMode="reverse"
           android:valueFrom="0"
           android:valueTo="20"
           android:valueType="floatType"/>
   </set>

3. 布局文件中添加图片

   <ImageView
           android:id="@+id/iv_android"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:src="@drawable/animated_head"
           android:contentDescription="@string/app_name"/>

4. 在程序中启动动画

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

效果图

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

SVG 图片转成 vectordrawble

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