Android开发笔记（二十五）属性动画实战案例之流浪大师与乔帮主

在上一篇文章里我们介绍了属性动画的基础知识，今天我们综合运用属性动画的知识来完成一个动画案例。首先，看一下这个动画效果：

源码下载地址：https://download.csdn.net/download/gaoxiaoweiandy/11085552

1.  分析这个动画案例

第一个动画（浏览大师的动画）是：当点击顶部“大师”按钮时触发的，浏览大师的整个布局（包括按钮+图片）与“”乔帮主“”会执行以下动画：

1. 缩小

2. 翻转

3. 透明度

4. 然后再翻转回来

5. 顶部向上平移（由于执行1缩小动画时，“流浪大师”的布局被缩小了，导致顶部向下偏移了）

然后当执行5的同时，“乔帮主”的图片从屏幕底部向上平移出来

6. “乔帮主”出现：从底部平移进入屏幕

第二个动画：是当上面6执行之后，然后点击“”乔帮主“”，一切恢复如初：大师放大的同时也会翻转，透明度等也恢复如初。

2. 实现上述动画

现在我们依次来解决上面的步骤。

布局文件：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:id="@+id/liulangdashi"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@mipmap/dashi"
        android:orientation="vertical">

        <Button
            android:id="@+id/bt"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#0000ff"
            android:onClick="startFirstAnimation"
            android:text="大师" />
    </LinearLayout>

    <ImageView
        android:id="@+id/gaibangbangzhu"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:clickable="true"
        android:onClick="startSecondAnimation"
        android:scaleType="fitEnd"
        android:src="@mipmap/qiaofeng"
        android:visibility="visible" />

</RelativeLayout>

这个布局包括两部分：流浪大师（LinearLayout）与乔帮主（ImageView），我们为LinearLayout设置背景图片为“大师的图片“，为ImageView设置“乔帮主”的图片。这两部分视图将来要执行我们前面分析的动画。我们先来看一下第一个动画：“流浪大师的动画”，点击LinearLayout中的Button执行startFirstAnimation（）来依次执行以下动画：

1. 缩小

  
        ObjectAnimator firstScaleXAnim = ObjectAnimator.ofFloat(liulangdashi, "scaleX", 1f,0.8f);
        firstScaleXAnim.setDuration(300);
        ObjectAnimator firstScaleYAnim = ObjectAnimator.ofFloat(liulangdashi, "scaleY", 1f,0.8f);
        firstScaleYAnim.setDuration(300);

大小缩放到原来的80%，我们在此先配置好动画，到时候用AnimatorSet同后面的几个动画一起执行。

2. 翻转

        ObjectAnimator firstRotationAnim = ObjectAnimator.ofFloat(liulangdashi, "rotationX", 0f,25f);
        firstRotationAnim.setDuration(300);

让整个LinearLayout绕X轴旋转25度。效果也就是图片往屏幕里面伸入旋转。

3. 透明度

    ObjectAnimator firstAlphaAnim = ObjectAnimator.ofFloat(liulangdashi, "alpha", 1f,0.5f);
        firstAlphaAnim.setDuration(200);

到这一步，我们先看一下当前的效果

AnimatorSet set = new AnimatorSet();
set.playTogether(firstRotationAnim,firstAlphaAnim,firstScaleXAnim,firstScaleYAnim);
set.start();

用AnimatorSet同时执行1,2,3（缩小、绕X旋转、透明度）中的动画，效果如下：

4. 然后再翻转回来

从屏幕里面翻转回来，摆正图片。这个动画相比123动画要延迟一会儿执行，这样才可以看出往回翻转的效果

  ObjectAnimator firstResumeRotationAnim = ObjectAnimator.ofFloat(liulangdashi, "rotationX",25f, 0f);
        firstResumeRotationAnim.setDuration(200);
        firstResumeRotationAnim.setStartDelay(200);//延迟执行

AnimatorSet set = new AnimatorSet();
set.playTogether(firstRotationAnim,firstAlphaAnim,firstScaleXAnim,firstScaleYAnim,
firstResumeRotationAnim);
set.start();

再次一起执行动画，1234四个动画，其中.第4个动画延迟200毫秒执行。运行效果图如下：

我们看到上图已经翻转回来了，但是我们发现顶部距离并没有恢复上去，因此应该执行平移动画

5. 平移（顶部向上）

ObjectAnimator firstTranslationAnim = ObjectAnimator.ofFloat(liulangdashi,"translationY",
0f, 
-0.1f*liulangdashi.getHeight());
firstTranslationAnim.setDuration(200);

        AnimatorSet set = new AnimatorSet();
        set.playTogether(firstRotationAnim,firstAlphaAnim,firstScaleXAnim,firstScaleYAnim,firstResumeRotationAnim,firstTranslationAnim);
        set.start();

由于缩放到原来的80%，因此上下边缘各缩放了10%，所以在这里上边缘向上平移10%.可以将整个liulangdashi的布局顶部恢复回去。

6. 乔帮主出现

再加上从底部向上滑出“乔帮主gaibangbanzhu”这张图片。然后和1-5的动画一起执行。

     ObjectAnimator secondeTranslationAnim = ObjectAnimator.ofFloat(gaibangbangzhu, "translationY",gaibangbangzhu.getHeight(), 0f);
        secondeTranslationAnim.setDuration(200);

AnimatorSet set = new AnimatorSet();
set.playTogether(firstRotationAnim,firstAlphaAnim,firstScaleXAnim,firstScaleYAnim,firstResumeRotationAnim,firstTranslationAnim,secondeTranslationAnim);
set.start();

执行效果如下：

第二个动画，点击乔帮主，让乔帮主向下滑出屏幕，滑动的距离是整个图片的高度。然后“流浪大师”的执行动画跟之前差不多，这里贴出代码：

        //1.翻转
        ObjectAnimator firstRotationAnim = ObjectAnimator.ofFloat(liulangdashi, "rotationX", 0f,25f);
        firstRotationAnim.setDuration(300);
//		firstRotationAnim.start();
        //2.透明度
        ObjectAnimator firstAlphaAnim = ObjectAnimator.ofFloat(liulangdashi, "alpha",0.5f, 1f);
        firstAlphaAnim.setDuration(200);
        //3.缩放动画
        ObjectAnimator firstScaleXAnim = ObjectAnimator.ofFloat(liulangdashi, "scaleX",0.8f, 1f);
        firstScaleXAnim.setDuration(300);
        ObjectAnimator firstScaleYAnim = ObjectAnimator.ofFloat(liulangdashi, "scaleY",0.8f, 1f);
        firstScaleYAnim.setDuration(300);
        //改正向旋转设置监听，执行完毕后再执行反向旋转
//		firstRotationAnim.addUpdateListener(listener)
        ObjectAnimator firstResumeRotationAnim = ObjectAnimator.ofFloat(liulangdashi, "rotationX",25f, 0f);
        firstResumeRotationAnim.setDuration(200);
        firstResumeRotationAnim.setStartDelay(200);//延迟执行
        //由于缩放造成了离顶部有一段距离，需要平移上去
        ObjectAnimator firstTranslationAnim = ObjectAnimator.ofFloat(liulangdashi, "translationY", -0.1f*liulangdashi.getHeight(),0f);
        firstTranslationAnim.setDuration(200);
        //让乔帮主向下滑出屏幕
        ObjectAnimator secondeTranslationAnim = ObjectAnimator.ofFloat(gaibangbangzhu, "translationY", 0f,gaibangbangzhu.getHeight());
        secondeTranslationAnim.setDuration(300);

最终的执行效果：