android 属性动画实例,Android全过程实例分析属性动画

最近在研究属性动画，通过一个不太复杂的实例，一步一步分析实例中动画的是如何实现的，然后开始撸代码，先来看效果：

属性动画.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();

}

看懂动画的执行过程是最重要的，不然不好下手写代码。