Android矢量图动画：每人送一辆小黄车

转载自：新小梦

看完本文，每人送一台小黄车

不得不说，矢量图在项目中用得少之又少，却很香！可缩放矢量图形（SVG）是一套语法规范，常在前端中使用，而VectorDrawable（Android中的矢量图）只实现了SVG的部分语法。使用VectorDrawable代替位图可以减小 APK 的大小，因为可以针对不同的屏幕密度调整同一文件的大小，而不会降低图片质量，同时可以实现一些复制的效果图。

可以从下面两个地方获得常用矢量图：

• IconFont
• Android Stuido 自带的Vector Asset Studio工具

「Android版本兼容问题」

由于兼容低版本问题，导致矢量图得不到推广吧？但是现在大多数手机系统都Android 5.0起步了吧。

矢量图VectorDrawable仅支持到Android 4.4,通过支持库可最低支持到Android 2.1。

矢量图动画AnimatedVectorDrawable仅支持到Android 5.0,通过支持库最低支持到Android 3.0。 「Gralde配置」

    android {
      defaultConfig {
        vectorDrawables.useSupportLibrary = true
      }
    }

    dependencies {
      //需要 Android 支持库 23.2 或更高版本以及 Android Plugin for Gradle 2.0 或更高版本
      implementation 'com.android.support:appcompat-v7:23.2.0'
    }

「美图减压鉴赏：」

矢量图

通过Android Studio的Vector Asset Studio工具来获取一张矢量图。

根据个人喜好配置Vector Assert。

会在drawable文件夹生成资源文件，例如这里生成ic_menu.xml文件：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M3,18h18v-2L3,16v2zM3,13h18v-2L3,11v2zM3,6v2h18L21,6L3,6z"/>
</vector>

没了解过矢量图，相信是看不懂path标签pathData属性的内容。

在vector标签设置矢量图大小,width和height属性分别为24dp。viewportWidth和viewportHeight属性表示画布的大小，表示将矢量图等分的份数，这里划分为2424。可以理解在一张24dp24dp的图片上有24*24个小方格，通过这些小方格，可以绘制不同图案。

path可以理解为路径，图片绘制的内容。fillColor属性表示填充颜色，pathData属性表示在图片上作画内容。

pathData属性的值是SVG的语法内容，通过下面的内容就可以了解pathData属性值的含义了。

常用命令：

• 「M x,y」 移动到坐标(x,y)。M3,18表示将画笔移动到坐标(3,18)

• **「L x,y」**从当前的位置画一条直线到指定的位置（x,y）。

• 「H x」 画水平线到x位置。

• 「V y」 画垂直线到y位置。

• 「Z」 闭合，连接终点和起点

• 「A rx,ry,xRotationAnagle,radianFlag,sweepFlag,x,y」 画弧线，理解为椭圆的一部分，rx和ry表示 x轴和y轴半径，即椭圆的长短轴问题；xRotationAnagle表示x轴旋转角度(搞不明白用法)；radianFlag 0表示取小弧度，1表示取大弧度；sweepFlag 0表示逆时针，表示1顺时针画弧线；x和y弧线的终点位置，起点位置为画笔所在的地方。

• 「C x1,y1,x2,y2,x3,y3」 三次贝赛曲线

• 「S x2,y2,x,y」 光滑三次贝塞尔曲线

• 「Q x1,y1,x2,y2」 二次贝赛曲线

• 「T x,y」 映射

ps：大写表示绝对坐标，小写表示相对坐标。

对pathData标签内容进行解读：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24"
    android:tint="?attr/colorControlNormal">
  <path
      android:fillColor="@android:color/white"
      android:pathData="M3,18 h18 v-2 L3,16 v2 z M3,13 h18 v-2 L3,11 v2 z M3,6 v2 h18 L21,6 L3,6 z"/>
</vector>

M3,18 将画笔移动到坐标(3,18);

h18从坐标(3,18)到坐标(21,18)画一条水平直线;

v-2从坐标(21,18)到坐标(21,16)画一条垂直直线;

L3,16从坐标(21,18)到坐标(3,16)画一条直线;

v2从坐标(3,16)到坐标(3,18)画一条垂直直线;

z 闭合起点和终点。

到这里，最底部的直线就会画出来了，其他两条线是相同原理。

「注意事项」：不要将pathData的值抽离出来放到string.xml文件，不然在兼容5.0以下机型生成png图片，会报pathData错误。

那path标签除了pathData属性，还有哪些可用的属性呢？

path标签

path标签可用属性：

• name：路径名称，可在其他地方引用，例如矢量图动画引用；

• strokeWidth：线条宽度，单位为viewportHeight或viewportWidth中的1等分；。

• strokeColor：线条颜色；

• strokeAlpha：线条透明度。0f->1f；

• strokeLineJoin：线条拐角的形状。圆角round、斜切尖角miter、斜角bevel，例如正方形的四个角；

• strokeLineCap：线条线帽形状。圆角round、正方形square、臂butt；

• strokeMiterLimit：斜线miter与strokeWidth的比例上限。如果比例值超过这个值，不再显示尖角而是bevel斜角。当strokeLineJoin属性设置为mit