Android 开发 VectorDrawable 矢量图 （三）矢量图动画

简介——矢量动画2种方式与流程

矢量动画有一些不一样的细节，这里需要提前了解，否则容易在后续使用的时候困惑。

group动画

使用group包裹后的动画，为什么要使用它来包裹path？因为属性动画要改变绘制的图片属性来实现动画，可是path标签中并没有translateX和translateY属性，因此，VectorDrawable要想使用属性，就需要用group标签来封装path标签，将属性动画作用在group标签中，这里使用group标签将vector图片分成了两组，如果图片比较复杂，会将其分成多组。但是group不支持直接操作path的属性。所以这种动画形式是直接移动整个path或者矢量图，它不能根据矢量图参数来变化动画。另外它的添加和启动动画方式与path的name的动画不同。

path动画

直接使用path的name的动画，这个动画支持trimPathStart、trimPathEnd、pathData，fillColor，fillAlpha这几种与path有关的属性，这种动画形式可以直接看懂，trimPathStart与trimPathEnd是绘制步骤动画、pathData是改变参数动画（变形动画）。另外它的添加和启动动画方式与group包裹后的动画不同。

基本流程：

1. 创建矢量图
2. 创建animator目录（注意！是animator目录。不是anim目录。）
3. 在animator里添加动画xml
4. 在drawable目录里创建 animated-vector 组合器文件，组合动画xml与矢量图xml
5. 在View 添加这个组合器

属性说明

set

一个set中可以有多个objectAnimator，通过ordering属性控制执行顺序。ordering：取值["sequentially"|"together"],  sequentially（默认）。

• <set android:ordering="sequentially"> 顺序执行objectAnimator
• <set android:ordering="together"> 同时执行objectAnimator

objectAnimator

objectAnimator中一下这些属性

• propertyName 动画属性名称
• valueType 值的类型
• valueFrom 动画的起始值
• valueTo 动画的结束值
• repeatCount 重复次数
• repeatMode 重复模式
• duration 动画时长
• interpolator 动画插值
• startOffset 动画延迟开始时间

propertyName属性（属性名）

propertyName:指定动作属性如下：

• translateX  X轴移动
• translateY  Y轴移动
• trimPathStart  路径开始
• trimPathEnd   路径结束
• scaleX   X轴放大或者缩小比例
• scaleY   Y轴放大或者缩小比例
• rotation  旋转
• fillAlpha  透明度
• fillColor  颜色

Vector里面的属性基本上都可以（需要注意target里面绑定的是group就只能使用当前group的属性，下级group或path等不能使用，绑定的path就只能使用当前path的属性，clip-path一样）。

valueType属性（属性值类型）

valueType：PropertyName指定属性值的类型，共有四种类型，分别是：["intType"|"floatType"|"colorType"|pathType]。

valueFrom、valueTo属性（动画初始和结束值）

valueFrom：PropertyName指定属性的初始值,值的类型为ValueType（如位置、颜色、透明、PathData等）。

valueTo：PropertyName指定属性的结束值,值的类型为ValueType。

repeatCount、repeatMode属性（动画重复次数和样式）

repeatCount：定义动画重复次数，["infinite"]为无限次。

repeatMode：定义重复的行为 ["restart"|"reverse"], restart：直接跳到起始位置重新开始；reverse：倒退到起始位置重新开始。

duration属性（动画时间）

duration：动画执行一次的时间，单位ms。

interpolator属性（动画过程控制）

interpolator：控制动画的运行过程。Interpolator 定义了动画的变化速度，可以实现匀速、正加速、负加速、无规则变加速等。可以自己定义，也可以使用默认的，列如：

Accelerate:加速，共有下面四种模式
["@android:interpolator/accelerate_decelerate"|"@android:interpolator/accelerate_cubic"|
"@android:interpolator/accelerate_quad"|"@android:interpolator/accelerate_ quint "]
accelerate_decelerate：在动画开始与结束的地方速率改变比较慢，在中间的时候加速；
accelerate_cubic：拟合立方缓和函数的曲线加速。
accelerate_quad：曲线匹配的quadtratic缓解功能加速。
accelerate_ quint：曲线匹配功能昆特缓解加速。

Decelerate：减速，共有四种模式，同Accelerate。
["@android:interpolator/accelerate_decelerate"|"@android:interpolator/decelerate_cubic"|
"@android:interpolator/decelerate_quad"|"@android:interpolator/decelerate_ quint "]。

Anticipate：开始的时候向后然后向前甩["@android:interpolator/accelerate_decelerate"] 。

AnticipateOvershoot：开始的时候向后然后向前甩一定值后返回最后的值["@android:interpolator/anticipate_overshoot"] 。
Bounce：动画结束的时候弹起["@android:interpolator/bounce"] 。        
Cycle：动画循环播放特定的次数，速率改变沿着正弦曲线["@android:interpolator/cycle"] 。
Linear：以常量速率改变["@android:interpolator/linear"] 。             
Overshoot：向前甩一定值后再回到原来位置["@android:interpolator/overshoot"]。

startOffset属性（延时）

延迟播放的时间，单位ms，只延时第一次播放，重复播放时不延时。

实现动画

group 包裹动画：

例子1

效果图：

步骤一  创建矢量图

在drawable目录

my_svg.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="50dp"
    android:height="50dp"
    android:viewportWidth="50.0"
    android:viewportHeight="50.0">

    <group
        android:name="ic_right_path">

    <path
        android:strokeColor="@color/colorPrimaryDark"
        android:strokeWidth="5"
        android:pathData="M20,10 L35,27 M20,40 L35,24"/>

    </group>

</vector>

步骤二  创建动画xml

在animator目录

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:interpolator/decelerate_cubic"
    android:duration="3000"
    android:repeatMode="reverse"
    android:repeatCount="infinite"
    android:propertyName="translateX"
    android:valueFrom="0"
    android:valueTo="10"
    android:valueType="floatType">

</objectAnimator>

虽然上面已经说明过属性了，但是我还是在啰嗦解释一下：

动画插补器：android:interpolator="@android:interpolator/decelerate_cubic"   这里使用的是快到最后动画减速的属性
动画持续时间：android:duration="3000"  这里设置的是3秒
动画重复模式：android:repeatMode="reverse" 这里设置的是倒退到起始位置重新开始动画
动画属性：android:propertyName="translateX" 这里设置的是X轴移动
动画开始值：   android:valueFrom="0"
动画完成值：android:valueTo="10"
参数属性：android:valueType="floatType"  这里设置的是浮点值

步骤三  创建组合器

在drawable目录

arrow_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/my_svg">

    <target
        android:animation="@animator/ic_right_path_animator"
        android:name="ic_right_path"/>

</animated-vector>

步骤四  在布局xml上的ImageView里添加组合器 arrow_anim.xml

 <ImageView
        android:id="@+id/ic_anim"
        android:layout_width="300dp"
        android:layout_height="300dp"
        android:src="@drawable/arrow_anim"
        android:layout_centerInParent="true" />

步骤五  启动动画

mIcAnim = (ImageView)findViewById(R.id.ic_anim);
        mBtnStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Drawable drawable = mIcAnim.getDrawable();
                if (drawable instanceof Animatable) {
                    ((Animatable) drawable).start();

                }
            }
        });

直接使用path name的动画：

trimPathStart属性

例子1：

效果图

步骤一 创建矢量图

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="50dp"
    android:height="50dp"
    android:viewportWidth="50.0"
    android:viewportHeight="50.0">

    <path
        android:name="ic_right_path"
        android:strokeColor="@color/colorPrimaryDark"
        android:strokeWidth="5"
        android:pathData="M20,10 L35,27 L20,40"/>

</vector>

步骤二  创建动画xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:interpolator/decelerate_cubic"
    android:duration="3000"
    android:repeatMode="reverse"
    android:repeatCount="infinite"
    android:propertyName="trimPathStart"
    android:valueFrom="0"
    android:valueTo="1"
    android:valueType="floatType">

</objectAnimator>

步骤三  创建组合器

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/my_svg">

    <target
        android:animation="@animator/ic_right_path_animator"
        android:name="ic_right_path"/>

</animated-vector>

步骤四  添加组合器和启动动画

这里可以使用2种形式，别问我为什么可以使用两种。我也不知道为什么。。。

第一种就是上面使用group包裹的动画的形式

第二种在代码上添加，注意这里使用的是AnimatedVectorDrawable，这很重要。因为下面的pathData属性必须使用它

mIcAnim = (ImageView)findViewById(R.id.ic_anim);
        mBtnStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                AnimatedVectorDrawable drawable = (AnimatedVectorDrawable)getDrawable(R.drawable.arrow_anim);
                mIcAnim.setImageDrawable(drawable);
                if (drawable != null){
                    drawable.start();
                }
            }
        });

pathData属性

例子1：

效果图：

步骤一   创建矢量图

在drawable目录

my_svg.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="50dp"
    android:height="50dp"
    android:viewportWidth="50.0"
    android:viewportHeight="50.0">

    <path
        android:name="ic_right_path"
        android:strokeColor="@color/colorPrimaryDark"
        android:strokeWidth="5"
        android:pathData="M20,10 L35,27 M0,25 L34,25 M20,40 L35,24"/>

</vector>

 步骤二 在animator目录创建动画xml 

ic_right_path_animator.xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:interpolator/decelerate_cubic"
    android:duration="3000"
    android:repeatMode="reverse"
    android:repeatCount="infinite"
    android:propertyName="pathData"
    android:valueFrom="M20,10 L35,27 M0,25 L34,25 M20,40 L35,24"
    android:valueTo="M0,15 L40,15 M0,25 L40,25 M0,35 L40,35"
    android:valueType="pathType">

</objectAnimator>

 属性已经在上面有说明了，请对着理解就行了，这里需要注意2点！注意2点！注意2点！ 重要事情说三遍！

• 第一点     android:valueType="pathType"  这里使用的参数格式是pathType
• 第二点   矢量动画要求初始帧的路径命令序列（valueFrom）与结束帧的路径命令序列（valueTo）内的命令必须一一对应，只有参数值可以不同，这样才能插值，从而矢量动画才能执行。否则编译后运行时就崩溃了。

步骤三 创建组合器

arrow_anim.xml

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/my_svg">

    <target
        android:animation="@animator/ic_right_path_animator"
        android:name="ic_right_path"/>

</animated-vector>

添加动画（这里的动画输入的时候没有联想输入，属于正常请手动敲完）与path名称

 步骤四 给ImageView添加arrow_anim 在启动动画

        mIcAnim = (ImageView)findViewById(R.id.ic_anim);
        mBtnStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
           AnimatedVectorDrawable drawable =(AnimatedVectorDrawable)getDrawable(R.drawable.arrow_anim);
                mIcAnim.setImageDrawable(drawable);
                if (drawable != null){
                    drawable.start();
                }
            }
        });

注意！注意！注意！

1.请不要把arrow_anim组合器直接添加到View xml属性里，必须在代码上添加才可以，如果直接添加会报错。

2.这里使用的是AnimatedVectorDrawable类型，添加到View和启动动画，请不要弄错了。

例子2

 步骤一  创建矢量图

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">

    <path
        android:fillColor="#FF000000"
        android:pathData="M15.5,9.5m-1.5,0a1.5,1.5 0,1 1,3 0a1.5,1.5 0,1 1,-3 0"/>

    <path
        android:fillColor="#FF000000"
        android:pathData="M8.5,9.5m-1.5,0a1.5,1.5 0,1 1,3 0a1.5,1.5 0,1 1,-3 0"/>

    <path
        android:fillColor="#FF000000"
        android:pathData="M11.99,2
        C6.47,2 2,6.48 2,12
        s4.47,10 9.99,10
        C17.52,22 22,17.52 22,12S17.52,2 11.99,2z
        M12,20
        c-4.42,0 -8,-3.58 -8,-8
        s3.58,-8 8,-8 8,3.58 8,8 -3.58,8 -8,8z"/>

    <path
        android:name="expression"
        android:strokeColor="#FF000000"
        android:strokeWidth="1.5"
        android:pathData="M8,17 C 10,14 14,14 16,17"/>

</vector>

说明一下，这里我使用的笑脸是Android studio自带的，一开始的想法是找一个哭脸和笑脸，然后直接找到嘴巴的属性就行了。但是，坑大了，最后发现哭脸和笑脸的嘴巴属性根本不一样。没有办法最后我只能自己直接用三次贝赛曲线画了一个嘴巴。使用各位大神如果想直接使用Android studio的矢量图来做path值变化，请一定检查清楚属性是否一样（只要有一个字母不同就不行！）

步骤二   创建动画xml

<?xml version="1.0" encoding="utf-8"?>
<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
    android:interpolator="@android:interpolator/decelerate_cubic"
    android:duration="3000"
    android:repeatMode="reverse"
    android:repeatCount="infinite"
    android:propertyName="pathData"
    android:valueFrom="M8,17 C 10,14 14,14 16,17"
    android:valueTo="M8,15 C 10,18 14,18 16,15"
    android:valueType="pathType">

</objectAnimator>

步骤三  创建组合器

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_sentiment_satisfied_black_24dp">

    <target
        android:animation="@animator/expression"
        android:name="expression"/>

</animated-vector>

步骤四  向View添加组合器、启动动画

mIcAnim = (ImageView)findViewById(R.id.ic_anim);
        mBtnStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                AnimatedVectorDrawable drawable = (AnimatedVectorDrawable)getDrawable(R.drawable.arrow_anim2);
                mIcAnim.setImageDrawable(drawable);
                if (drawable != null){
                    drawable.start();
                }
            }
        });

例子3

效果图：

步骤一 创建矢量图

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="100dp"
        android:height="100dp"
        android:viewportWidth="100.0"
        android:viewportHeight="100.0">
    <!--头-->
    <path
        android:fillColor="@color/colorPrimaryDark"
        android:pathData="M40,20 C 40,6.5 60,6.5 60,20
                          M40,20 C 40,33.5 60,33.5 60,20  "/>
    <!--躯干-->
    <path
        android:strokeColor="@color/colorPrimaryDark"
        android:strokeWidth="16"
        android:pathData="M48.5,32 L45,60"/>
    <!--左手-->
    <path
        android:strokeColor="@color/colorPrimaryDark"
        android:strokeWidth="10"
        android:pathData="M43,35 L25,45 25,55 "/>
    <!--右手-->
    <path
        android:strokeColor="@color/colorPrimaryDark"
        android:strokeWidth="10"
        android:pathData="M50,36.3 L75,57"/>
    <!--左腿 M43,55 L30,70 L15,65-->
    <path
        android:name="left_leg"
        android:strokeColor="@color/colorPrimaryDark"
        android:strokeWidth="10"
        android:pathData="M43,55 L30,70 L15,65"/>
    <!--右腿 -->
    <path
        android:name="right_leg"
        android:strokeColor="@color/colorPrimaryDark"
        android:strokeWidth="10"
        android:pathData="M47,55 L55,70 L60,90"/>

</vector>

预览效果：

步骤 二 创建对应的动画xml文件

创建左腿动画 step_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set android:ordering="sequentially"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1500"
        android:propertyName="pathData"
        android:valueFrom="M43,55 L30,70 L15,65"
        android:valueTo="M43,55 L45,70 L35,85"
        android:valueType="pathType">

    </objectAnimator>
    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1500"
        android:propertyName="pathData"
        android:valueFrom="M43,55 L45,70 L35,85"
        android:valueTo="M47,55 L55 70 L60 90"
        android:valueType="pathType">

    </objectAnimator>
</set>

 注意！这里为了让腿部动的不那么尴尬，所以我添加了一个中间值动画。所以这里使用的是组合动画，在set包裹下的objectAnimator 会使用 android:ordering="sequentially"属性按顺序运行动画。注意，我取消了android:repeatMode="reverse"
    android:repeatCount="infinite"  这两个属性，并且使用默认的插补器，所以没有配置插补器。

创建右腿动画 step_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set android:ordering="sequentially"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1500"
        android:propertyName="pathData"
        android:valueFrom="M43,55 L30,70 L15,65"
        android:valueTo="M43,55 L45,70 L35,85"
        android:valueType="pathType">

    </objectAnimator>
    <objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="1500"
        android:propertyName="pathData"
        android:valueFrom="M43,55 L45,70 L35,85"
        android:valueTo="M47,55 L55 70 L60 90"
        android:valueType="pathType">

    </objectAnimator>
</set>

步骤三 创建组合器

<?xml version="1.0" encoding="utf-8"?>
<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/ic_step">

    <target
        android:animation="@animator/step_left"
        android:name="left_leg"/>

    <target
        android:animation="@animator/step_right"
        android:name="right_leg"/>

</animated-vector>

步骤四  启动动画

mIcAnim = (ImageView)findViewById(R.id.ic_anim);
        mBtnStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                AnimatedVectorDrawable drawable = (AnimatedVectorDrawable)getDrawable(R.drawable.arrow_anim3);
                mIcAnim.setImageDrawable(drawable);
                if (drawable != null){
                    drawable.start();
                }
            }
        });