简介——矢量动画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包裹后的动画不同。
基本流程:
- 创建矢量图
- 创建animator目录(注意!是animator目录。不是anim目录。)
- 在animator里添加动画xml
- 在drawable目录里创建 animated-vector 组合器文件,组合动画xml与矢量图xml
- 在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(); } } });