在Android设计中, 经常会使用卡片元素, 正面显示图片或主要信息, 背面显示详细内容, 如网易有道词典的单词翻转和海底捞的食谱展示. 实现卡片视图非常容易, 那么如何实现翻转动画呢?

在TB吃海底捞时, 使用Pad点餐, 发现应用的食谱功能使用卡片控件, 就准备和大家分享一下实现方式. 有兴趣的朋友可以去海底捞看看:)

本文源码的GitHub下载地址

https://github.com/SpikeKing/wcl-flip-anim-demo

欢迎Follow我的GitHub: https://github.com/SpikeKing

首页

首页由正面和背面两张卡片组成, 同时, 设置点击事件flipCard.

1. <?xml version="1.0" encoding="utf-8"?> 
2.  
3. <FrameLayout 
4.  
5.     android:id="@+id/main_fl_container" 
6.  
7.     xmlns:android="http://schemas.android.com/apk/res/android" 
8.  
9.     xmlns:tools="http://schemas.android.com/tools" 
10.  
11.     android:layout_width="match_parent" 
12.  
13.     android:layout_height="match_parent" 
14.  
15.     android:onClick="flipCard" 
16.  
17.     android:paddingBottom="@dimen/activity_vertical_margin" 
18.  
19.     android:paddingLeft="@dimen/activity_horizontal_margin" 
20.  
21.     android:paddingRight="@dimen/activity_horizontal_margin" 
22.  
23.     android:paddingTop="@dimen/activity_vertical_margin" 
24.  
25.     tools:context="me.chunyu.spike.wcl_flip_anim_demo.MainActivity"> 
26.  
27.   
28.  
29.     <include 
30.  
31.         layout="@layout/cell_card_back"/> 
32.  
33.   
34.  
35.     <include 
36.  
37.         layout="@layout/cell_card_front"/> 
38.  
39.   
40.  </FrameLayout>  

逻辑, 初始化动画和镜头距离.

1. @Override 
2.  
3. protected void onCreate(Bundle savedInstanceState) { 
4.  
5.     super.onCreate(savedInstanceState); 
6.  
7.     setContentView(R.layout.activity_main); 
8.  
9.     ButterKnife.bind(this); 
10.  
11.   
12.  
13.     setAnimators(); // 设置动画 
14.  
15.     setCameraDistance(); // 设置镜头距离 
16.  
17. }  

动画

初始化右出(RightOut)和左入(LeftIn)动画, 使用动画集合AnimatorSet.

当右出动画开始时, 点击事件无效, 当左入动画结束时, 点击事件恢复.

1. // 设置动画 
2.  
3. private void setAnimators() { 
4.  
5.     mRightOutSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.anim_out); 
6.  
7.     mLeftInSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.anim_in); 
8.  
9.   
10.  
11.     // 设置点击事件 
12.  
13.     mRightOutSet.addListener(new AnimatorListenerAdapter() { 
14.  
15.         @Override public void onAnimationStart(Animator animation) { 
16.  
17.             super.onAnimationStart(animation); 
18.  
19.             mFlContainer.setClickable(false); 
20.  
21.         } 
22.  
23.     }); 
24.  
25.     mLeftInSet.addListener(new AnimatorListenerAdapter() { 
26.  
27.         @Override public void onAnimationEnd(Animator animation) { 
28.  
29.             super.onAnimationEnd(animation); 
30.  
31.             mFlContainer.setClickable(true); 
32.  
33.         } 
34.  
35.     }); 
36.  
37. }  

右出动画

1. <?xml version="1.0" encoding="utf-8"?> 
2.  
3. <set xmlns:android="http://schemas.android.com/apk/res/android"> 
4.  
5.     <!--旋转--> 
6.  
7.     <objectAnimator 
8.  
9.         android:duration="@integer/anim_length" 
10.  
11.         android:propertyName="rotationY" 
12.  
13.         android:valueFrom="0" 
14.  
15.         android:valueTo="180"/> 
16.  
17.   
18.  
19.     <!--消失--> 
20.  
21.     <objectAnimator 
22.  
23.         android:duration="0" 
24.  
25.         android:propertyName="alpha" 
26.  
27.         android:startOffset="@integer/anim_half_length" 
28.  
29.         android:valueFrom="1.0" 
30.  
31.         android:valueTo="0.0"/> 
32.  
33. </set>  

旋转180°, 当旋转一半时, 卡片消失.

左入动画

1. <?xml version="1.0" encoding="utf-8"?> 
2.  
3. <set xmlns:android="http://schemas.android.com/apk/res/android"> 
4.  
5.   
6.  
7.     <!--消失--> 
8.  
9.     <objectAnimator 
10.  
11.         android:duration="0" 
12.  
13.         android:propertyName="alpha" 
14.  
15.         android:valueFrom="1.0" 
16.  
17.         android:valueTo="0.0"/> 
18.  
19.   
20.  
21.     <!--旋转--> 
22.  
23.     <objectAnimator 
24.  
25.         android:duration="@integer/anim_length" 
26.  
27.         android:propertyName="rotationY" 
28.  
29.         android:valueFrom="-180" 
30.  
31.         android:valueTo="0"/> 
32.  
33.   
34.  
35.     <!--出现--> 
36.  
37.     <objectAnimator 
38.  
39.         android:duration="0" 
40.  
41.         android:propertyName="alpha" 
42.  
43.         android:startOffset="@integer/anim_half_length" 
44.  
45.         android:valueFrom="0.0" 
46.  
47.         android:valueTo="1.0"/> 
48.  
49. </set>  

在开始时是隐藏, 逆向旋转, 当旋转一半时, 显示卡片.

镜头视角

改变视角, 涉及到旋转卡片的Y轴, 即rotationY, 需要修改视角距离.

如果不修改, 则会超出屏幕高度, 影响视觉体验.

1. // 改变视角距离, 贴近屏幕 
2.  
3. private void setCameraDistance() { 
4.  
5.     int distance = 16000; 
6.  
7.     float scale = getResources().getDisplayMetrics().density * distance; 
8.  
9.     mFlCardFront.setCameraDistance(scale); 
10.  
11.     mFlCardBack.setCameraDistance(scale); 
12.  
13. }  

旋转控制

设置右出和左入动画的目标控件, 两个动画同步进行, 并区分正反面朝上.

1. // 翻转卡片 
2.  
3. public void flipCard(View view) { 
4.  
5.     // 正面朝上 
6.  
7.     if (!mIsShowBack) { 
8.  
9.         mRightOutSet.setTarget(mFlCardFront); 
10.  
11.         mLeftInSet.setTarget(mFlCardBack); 
12.  
13.         mRightOutSet.start(); 
14.  
15.         mLeftInSet.start(); 
16.  
17.         mIsShowBack = true; 
18.  
19.     } else { // 背面朝上 
20.  
21.         mRightOutSet.setTarget(mFlCardBack); 
22.  
23.         mLeftInSet.setTarget(mFlCardFront); 
24.  
25.         mRightOutSet.start(); 
26.  
27.         mLeftInSet.start(); 
28.  
29.         mIsShowBack = false; 
30.  
31.     } 
32.  
33. }  

动画效果

动画效果非常简单, 全部逻辑都不足50行, 这么好玩的动画, 用起来吧.

OK, that’s all! Enjoy it!