Android矢量图

Android矢量图制作

1. drawable目录下新建XML文件，以vector作为根节点（width，height，viewportWidth，viewportHeight（这两个是画图形的参考宽高））主要定义path子节点。完成pathData的定义，pathData就是需要画的图形，主要有以下操作符，与Path类使用类似
   M：新建起点，参数x，y（M20， 30）
   L：连接直线，参数x，y（L30， 20）
   H：纵坐标不变，横向连线，参数x（H20）
   V：横坐标不变，纵向连线，参数y（V30）
   Q：二次贝塞尔曲线，参数x1，y1，x2，y2（Q10，20，30，40）
   C：三次贝塞尔曲线，参数x1，y1，x2，y2，x3，y3（C10，20，30，40，50， 60）
   Z：连接首尾，闭合曲线，无参数
2. 将XML文件应用在控件上

Android矢量动画

1. 按上面的制作好矢量图为第一步
2. 创建anim资源文件夹，新建XML文件，以set为根节点。定义objectAnimator子节点，与一般属性动画定义一致，但propertyName固定格式pathData，valueType固定格式pathType。valueFrom为第一步中的pathData，valueTo为动画完成时的矢量图pathData，两个pathData的操作符数量必须一致。
3. drawable目录下新建XML文件，以animated-vector作为根节点（drawable属性为初始状态），定义 target属性，包含两个属性，name为第一步中创建的对象的name，animation为动画文件。
4. 将第三步的XML应用在控件上。
5. Java代码中获取控件的Drawable对象强转为Animatable对象，Animatable对象调用start方法。

Android矢量动画选择器

选择器selector应该都用过，就是在不同的两种状态切换不同的显示效果。
1. 按照上一节第一步制作好两张需要切换的矢量图
2. 在drawable目录新建XML文件，以animated-selector为根节点

<animated-selector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:targetApi="lollipop">
    <item
        android:state_checked="true"
        android:id="@+id/threeLine"
        android:drawable="@drawable/three_line" />
    <item
        android:id="@+id/arrow"
        android:drawable="@drawable/arrow"
        />
    <transition
        android:drawable="@drawable/arrow_to_three_line"
        android:fromId="@id/arrow"
        android:toId="@id/threeLine" />
    <transition
        android:drawable="@drawable/three_line_to_arrow"
        android:fromId="@id/threeLine"
        android:toId="@id/arrow" />


</animated-selector>

item对应不同的状态显示的第一步制作的矢量图，transition的drawable属性对应转换时的动画。
3. 在drawable目录下创建上一节中的第三步文件A->B

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:drawable="@drawable/arrow"
    tools:targetApi="lollipop">
    <target
        android:name="arrowGroup"
        android:animation="@anim/anim_group" />
    <target
        android:name="arrowPath"
        android:animation="@anim/arrow_to_three_line_anim" />
</animated-vector>

1. 在drawable目录下创建上一节中的第三步文件B->A
2. 创建A->B以及B->A的动画文件（上一节第二步）
3. 将seletor应用在控件上，通过改变控件的checked属性值完成矢量动画切换