引言
一个优质的APP应该是在功能实现和流程完整的基础上,尽量的提高用户体验度,而主要方式就是界面UI的显示和操作时的各种动画效果,一个好的动画效果可以使用户眼前一亮,大大提高用户对APP的满意度和使用欲望,更能在大量推广和实施的时候事半功倍。
Android系统在一开始的时候就给我们提供了两种实现动画效果的方式,逐帧动画(frame-by-frame animation)和补间动画(tweened animation)。逐帧动画的工作原理很简单,其实就是将一个完整的动画拆分成一张张单独的图片,然后再将它们连贯起来进行播放,类似于动画片的工作原理。补间动画则是可以对View进行一系列的动画操作,包括淡入淡出、缩放、平移、旋转四种。
由于工作需要,研究了一种简单实现的补间动画,是使用ObjectAnimator,下面就分享给大家一些简单的用法和动画实现。
首先来了解一下ObjectAnimator的大概用法:
- 首先定义一个ObjectAnimator动画,并定义动画的属性
1. /**
* params1 执行动画的view控件
* params2 补间动画类型
* params3 初始值
* params4 最终值
* 参数3和参数4设置为1则代表原大小
*/
ObjectAnimator anim = ObjectAnimator.ofFloat(view, "scaleX",
1.0f, 0.8f);
- 设置动画时间anim .setDuration(2000);
- 启动动画anim .start();
以上3步就实现了一个最简单的补间动画,实现的是在2秒内使控件在X轴压缩到原来的80%,补间动画一共有下面几种用法:
- alpha
ObjectAnimator alpha = ObjectAnimator.ofFloat(text, "alpha", 0f, 1f);
alpha.setDuration(2000);//设置动画时间
alpha.setInterpolator(new DecelerateInterpolator());//设置动画插入器,减速
alpha.setRepeatCount(-1);//设置动画重复次数,这里-1代表无限
alpha.setRepeatMode(Animation.REVERSE);//设置动画循环模式。
alpha.start();//启动动画。
- scale
AnimatorSet animatorSet = new AnimatorSet();//组合动画
ObjectAnimator scaleX = ObjectAnimator.ofFloat(text, "scaleX", 1f, 0f);
ObjectAnimator scaleY = ObjectAnimator.ofFloat(text, "scaleY", 1f, 0f);
animatorSet.setDuration(2000);
animatorSet.setInterpolator(new DecelerateInterpolator());
animatorSet.play(scaleX).with(scaleY);//两个动画同时开始
animatorSet.start();
- translate
ObjectAnimator translationUp = ObjectAnimator.ofFloat(button, "Y",
button.getY(), 0);
translationUp.setInterpolator(new DecelerateInterpolator());
translationUp.setDuration(1500);
translationUp.start();
- rotate
AnimatorSet set = new AnimatorSet() ;
ObjectAnimator anim = ObjectAnimator .ofFloat(phone, "rotationX", 0f, 180f);
anim.setDuration(2000);
ObjectAnimator anim2 = ObjectAnimator .ofFloat(phone, "rotationX", 180f, 0f);
anim2.setDuration(2000);
ObjectAnimator anim3 = ObjectAnimator .ofFloat(phone, "rotationY", 0f, 180f);
anim3.setDuration(2000);
ObjectAnimator anim4 = ObjectAnimator .ofFloat(phone, "rotationY", 180f, 0f);
anim4.setDuration(2000);
set.play(anim).before(anim2); //先执行anim动画之后在执行anim2
set.play(anim3).before(anim4) ;
set.start();
但是在正常使用中一般都会使用比较复杂的,下面就介绍几个相对复杂一些的动画,复杂的动画就牵扯到一个辅助的工具类AnimatorSet,这个工具可以组合多种补间动画,并对动画执行顺序进行设置,使得动画的自定义变得简单快捷。
首先介绍下AnimatorSet的主要方法:
- animSet.play(anim1);//执行动画1
- animSet.play(anim1).with(anim2); //两个动画一起执行
- animSet.play(anim2).after(anim1);//执行完动画1再执行动画2
- animSet.play(anim1).before(anim2); //先执行anim1动画之后在执行anim2
- animSet.playTogether(anim1,anim2,anim3);//同时执行3个动画
- animSet.setInterpolator(new LinearInterpolator());//设置动画变化率,线性变换则表示匀速执行动画
- 给动画设置监听
animSet.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
//动画开始
}
@Override
public void onAnimationEnd(Animator animation) {
//动画结束
}
@Override
public void onAnimationCancel(Animator animation) {
//动画取消
}
@Override
public void onAnimationRepeat(Animator animation) {
//动画重复
}
});
- animSet.start()//开始动画
- animSet.cancel();//取消动画
接下来分享我在实际应用中使用到的简单动画,抛砖引玉!
/**
* 先变小再变大再回到初始大小
*/
public static void playButtonAnimation(View view) {
ObjectAnimator anim1 = ObjectAnimator.ofFloat(view, "scaleX",
1.0f, 0.8f);
ObjectAnimator anim2 = ObjectAnimator.ofFloat(view, "scaleY",
1.0f, 0.8f);
ObjectAnimator anim3 = ObjectAnimator.ofFloat(view, "scaleX",
0.8f, 1.2f);
ObjectAnimator anim4 = ObjectAnimator.ofFloat(view, "scaleY",
0.8f, 1.2f);
ObjectAnimator anim5 = ObjectAnimator.ofFloat(view, "scaleX",
1.2f, 1f);
ObjectAnimator anim6 = ObjectAnimator.ofFloat(view, "scaleY",
1.2f, 1f);
AnimatorSet animSet = new AnimatorSet();
animSet.play(anim1).with(anim2);
animSet.play(anim3).after(anim1);
animSet.play(anim4).after(anim1);
animSet.play(anim5).after(anim4);
animSet.play(anim6).after(anim4);
animSet.setDuration(200);
animSet.start();
}
更加复杂的动画还需要具体看项目中的需求,根据上面的步骤组合动画,相信大部分简单动画都可以通过ObjectAnimator 和AnimatorSet 的组合实现。