android 屬性動畫-----實現卡牌翻轉效果

需求:項目中有一個簽到功能,點擊簽到時簽到的卡牌實現 180 度翻轉顯示已經簽到的背面。

1、在 res 包下新建 animator 包,新建兩個文件,進入動畫 anim_in 和 退出動畫 anim_out

anim_in :

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

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

anim_out :

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

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

</set>

兩個佈局,一個是正面,一個是背面(背面的字需要用鏡像,這樣翻轉過來纔是正常的文字)

將兩個佈局在主界面 include 進去即可

動畫部分:

private AnimatorSet mRightOutSet;
private AnimatorSet mLeftInSet;

// 設置動畫
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);
                click_sign_fl.setClickable(false);
            }
        });

//設置佈局的點擊事件
        click_sign_fl.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                flipCard(click_sign_fl);
            }
        });

    }

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

    // 翻轉卡片
    public void flipCard(View view) {
        mRightOutSet.setTarget(mFlCardFront);
        mLeftInSet.setTarget(mFlCardBack);
        mRightOutSet.start();
        mLeftInSet.start();
    }

調用:

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

參考了這篇博客:https://www.cnblogs.com/zhangmiao14/p/10285862.html

根據自己的需求進行了修改

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章