Android 實現卡片翻轉的動畫（翻牌動畫）

需求描述

　　點擊卡片，卡片翻轉過來顯示內容。

　　點擊左邊的卡片，將卡片翻轉顯示右邊的圖片結果。

功能實現

　　因為要翻轉所以使用動畫來完成翻轉的動畫。動畫分為兩部分，一部分是左邊的布局以中心垂直線從左向右旋轉，旋轉 180 度之后隱藏，另一部分是右邊的布局以中心垂直線從右向左旋轉，旋轉 180 度之后顯示。
　　這種動畫涉及到播放順序的問題，所以動畫使用 Animator 屬性動畫實現。
布局

    <FrameLayout
        android:id="@+id/activity_main_result_layout_fl"
        android:layout_width="@dimen/activity_main_result_width"
        android:layout_height="@dimen/activity_main_result_height"
        android:layout_gravity="center"
        android:layout_marginTop="@dimen/activity_main_result_margin_top">

        <ImageView
            android:id="@+id/activity_main_result_iv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:src="@mipmap/result" />

        <TextView
            android:id="@+id/activity_main_result_tv"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:textColor="@android:color/white"
            android:textSize="@dimen/activity_main_text_size"
            android:visibility="gone" />

    </FrameLayout>

動畫文件

• rotate_in_anim .xml

  <?xml version="1.0" encoding="utf-8"?>
  <set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--消失-->
    <objectAnimator
        android:duration="0"
        android:propertyName="alpha"
        android:valueFrom="1.0"
        android:valueTo="0.0" />
  
    <!--旋轉-->
    <objectAnimator
        android:duration="1000"
        android:propertyName="rotationY"
        android:valueFrom="-180"
        android:valueTo="0" />
  
    <!--出現-->
    <objectAnimator
        android:duration="0"
        android:propertyName="alpha"
        android:startOffset="500"
        android:valueFrom="0.0"
        android:valueTo="1.0" />
  </set>
  

• rotate_out_anim.xml

  <?xml version="1.0" encoding="utf-8"?>
  <set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--旋轉-->
    <objectAnimator
        android:duration="1000"
        android:propertyName="rotationY"
        android:valueFrom="0"
        android:valueTo="180" />
  
    <!--消失-->
    <objectAnimator
        android:duration="0"
        android:propertyName="alpha"
        android:startOffset="500"
        android:valueFrom="1.0"
        android:valueTo="0.0" />
  </set>
  

播放動畫

    tv_result.setVisibility(View.VISIBLE);
    tv_sure.setVisibility(View.VISIBLE);
    AnimatorSet inAnimator = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.rotate_in_anim);
    AnimatorSet outAnimator = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.rotate_out_anim);
    int distance = 16000;
    float scale = getResources().getDisplayMetrics().density * distance;
    iv_result.setCameraDistance(scale); //設置鏡頭距離
    tv_result.setCameraDistance(scale); //設置鏡頭距離
    outAnimator.setTarget(iv_result);
    inAnimator.setTarget(tv_result);
    outAnimator.start();
    inAnimator.start();
    outAnimator.addListener(new AnimatorListenerAdapter() {
        @Override
        public void onAnimationEnd(Animator animation) {
            super.onAnimationEnd(animation);
            iv_result.setVisibility(View.GONE);
            iv_result.setAlpha(1.0f);
            iv_result.setRotationY(0.0f);
        }
    });

　　注意：動畫的實現方式是使用了屬性動畫 Animator 實現的，如果動畫需要再次顯示，那么在動畫結束之后就需要將控件的屬性值設置為初始值，因為屬性動畫會修改控件的屬性值為動畫結束時的屬性值。

參考文章

http://lishuaishuai.iteye.com/blog/2297056