【Android -- 动画】矢量图 & 矢量动画(上)

矢量图

Android 应用的不断发展带来了安装包过大的尴尬，而 Android 之前一直都不支持矢量图形，是引起尴尬的一个重要原因。其实 Android 绘制界面时也是通过各种类似矢量图形命令操作完成的，所以 Android 最终在 Lolliop 引入矢量图形既是大势所趋，也是水到渠成的一件事情。矢量图有很多标准，Android 支持的是 SVG 标准（可缩放矢量图形 Scalable Vector Graphics）。但不是全量支持，准确的说 Android 支持的是 SVG 标准中 Path 相关的部分。
SVG 是通用的矢量图标准，我们可以很轻易的从 Photoshop 之类的软件导出想要的图形。导出的文件后缀是 *.svg ，这个文件的内容是文本格式的，用 txt 文件查看就可以打开，其内部是一系列遵循 SVG 规范的命令列表。

svg 转换为 xml

1. UI 设计师提供 svg 格式的图形，当然我们可以使用浏览器打开如下图：
   

2. 矢量图形转为 .xml 文件定义在 res/drawable 下，在 XML 文件中的根标签是 。
   
   
   
   

3. ImageView 通过设置 src or background 属性使用啦。

标签 & 属性

1. < vector> ：根标签，表示一个矢量动画
支持的属性：

• android: name：定义矢量图形的名称
• android: width：定义 Drawable 的宽度，支持所有 dimension 单位，一般使用 dp。drawable 的宽度不一定是最终绘制宽度，比如给 ImageView 设置 backgroud 则 Drawable 绘制宽度等于 ImageView 的宽度，给 ImageView 设置 src 则在 ImageView 大于 Drawable 宽度时，Drawable 绘制宽度等于自己定义的宽度。
• android: height：定义 Drawable 的宽度，支持所有 dimension 单位，一般是 dp。其它同上。
• android: viewportWidth：定义矢量图形的视图( viewport )空间的宽度，viewport 是一个虚拟的 canvas，后面所有的 path 都在该坐标系上绘制。坐标系左上方为(0,0)，横轴从左向右，纵轴从上到下。横轴可视区域就是 0 ~ viewportWidth。
• android: viewportHeight：定义矢量图形的可视区域的高度。其它见上。[0,0]~[viewportWidth,viewportHeight]定义了虚拟 canvas 的可视区域。
• android: tint：作为染色(tint)的色彩应用到 drawable 上。默认不应用 tint。
• android: tintMode：tint 颜色的 Porter-Duff 混合模式，默认是 src_in。
• android: autoMirrored：如果 drawable 布局方向是 RTL(right-to-left) 时，drawable 绘制是否需要镜像化（镜像化就是绕自身x轴中线旋转180度）。
• android:alpha：drawble 的透明度，取值 0～1

2. < path>：定义一个路径，一个路径即可以表示一块填充区域也可以表示一根线条。
支持的属性：

• android: name：定义路径的名称
• android: pathData：定义路径的数据，路径由多条命令组成，格式与 SVG 标准的 path data 的 d 属性完全相同，路径命令的参数定义在 viewport 视图的坐标系。
• android: fillColor：指定填充路径的颜色，一般是一个颜色值，在 SDK24 及以上，可以指定一个颜色状态列表或者一个渐变的颜色。如果在此属性上做渐变动画，新的属性值会覆盖此值。如果不指定，则 path 不被填充。
• android: strokeColor：指定路径线条的颜色，一般是一个颜色值，在 SDK24 及以上，可以指定一个颜色状态列表或者一个渐变的颜色。如果在此属性上做渐变动画，新的属性值会覆盖此值。如果不指定，则 path 的线条不会绘制出来。
• android: strokeWidth：指定路径线条的宽度，基于 viewport 视图的坐标系（不要 dp/px 之类的结尾）。
• android: strokeAlpha：指定路径线条的透明度。
• android: fillAlpha：指定填充区域的透明度。
• android: trimPathStart：取值从 0 到 1 ，表示路径从哪里开始绘制。0~trimPathStart 区间的路径不会被绘制出来。
• android: trimPathEnd：取值从 0 到 1 ，表示路径绘制到哪里。trimPathEnd~1 区间的路径不会被绘制出来。
• android: trimPathOffset：平移可绘制区域，取值从 0 到 1 ，线条从(trimPathOffset+trimPathStart绘制到trimPathOffset+trimPathEnd)，注意：trimPathOffset+trimPathEnd 如果超过1，其实也是绘制的的，绘制的是0～trimPathOffset+trimPathEnd-1 的位置。
• android: strokeLineCap：设置线条首尾的外观，三个值：butt（默认，向线条的每个末端添加平直的边缘）, round（向线条的每个末端添加圆形线帽）, square（向线条的每个末端添加正方形线帽。）。
• android: strokeLineJoin：设置当两条线条交汇时，创建什么样的边角（线段连接类型）：三个值：miter（默认，创建尖角）,round（创建圆角）,bevel（创建斜角） 。
• android: strokeMiterLimit：设置设置最大斜接长度，斜接长度指的是在两条线交汇处内角和外角之间的距离。只有当 lineJoin 属性为 “miter” 时，miterLimit 才有效。

实例：一辆车

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="1024dp"
    android:height="1024dp"
    android:viewportWidth="1024"
    android:viewportHeight="1024">
  <path
      android:pathData="M70.6,681.5a439.3,4.6 0,1 0,878.6 0a439.3,4.6 0,1 0,-878.6 0z"
      android:fillColor="#161616"/>
  <path
      android:pathData="M338.9,614.3a46.9,66.7 0,1 0,93.8 0a46.9,66.7 0,1 0,-93.8 0z"
      android:fillColor="#3C4242"/>
  <path
      android:pathData="M350.1,547.4h35v133.6h-35z"
      android:fillColor="#3C4242"/>
  <path
      android:pathData="M303.2,614.3a46.9,66.7 0,1 0,93.8 0a46.9,66.7 0,1 0,-93.8 0z"
      android:fillColor="#161616"/>
  <path
      android:pathData="M739,453.8L739,453.8c-0.1,-2.9 2.1,-5.3 4.9,-5.3l11.6,-0.1c2.8,0 5.2,2.3 5.3,5.2v0c0.1,2.9 -2.1,5.3 -4.9,5.3l-11.6,0.1C741.5,459.1 739.1,456.7 739,453.8z"
      android:fillColor="#303435"/>
  <path
      android:pathData="M775.9,437.8h-20c-1.2,0 -2.3,0.5 -3.2,1.4l-7.4,7.7c-1,1.3 -1,3.1 0,4.5l6.7,9.1h23.8c2.7,0 5.2,-1.4 6.7,-3.7l2.2,-3.4c1.6,-2.6 1.6,-5.9 0,-8.5l-2.2,-3.4C781.1,439.2 778.6,437.8 775.9,437.8z"
      android:fillColor="#DFECF2"/>
  <path
      android:pathData="M774.4,455.3c3.3,0 6.4,-1.4 8.2,-3.7l2.7,-3.4c0.2,-0.2 0.3,-0.4 0.5,-0.7c0.4,2 0.1,4.2 -1,6l-2.2,3.4c-1.4,2.3 -4,3.7 -6.7,3.7H752l-3.9,-5.3H774.4z"
      android:fillColor="#CBD8DE"/>
  <path
      android:pathData="M808,614.3a46.9,66.7 0,1 0,93.8 0a46.9,66.7 0,1 0,-93.8 0z"
      android:fillColor="#3C4242"/>
  <path
      android:pathData="M819.2,547.4h35v133.6h-35z"
      android:fillColor="#3C4242"/>
  <path
      android:pathData="M772.3,614.3a46.9,66.7 0,1 0,93.8 0a46.9,66.7 0,1 0,-93.8 0z"
      android:fillColor="#161616"/>
  <path
      android:pathData="M946.2,641.6l-809,0l-15.7,-7.6l-8.9,-25.2l0,-81.2l809.2,0l32.7,104.9z"
      android:fillColor="#161616"/>
  <path
      android:pathData="M162.4,614.3a46.9,66.7 0,1 0,93.8 0a46.9,66.7 0,1 0,-93.8 0z"
      android:fillColor="#161616"/>
  <path
      android:pathData="M173.5,547.4h35v133.6h-35z"