注意:本篇文章是本人阅读关于Android动画的文章所写下的总结,方便以后查阅,所有内容非原创,侵权删。
本篇文章内容来自于
- Android高级进阶 顾浩鑫
- Android自定义控件三部曲文章索引之动画篇
目录
3.补间动画 TweenAnimation
--3.1 AlphaAnimation 透明度动画
--3.2 TranslateAnimation 位置移动动画
--3.3 RotateAnimation 旋转动画
--3.4 ScaleAnimation 缩放动画
--3.5 AnimationSet 动作合集
--3.6 插值器Interpolator
--3.7 自定义补间动画(待补)
3.补间动画 TweenAnimation
只需要定义动画的开始和结束的两个关键帧,并指定动画变化的时间和方式等,然后交由Android系统进行计算。
通过在两个关键帧之间插入渐变值来实现平滑过渡,从而对view的内容完成一系列的图形变化来实现的动画效果。
补间动画分为:scale、alpha、translate、rotate
Animation类(scale、alpha、translate、rotate)共有的属性
* android:duration 动画持续时间,以毫秒为单位
* android:fillAfter 如果设置为true,控件动画结束时,将保持动画最后时的状态
* android:fillBefore 如果设置为true,控件动画结束时,还原到开始动画前的状态
* android:fillEnabled 与android:fillBefore 效果相同,都是在动画结束时,将控件还原到初始化状态
* android:repeatCount 重复次数
* android:repeatMode 重复类型,有reverse和restart两个值,reverse表示倒序回放,restart表示重新放一遍,必须与repeatCount一起使用才能看到效果。
* android:interpolator 设定插值器
3.1 AlphaAnimation 透明度动画
AlphaAnimation自有属性
android:fromAlpha 动画开始的透明度
从0.0-1.0,0.0表示全透明,1.0表示完全不透明
android:toAlpha 动画结束时的透明度
XML实现
1.在res/anim新建xml文件 anim_tween_alpha.xml
2.播放动画
通过AnimationUtils.loadAnimation(this, xxx);从XML文件中获取动画。再利用startAnimation将动画传递给指定控件显示。
Animation anim_tween_alpha = AnimationUtils.loadAnimation(this, R.anim.anim_tween_alpha);
ivAnimTweenAlpha.startAnimation(anim_tween_alpha);
code实现
AlphaAnimation构造函数
AlphaAnimation(Context context, AttributeSet attrs) 同样,从本地XML加载动画,基本不用
AlphaAnimation(float fromAlpha, float toAlpha)
实现代码
AlphaAnimation alphaAnimation = new AlphaAnimation(0.1f, 1.0f);
alphaAnimation.setDuration(3000);
ivAnimTweenAlpha.startAnimation(alphaAnimation);
3.2 TranslateAnimation 位置移动动画
TranslateAnimation自身属性
android:fromXDelta 起始点X轴坐标
可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p,具体意义已在scale标签中讲述
android:fromYDelta 起始点Y轴从标
android:toXDelta 结束点X轴坐标
android:toYDelta 结束点Y轴坐标
XML实现
1.在res/anim新建xml文件 anim_tween_translate.xml
2.播放动画
通过AnimationUtils.loadAnimation(this, xxx);从XML文件中获取动画。再利用startAnimation将动画传递给指定控件显示。
Animation anim_tween_translate = AnimationUtils.loadAnimation(this, R.anim.anim_tween_translate);
ivAnimTweenTranslate.startAnimation(anim_tween_translate);
code实现
TranslateAnimation构造函数
TranslateAnimation(Context context, AttributeSet attrs) 同样,基本不用
TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
TranslateAnimation(int fromXType, float fromXValue, int toXType, float toXValue, int fromYType, float fromYValue, int toYType, float toYValue)
由于fromXDelta、fromYDelta、toXDelta、toYDelta这三个属性都具有三种状态,所以在构造函数中,最理想的状态就是第三个构造函数,能够指定每个值的类型,
第二个构造函数:TranslateAnimation (float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)使用是绝对数值。
只有最后一个构造函数可以指定百分数和相对父控件的百分数。
代码实现
TranslateAnimation translateAnimation = new TranslateAnimation(Animation.ABSOLUTE, 0f, Animation.ABSOLUTE, 100f, Animation.ABSOLUTE, 0f, Animation.ABSOLUTE, 100f);
translateAnimation.setDuration(3000);
ivAnimTweenTranslate.startAnimation(translateAnimation);
3.3 RotateAnimation 旋转动画
android:fromDegrees 开始旋转的角度位置
正值代表顺时针方向度数,负值代码逆时针方向度数
android:toDegrees 结束时旋转到的角度位置
android:pivotX 旋转中心X轴坐标,
可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p,具体意义已在scale标签中
android:pivotY 旋转中心Y轴坐标
XML实现
1.在res/anim新建xml文件 anim_tween_rotate.xml
2.播放动画
通过AnimationUtils.loadAnimation(this, xxx);从XML文件中获取动画。再利用startAnimation将动画传递给指定控件显示。
Animation anim_tween_rotate = AnimationUtils.loadAnimation(this, R.anim.anim_tween_rotate);
ivAnimTweenRotate.startAnimation(anim_tween_rotate);
code实现
RotateAnimation构造函数
RotateAnimation(Context context, AttributeSet attrs) 从本地XML文档加载动画,同样,基本不用
RotateAnimation(float fromDegrees, float toDegrees)
RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY)
RotateAnimation(float fromDegrees, float toDegrees, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
pivotXType、pivotYType有三个取值:Animation.ABSOLUTE、Animation.RELATIVE_TO_SELF和Animation.RELATIVE_TO_PARENT;
代码实现
RotateAnimation rotateAnimation = new RotateAnimation(0, -90, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
rotateAnimation.setDuration(3000);
ivAnimTweenRotate.startAnimation(rotateAnimation);
3.4 ScaleAnimation 缩放动画 动态调控件尺寸
ScaleAnimation自有属性
android:fromXScale 起始的X方向上相对自身的缩放比例,浮点值,
比如1.0代表自身无变化,0.5代表起始时缩小一倍,2.0代表放大一倍;
android:toXScale 结尾的X方向上相对自身的缩放比例,浮点值;
android:fromYScale 起始的Y方向上相对自身的缩放比例,浮点值,
android:toYScale 结尾的Y方向上相对自身的缩放比例,浮点值;
android:pivotX 缩放起点X轴坐标,可以是数值、百分数、百分数p 三种样式,比如 50、50%、50%p,
当为数值50时,表示在当前View的左上角,即原点处加上50px,做为起始缩放点;
如果是50%,表示在当前控件的左上角加上自己宽度的50%做为起始点;
如果是50%p,那么就是表示在当前的左上角加上父控件宽度的50%做为起始点x轴坐标。
android:pivotY 缩放起点Y轴坐标
XML实现
1.在res/anim新建xml文件 anim_tween_scale.xml
2.播放动画
通过AnimationUtils.loadAnimation(this, xxx);从XML文件中获取动画。再利用startAnimation将动画传递给指定控件显示。
Animation anim_tween_scale = AnimationUtils.loadAnimation(this, R.anim.anim_tween_scale);
iv_anim_tween_scale.startAnimation(anim_tween_scale);
code实现
ScaleAnimation构造函数
ScaleAnimation(Context context, AttributeSet attrs) 从XML文件加载动画,基本用不到
ScaleAnimation(float fromX, float toX, float fromY, float toY)
ScaleAnimation(float fromX, float toX, float fromY, float toY, float pivotX, float pivotY)
ScaleAnimation(float fromX, float toX, float fromY, float toY, int pivotXType, float pivotXValue, int pivotYType, float pivotYValue)
android:pivotX中有三种取值,数,百分数,百分数p;
pivotXType用于将float pivotX变成三种取值,它的取值有三个,Animation.ABSOLUTE、Animation.RELATIVE_TO_SELF、Animation.RELATIVE_TO_PARENT;
实现代码:
ScaleAnimation scaleAnimation = new ScaleAnimation(1.0f, 0.1f, 1.0f, 0.1f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
scaleAnimation.setDuration(3000);
iv_anim_tween_scale.startAnimation(scaleAnimation);
3.5 AnimationSet 动作合集
Set标签没有自己的属性,只有从Animation继承而来的属性
当它们用于Set标签时,就会对Set标签下的所有子控件都产生作用。
XML实现
1.在res/anim新建xml文件 anim_tween_set.xml
2.播放动画
通过AnimationUtils.loadAnimation(this, xxx);从XML文件中获取动画。再利用startAnimation将动画传递给指定控件显示。
Animation anim_tween_set = AnimationUtils.loadAnimation(this, R.anim.anim_tween_set);
ivAnimTweenSet.startAnimation(anim_tween_set);
code实现
AnimationSet构造方法
AnimationSet(Context context, AttributeSet attrs) 同样,基本不用
AnimationSet(boolean shareInterpolator) shareInterpolator取值true或false,取true时,指在AnimationSet中定义一个插值器(interpolater),它下面的所有动画共同。如果设为false,则表示它下面的动画自己定义各自的插值器。
增加动画的函数为:
public void addAnimation (Animation a)
代码实现
AlphaAnimation alphaAnimation = new AlphaAnimation(1.0f, 0.1f);
ScaleAnimation scaleAnimation = new ScaleAnimation(0.0f, 1.4f, 0.0f, 1.4f, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
RotateAnimation rotateAnimation = new RotateAnimation(0, 720, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
AnimationSet animationSet = new AnimationSet(false);
animationSet.addAnimation(alphaAnimation);
animationSet.addAnimation(scaleAnimation);
animationSet.addAnimation(rotateAnimation);
animationSet.setDuration(3000);
animationSet.setFillAfter(true);
ivAnimTweenSet.startAnimation(animationSet);
3.6 插值器Interpolator
什么是插值器Interpolator?
Android在补间动画的开始和结束关键帧之间插入渐变值,它依据的根本就是Interpolator。
Interpolator负责控制动画的变化速度,使动画能以匀速、加速、减速、抛物线等多种速度进行变化。
3.6.0 Interpolator使用
xml中
code中
ScaleAnimation interpolateScaleAnim=new ScaleAnimation(0.0f,1.4f,0.0f,1.4f,Animation.RELATIVE_TO_SELF,0.5f,Animation.RELATIVE_TO_SELF,0.5f);
interpolateScaleAnim.setInterpolator(new BounceInterpolator());
...
3.6.1 系统自带Interpolator
意义如下:
AccelerateDecelerateInterpolator 在动画开始与介绍的地方速率改变比较慢,在中间的时候加速
AccelerateInterpolator 在动画开始的地方速率改变比较慢,然后开始加速
AnticipateInterpolator 开始的时候向后然后向前甩
AnticipateOvershootInterpolator 开始的时候向后然后向前甩一定值后返回最后的值
BounceInterpolator 动画结束的时候弹起
CycleInterpolator 动画循环播放特定的次数,速率改变沿着正弦曲线
DecelerateInterpolator 在动画开始的地方快然后慢
LinearInterpolator 以常量速率改变
OvershootInterpolator 向前甩一定值后再回到原来位置
3.6.2自定义Interpolator(待补)
先看看系统加速器LinearInterpolator的写法:
//以常量速率改变的加速器LinearInterpolator
public class LinearInterpolator implements Interpolator {
public LinearInterpolator() {
}
public LinearInterpolator(Context context, AttributeSet attrs) {
}
public float getInterpolation(float input) {
return input;
}
}
//接口Interpolator(LinearInterpolator实现了Interpolator接口)
public interface Interpolator extends TimeInterpolator {
}
//(Interpolator接口则直接继承自TimeInterpolator)
public interface TimeInterpolator {
float getInterpolation(float input);
/*
参数input:
input参数是一个float类型,它取值范围是0到1,表示当前动画的时间进度(与我们的任何设置无关).
取0时表示动画刚开始,取1时表示动画结束,取0.5时表示动画中间的位置,其它类推。
返回值:
表示当前实际想要显示的进度。取值可以超过1也可以小于0。
超过1表示已经超过目标值,小于0表示小于开始位置。
*/
}
从上面可以看到,LinearInterpolator在getInterpolation函数中,直接把input值返回,即以当前动画的进度做为动画的数值进度,这也就表示当前动画的数值进度与动画的时间进度一致,比如,如果当前动画进度为0,那动画的数值进度也是0,那如果动画进度为0.5,那动画的数值进度也是在0.5,当动画结束,动画的进度就变成1了,而动画的数值进度也是1了。
则自定义Interpolator
public class MyInterpolator implements Interpolator {
@Override
public float getInterpolation(float input) {
return 1-input;
}
}
使用
ValueAnimator valueAnimatorInt = ValueAnimator.ofInt(0, 800);
valueAnimatorInt.setInterpolator(new MyInterpolator());
...