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

源码下载地址：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);
     
    
  
 

最终的执行效果：

文章来源: blog.csdn.net，作者：冉航--小虾米，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/gaoxiaoweiandy/article/details/88851192