作者:邹峰立,微博:zrunker,邮箱:[email protected],微信公众号:书客创作,个人平台:www.ibooker.cc。
本文选自书客创作平台第16篇文章。阅读原文 。
Android动画Tween Animation(变换动画/补间动画/View Animation),是操作某个控件让其展现出旋转、渐变、移动、缩放的这么一种转换过程。我们可以以XML形式定义动画,也可以编码实现。
Tween Animation有四种形式:
alpha:渐变透明度动画效果,在Java代码中使用AlphaAnimation,或者在XML中使用
scale:渐变尺寸伸缩动画效果,在Java代码中使用ScaleAnimation,或者在XML中使用
translate:位置移动动画效果,在Java代码中使用TranslateAnimation,或者在XML中使用
rotate:旋转动画效果,在Java代码中使用RotateAnimation,或者在XML中使用
这几种动画有一些公共的方法:
(1)setDuration(long durationMills)设置动画时间间隔,单位毫秒/ms。
(2)setFillAfter(Boolean fillAfter)设置画面保持动画完成后的状态,与之相对的是setFillBefore(true)设置画面保存动画开始之前的状态。
(3)setStartOffSet(long startOffSet)设置动画开始之前的停顿等待时间,单位毫秒/ms。
(4)setRepeatCount(int repeatCount)设置动画重复执行的次数。
(5)setInterpolator(Context context,@AnimRes @Interpolator Resintres ID)设置动画插值器,例如加速,匀速等。
1、对于alpha动画,可以借助于AlphaAnimation实现。
AlphaAnimation alphaAnim =new AlphaAnimation(1.0f, 0.0f);
alphaAnim.setDuration(1000);
alphaAnim.setFillAfter(true);
alphaAnim.setStartOffset(1000);
alphaAnim.setInterpolator(this, android.R.anim.decelerate_interpolator);
imageView.startAnimation(alphaAnim);
构造方法说明:new AlphaAnimation(float fromAlpha, float toAlpha);参数fromAlpha表示从哪个透明度开始,参数toAlpha表示到哪个透明度结束。取值范围0~1,0代表全透明,1代表不透明。
也可以在XML文件中通过
最后通过AnimationUtils进行调用即可。
Animation alphaAnim = AnimationUtils.loadAnimation(this, R.anim.alpha);
imageView.startAnimation(alphaAnim);
2、对于scale动画,可以借助于ScaleAnimation实现。
ScaleAnimation scaleAnim =new ScaleAnimation(1.0f, 0.5f, 1.0f, 0.5f, 0.5f, 0.5f);
scaleAnim.setDuration(1000);
scaleAnim.setFillAfter(true);
scaleAnim.setStartOffset(1000);
scaleAnim.setInterpolator(this, android.R.anim.decelerate_interpolator);
imageView.startAnimation(scaleAnim);
构造方法说明:new ScaleAnimation(float fromX, float toX, float fromY, float toY,float pivotX, float pivotY);参数fromX表示起始的X方向上相对自身的缩放比例,参数toX表示代表结尾的X方向上相对自身的缩放比例,参数fromY表示起始的Y方向上相对自身的缩放比例,参数toY表示代表结尾的Y方向上相对自身的缩放比例,参数pivotX属性代表缩放的中轴点X坐标,参数pivotY属性代表缩放的中轴点Y坐标。
也可以在XML文件中通过
最后通过AnimationUtils进行调用即可。
Animation scaleAnim = AnimationUtils.loadAnimation(this, R.anim.scale);
imageView.startAnimation(scaleAnim);
3、对于translate动画,可以借助于TranslateAnimation实现。
TranslateAnimation translateAnim =new TranslateAnimation(0.0f, 100.0f, 0.0f, 100.0f);
translateAnim.setDuration(1000);
translateAnim.setFillAfter(true);
translateAnim.setStartOffset(1000);
translateAnim.setInterpolator(this, android.R.anim.decelerate_interpolator);
imageView.startAnimation(translateAnim);
构造方法说明:new TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta);参数fromXDelta代表起始X方向的位置,参数toXDelta代表结尾X方向上的位置,参数fromYDelta代表起始Y方向上的位置,参数toYDelta代表结尾Y方向上的位置。
也可以在XML文件中通过
最后通过AnimationUtils进行调用即可。
AnimationtranslateAnim = AnimationUtils.loadAnimation(this, R.anim.translate);
imageView.startAnimation(translateAnim);
4、对于rotate动画,可以借助于RotateAnimation实现。
RotateAnimation rotateAnim =new RotateAnimation(0.0f,180.0f,0.5f,0.5f);
rotateAnim.setDuration(1000);
rotateAnim.setFillAfter(true);
rotateAnim.setStartOffset(1000);
rotateAnim.setInterpolator(this,android.R.anim.decelerate_interpolator);
imageView.startAnimation(rotateAnim);
构造方法说明:RotateAnimation(float fromDegrees, float toDegrees, float pivotX, float pivotY);参数fromDegrees代表起始角度,参数toDegrees代表结尾角度,参数pivotX代表旋转中心的X坐标值,参数pivotY代表旋转中心的Y坐标值。
也可以在XML文件中通过
最后通过AnimationUtils进行调用即可。
Animation rotateAnim = AnimationUtils.loadAnimation(this,R.anim.rotate);
imageView.startAnimation(rotateAnim);
5、对于组合动画,组合动画是将多种动画结合在一起实现动画效果,它的实现方式有3种,可以通过动画监听的方式实现,可以借助于AnimationSet实现,也可以通过XML的方式来实现。
a. 第一种:动画监听。
RotateAnimation rotateAnim =new RotateAnimation(0.0f, 180.0f, 0.5f, 0.5f);
rotateAnim.setDuration(1000);
rotateAnim.setFillAfter(true);
rotateAnim.setStartOffset(1000);
rotateAnim.setInterpolator(this, android.R.anim.decelerate_interpolator);
rotateAnim.setAnimationListener(new Animation.AnimationListener() {
@Override
public voidonAnimationStart(Animation animation) {
}
@Override
public voidonAnimationEnd(Animation animation) {
TranslateAnimation translateAnim =new TranslateAnimation(0.0f, 100.0f, 0.0f, 100.0f);
translateAnim.setDuration(1000);
translateAnim.setFillAfter(true);
translateAnim.setStartOffset(1000);
translateAnim.setInterpolator(TweenAnimationActivity.this, android.R.anim.decelerate_interpolator);
imageView.startAnimation(translateAnim);
}
@Override
public voidonAnimationRepeat(Animation animation) {
}
});
imageView.startAnimation(rotateAnim);
b. 第二种:AnimationSet实现。
AnimationSet animationSet =new AnimationSet(true);
animationSet.setInterpolator(this, android.R.anim.decelerate_interpolator);
animationSet.setFillAfter(true);
RotateAnimation rotateAnim =new RotateAnimation(0.0f, 180.0f, 0.5f, 0.5f);
rotateAnim.setDuration(1000);
rotateAnim.setStartOffset(1000);
TranslateAnimation translateAnim =new TranslateAnimation(0.0f, 100.0f, 0.0f, 100.0f);
translateAnim.setDuration(1000);
translateAnim.setStartOffset(2000);
animationSet.addAnimation(rotateAnim);
animationSet.addAnimation(translateAnim);
imageView.startAnimation(animationSet);
c. 第三种:XML实现。
下面重点介绍一下插值器的概念:
首先要了解为什么需要插值器,因为在补间动画中,我们一般只定义关键帧(首帧或尾帧),然后由系统自动生成中间帧,生成中间帧的这个过程可以成为“插值”。插值器定义了动画变化的速率,提供不同的函数定义变化值相对于时间的变化规则,可以定义各种各样的非线性变化函数,比如加速、减速等。下面是几种常见的插值器:
Interpolator对象资源ID功能作用:
- AccelerateDecelerateInterpolator @android:anim/accelerate_decelerate_interpolator先加速再减速。
- AccelerateInterpolator @android:anim/accelerate_interpolator加速。
- AnticipateInterpolator @android:anim/anticipate_interpolator先回退一小步然后加速前进。
- AnticipateOvershootInterpolator @android:anim/anticipate_overshoot_interpolator在上一个基础上超出终点一小步再回到终点。
- BounceInterpolator @android:anim/bounce_interpolator最后阶段弹球效果。
- CycleInterpolator @android:anim/cycle_interpolator周期运动。
- DecelerateInterpolator @android:anim/decelerate_interpolator减速。
- LinearInterpolator @android:anim/linear_interpolator匀速。
- OvershootInterpolator @android:anim/overshoot_interpolator快速到达终点并超出一小步最后回到终点。
注意:补间动画改变的只是控件当前的动作,控件在动画处理之后,它的属性值并未发生任何变化。例如你对设置点击事件的ImageView进行平移,让其保持平移之后的状态,当你点击平移之后的ImageView,你会发现没有预期的点击效果,但是如果你点击平移之前的位置你会发现有预期点击效果。这个就是因为补间动画没有改变控件的属性。
GitHub地址
阅读原文