系列文章传送门:
Android 动画 - 帧动画 & 补间动画
Android 动画 - 插值器
Android 动画 - 属性动画
在移动开发中,动画可以丰富页面的 UI 效果,一个动画包含以下几个元素
- 控件: 想实现动画的 View 等
- 时长:动画的时长
- 起始值,结束值:动画从开始和结束的值(比如移动,就是坐标值)
- 插值器:定义了动画变化的速率
动画包含三大类型:帧动画(Frame),补间动画(Tween),属性动画(Property)
帧动画 (Frame)
顺序播放一组预先定义好的图。
- 首先在 res/drawable/目录下定义xml,根节点为
animation-list
,设置动画播放的帧资源 - 使用
AnimationDrawable
加载定义好的资源
oneshot
是否只展示一遍,设置为false会不停的循环播放动画- 根标签下,通过
标签对动画中的每一个图片进行声明
drawable
要播放的图片duration
展示该图片的时间长度
使用AnimationDrawable
播放动画
view.setBackground(R.drawable.frame_animation);
AnimationDrawable animation = (AnimationDrawable)view.getBackground();
animation.start();
补间动画(Tween )
补间动画也称作 View 动画,只要定义 View,设置它开始和结束的位置,中间的 View 会由系统自动补齐,不需要准备每一帧动画。
View 动画主要支持四种效果:平移、缩放、旋转、透明度。实现这几种动画的类,都是 Animation 的子类。
使用这种动画可以通过在 xml 中实现,也可以在 类文件中定义。
TranslateAnimation
平移动画,对应标签为
- android:fromXDelta 起始 x 坐标
- android:toXDelta 结束 x 坐标
- android:fromYDelta 起始 y 坐标
- android:toYDelta 结束 y 坐标
数值的表示方式如下:
数字:如10,表示当前坐标位置
百分比:如10%,表示当前 View 的坐标 + View 控件长度 10%
百分数p:如10%p,表示当前View的坐标 + 父控件长度 50%
范例:
在 java / kotlin 中使用该文件
Animation animation = AnimationUtils.loadAnimation(this, R.anim.anim_translate);
view.startAnimation(animation);
其中 duration 是动画的时长,interpolator 是动画的插值器,来定义动画变化的速率,每一种动画都具有这两个属性,还有一些其他的公共属性可配置,可以慢慢尝试。
类实现,等同于上面的配置(后面的几种动画实现方式是一样的)
// view 在 1s 间从(0, 0) 移动到 (100, 100)
TranslateAnimation animation = new TranslateAnimation(0, 0, 100, 100);
animation .setDuration(1000);
animation .setInterpolator(new DecelerateInterpolator());
view.startAnimation(animation);
- TranslateAnimation 还有一个重载的构造函数
/**
* @param fromXType 动画开始前的X坐标类型。取值范围为 ABSOLUTE(绝对位置)、RELATIVE_TO_SELF(以自身宽或高为参考)、RELATIVE_TO_PARENT(以父控件宽或高为参考)
* @param fromXValue 动画开始前的X坐标值。当对应的 Type 为ABSOLUTE时,表示绝对位置;否则表示相对位置,1.0表示100%
* @param toXType 动画结束后的 X 坐标类型
* @param toXValue 动画结束后的 X 坐标值
* @param fromYType 动画开始前的 Y 坐标类型
* @param fromYValue 动画开始前的 Y 坐标值
* @param toYType 动画结束后的 Y 坐标类型
* @param toYValue 动画结束后的 Y 坐标值
*/
public TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue,
int fromYType, float fromYValue, int toYType, float toYValue)
ScaleAnimation
缩放动画,对应标签
- fromXScale、 fromYScale 起始缩放值
- toXScale、toYScale 目标缩放值
- pivotX、pivotY 缩放的中心位置
- ScaleAnimation 有三个构造函数
public ScaleAnimation(float fromX, float toX, float fromY, float toY)
public ScaleAnimation(float fromX, float toX, float fromY, float toY, float pivotX, float pivotY)
/**
* @param fromX X坐标初始值
* @param toX X坐标目标值
* @param fromY Y坐标初始值
* @param toY Y坐标目标值
* @param pivotXType 缩放中心点的X坐标类型。取值范围有三种
* Animation.ABSOLUTE(绝对坐标)
* Animation.RELATIVE_TO_SELF(相对于自身View)
* Animation.RELATIVE_TO_PARENT(相对于父控件的坐标)
* @param pivotXValue 缩放中心点的X坐标值当对应的 Type 为ABSOLUTE时,表示绝对位置;否则表示相对位置,1.0表示100%
* @param pivotYType 缩放中心点的Y坐标类型
* @param pivotYValue 缩放中心点的Y坐标
*/
public ScaleAnimation(float fromX, float toX, float fromY, float toY,
int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
// 以view中心为缩放点,放大两倍
ScaleAnimation animation = new ScaleAnimation(
1.0f, 2.0f, 1.0f, 2.0f,
Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f
);
animation.setDuration(1000);
view.startAnimation(animation);
RotateAnimation
旋转动画,对应标签
- fromDegree 旋转的起始角度
- toDegree 旋转的结束角度
/**
* @param fromDegrees 旋转的起始角度
* @param toDegrees 旋转的结束角度
* 默认旋转中心点为 (0, 0)
*/
public RotateAnimation(float fromDegrees, float toDegrees)
public RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY)
/**
* @param fromDegrees 旋转的起始角度
* @param toDegrees 旋转的结束角度
* @param pivotXType
* @param pivotXValue
* @param pivotYType
* @param pivotYValue
*/
public RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue,
int pivotYType, float pivotYValue) {
AlphaAnimation
透明度动画,对应标签
/**
* @param fromAlpha 动画开始透明度 0~1
* @param toAlpha 动画结束透明度
*/
public AlphaAnimation(float fromAlpha, float toAlpha)
AnimationSet
AnimationSet 也继承于 Animation,可以同时处理多组动画,比如在平移的时候旋转等。
构造参数有一个参数,表示所添加的动画是否都共用一个插值器
/**
* @param shareInterpolator
*/
public AnimationSet(boolean shareInterpolator) {
常用的方法如下
// 添加动画
animationSet.addAnimation(new TranslateAnimation(0, 0, 100, 100));
// 设置插值器 默认 @android:anim/accelerate_decelerate_interpolator--> android:interpolator="`@android:anim/linear_interpolator`"
animationSet.setInterpolator(new LinearInterpolator());
// 设置动画持续时长,默认 0 --> android:duration="3000"
animationSet.setDuration(3000);
//设置动画结束之后是否保持动画的目标状态,默认 false --> android:fillAfter="true"
animationSet.setFillAfter(true);
//设置动画结束之后是否保持动画开始时的状态,默认 ture --> android:fillBefore="false"
animationSet.setFillBefore(false);
// 设置重复模式,RESTART(1) 顺序播放,REVERSE(2) 重复时逆向播放 android:repeatMode
animationSet.setRepeatMode(AnimationSet.REPEAT);
//设置重复次数,默认 0 --> android:repeatCount=-1
animationSet.setRepeatCount(AnimationSet.INFINITE);
//设置动画延时时间,默认 0 --> android:startOffset="2000"
animationSet.setStartOffset(2000);
//取消动画
animationSet.cancel();
//重置动画
animationSet.reset();
为 View 设置动画
//开始动画
view.startAnimation(animationSet);