Android實現卡片翻轉的動畫效果

在Android設計中, 經常會使用 卡片元素 , 正面顯示圖片或主要信息, 背面顯示詳細內容, 如 網易有道詞典的單詞翻轉 和 海底撈的食譜展示 . 實現卡片視圖非常容易, 那么如何實現翻轉動畫呢?

本文源碼的GitHub 下載地址

1. 首頁

首頁由正面和背面兩張卡片組成, 同時, 設置點擊事件 flipCard .

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout  android:id="@+id/main_fl_container" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:onClick="flipCard" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context="me.chunyu.spike.wcl_flip_anim_demo.MainActivity">

    <include  layout="@layout/cell_card_back"/>

    <include  layout="@layout/cell_card_front"/>

</FrameLayout>

邏輯, 初始化動畫和鏡頭距離.

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        setAnimators(); // 設置動畫
        setCameraDistance(); // 設置鏡頭距離
    }

2. 動畫

    // 設置動畫
    private void setAnimators() {
        mRightOutSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.anim_out);
        mLeftInSet = (AnimatorSet) AnimatorInflater.loadAnimator(this, R.animator.anim_in);

        // 設置點擊事件
        mRightOutSet.addListener(new AnimatorListenerAdapter() {
            @Override public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
                mFlContainer.setClickable(false);
            }
        });
        mLeftInSet.addListener(new AnimatorListenerAdapter() {
            @Override public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                mFlContainer.setClickable(true);
            }
        });
    }

右出動畫

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!--旋轉-->
    <objectAnimator  android:duration="@integer/anim_length" android:propertyName="rotationY" android:valueFrom="0" android:valueTo="180"/>

    <!--消失-->
    <objectAnimator  android:duration="0" android:propertyName="alpha" android:startOffset="@integer/anim_half_length" android:valueFrom="1.0" android:valueTo="0.0"/>
</set>

左入動畫

<?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="@integer/anim_length" android:propertyName="rotationY" android:valueFrom="-180" android:valueTo="0"/>

    <!--出現-->
    <objectAnimator  android:duration="0" android:propertyName="alpha" android:startOffset="@integer/anim_half_length" android:valueFrom="0.0" android:valueTo="1.0"/>
</set>

3. 鏡頭視角

改變視角, 涉及到旋轉卡片的Y軸, 即rotationY, 需要修改視角距離.如果不修改, 則會超出屏幕高度, 影響視覺體驗.

    // 改變視角距離, 貼近屏幕
    private void setCameraDistance() {
        int distance = 16000;
        float scale = getResources().getDisplayMetrics().density * distance;
        mFlCardFront.setCameraDistance(scale);
        mFlCardBack.setCameraDistance(scale);
    }

4. 旋轉控制

設置右出和左入動畫的目標控件, 兩個動畫同步進行, 并區分正反面朝上.

    // 翻轉卡片
    public void flipCard(View view) {
        // 正面朝上
        if (!mIsShowBack) {
            mRightOutSet.setTarget(mFlCardFront);
            mLeftInSet.setTarget(mFlCardBack);
            mRightOutSet.start();
            mLeftInSet.start();
            mIsShowBack = true;
        } else { // 背面朝上
            mRightOutSet.setTarget(mFlCardBack);
            mLeftInSet.setTarget(mFlCardFront);
            mRightOutSet.start();
            mLeftInSet.start();
            mIsShowBack = false;
        }
    }

動畫效果

動畫效果非常簡單, 全部邏輯都不足50行, 這么好玩的動畫, 用起來吧.

OK, that’s all! Enjoy it!