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

阅读量：5148 次

发布时间：2019-06-13

本文共 7717 字，大约阅读时间需要 25 分钟。

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

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

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

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

基本流程：

创建矢量图

创建animator目录（注意！是animator目录。不是anim目录。）

在animator里添加动画xml

在drawable目录里创建 animated-vector 组合器文件，组合动画xml与矢量图xml

在View 添加这个组合器

属性说明

Set

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

ObjectAnimator

ObjectAnimator中有propertyName、valueType、valueFrom、valueTo、repeatCount、repeatMode、duration、interpolator、startOffset等属性。

PropertyName属性（属性名）

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

在animator目录

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

动画插补器：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上的ImageView里添加组合器 arrow_anim.xml

步骤五启动动画

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

步骤三创建组合器

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

这里可以使用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

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

ic_right_path_animator.xml

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

第一点 android:valueType="pathType" 这里使用的参数格式是pathType

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

步骤三创建组合器

arrow_anim.xml

添加动画（这里的动画输入的时候没有联想输入，属于正常请手动敲完）与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

步骤一创建矢量图

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

步骤二创建动画xml

步骤三创建组合器

步骤四向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

效果图：

步骤一创建矢量图

预览效果：

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

创建左腿动画 step_left.xml

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

android:repeatCount="infinite" 这两个属性，并且使用默认的插补器，所以没有配置插补器。

创建右腿动画 step_right.xml

步骤三创建组合器

步骤四启动动画

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();                }            }        });