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();
    }

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

你可能感兴趣的:(Android全过程实例分析属性动画)