属性动画.gif
上面的效果实现完全用的都是属性动画,小编偷懒不做滑动监听了,直接用按钮代替了。大概效果就是:点击红色按钮第一个界面做动画至后面,第二个界面从下面滑出来。点击X号,恢复。标记第一个界面为first_View,从下面弹出来的为second_View.
一、开始执行动画
first_View:
1.向后翻转动画;2.透明度动画;3.缩放动画;4.向前翻转动画 5.平移动画(有一个向上移动的过程) 这五个动画一个都不能少,如果没看出来请仔细分析。
second_View:
1.平移动画(向上)
下面开始撸代码:
public void startFirstAnimation(View v){
//1.向后翻转
ObjectAnimator firstRotationAnim = ObjectAnimator.ofFloat(first_View, "rotationX", 0f,25f);
firstRotationAnim.setDuration(300);
//2.透明度
ObjectAnimator firstAlphaAnim = ObjectAnimator.ofFloat(first_View, "alpha", 1f,0.5f);
firstAlphaAnim.setDuration(200);
//3.缩放动画
ObjectAnimator firstScaleXAnim = ObjectAnimator.ofFloat(first_View, "scaleX", 1f,0.8f);
firstScaleXAnim.setDuration(300);
ObjectAnimator firstScaleYAnim = ObjectAnimator.ofFloat(first_View, "scaleY", 1f,0.8f);
firstScaleYAnim.setDuration(300);
//改正向旋转设置监听,执行完毕后再执行反向旋转
// firstRotationAnim.addUpdateListener(listener)
//4.向前翻转动画
ObjectAnimator firstResumeRotationAnim = ObjectAnimator.ofFloat(first_View, "rotationX",25f, 0f);
firstResumeRotationAnim.setDuration(200);
firstResumeRotationAnim.setStartDelay(200);//延迟执行
// 5.平移动画,由于缩放造成了离顶部有一段距离,需要平移上去
ObjectAnimator firstTranslationAnim = ObjectAnimator.ofFloat(first_View, "translationY",0f, -0.1f*first_View.getHeight());
firstTranslationAnim.setDuration(200);
//second_View执行平移动画--向上平移
ObjectAnimator secondeTranslationAnim = ObjectAnimator.ofFloat(second_View, "translationY",second_View.getHeight(), 0f);
secondeTranslationAnim.setDuration(200);
secondeTranslationAnim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
second_View.setVisibility(View.VISIBLE);
bt.setClickable(false);
}
});
AnimatorSet set = new AnimatorSet();
set.playTogether(firstRotationAnim,firstAlphaAnim,firstScaleXAnim,firstScaleYAnim,firstResumeRotationAnim,firstTranslationAnim,secondeTranslationAnim);
set.start();
}
虽然这五个动画都是一起执行的,但是第四个动画做了延时操作firstResumeRotationAnim.setStartDelay(200);
二、开始反向执行动画(恢复)
first_View:
1.向后翻转动画;2.透明度动画;3.缩放动画;4.向前翻转动画 5.平移动画(有一个向上移动的过程) 这五个动画一个都不能少,如果没看出来请仔细分析。
second_View:
1.平移动画(向下)
跟上面对面好像没什么变化,但是代码里需要注意,2.透明度动画;3.缩放动画的值肯定是反过来的,但是1.向后翻转动画;4.向前翻转动画是不需要反过来的(这个不太好理解),下面是反向的代码:
public void startSecondAnimation(View v){
//1.翻转
ObjectAnimator firstRotationAnim = ObjectAnimator.ofFloat(first_View, "rotationX", 0f,25f);
firstRotationAnim.setDuration(300);
// firstRotationAnim.start();
//2.透明度
ObjectAnimator firstAlphaAnim = ObjectAnimator.ofFloat(first_View, "alpha",0.5f, 1f);
firstAlphaAnim.setDuration(200);
//3.缩放动画
ObjectAnimator firstScaleXAnim = ObjectAnimator.ofFloat(first_View, "scaleX",0.8f, 1f);
firstScaleXAnim.setDuration(300);
ObjectAnimator firstScaleYAnim = ObjectAnimator.ofFloat(first_View, "scaleY",0.8f, 1f);
firstScaleYAnim.setDuration(300);
//4.向前翻转 改正向旋转设置监听,执行完毕后再执行反向旋转
// firstRotationAnim.addUpdateListener(listener)
ObjectAnimator firstResumeRotationAnim = ObjectAnimator.ofFloat(first_View, "rotationX",25f, 0f);
firstResumeRotationAnim.setDuration(200);
firstResumeRotationAnim.setStartDelay(200);//延迟执行
//5.平移动画,由于缩放造成了离顶部有一段距离,需要平移上去
ObjectAnimator firstTranslationAnim = ObjectAnimator.ofFloat(first_View, "translationY", -0.1f*first_View.getHeight(),0f);
firstTranslationAnim.setDuration(200);
//second_View执行平移动画-—向下平移
ObjectAnimator secondeTranslationAnim = ObjectAnimator.ofFloat(second_View, "translationY", 0f,second_View.getHeight());
secondeTranslationAnim.setDuration(300);
secondeTranslationAnim.addListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationStart(Animator animation) {
super.onAnimationStart(animation);
second_View.setVisibility(View.VISIBLE);
}
@Override
public void onAnimationEnd(Animator animation) {
super.onAnimationEnd(animation);
bt.setClickable(true);
}
});
AnimatorSet set = new AnimatorSet();
set.playTogether(firstRotationAnim,firstAlphaAnim,firstScaleXAnim,firstScaleYAnim,firstResumeRotationAnim,firstTranslationAnim,secondeTranslationAnim);
set.start();
}
看懂动画的执行过程是最重要的,不然不好下手写代码。