View的翻转动画

[转载 https://www.jianshu.com/p/43890a928b76 ]

效果如图：

因为之前的反转内容比较多我简单整理了一下成为一个工具类

import android.animation.Animator;
import android.animation.AnimatorInflater;
import android.animation.AnimatorListenerAdapter;
import android.animation.AnimatorSet;
import android.annotation.SuppressLint;
import android.content.Context;
import android.view.View;
import android.view.ViewGroup;

import com.video.baselibrary.R;


/**
 * View反转的utils
 */
public class ViewReverseUitils {

    private ViewGroup mFlCardFront,mFlCardBack; //初始化2个View 同样大小相同位置
    private boolean isCanReverse=true;//是否可以反转
    private Context context;

    public  ViewReverseUitils(Context context,ViewGroup mFlCardFront,ViewGroup mFlCardBack){
        this.context=context;
        this.mFlCardFront=mFlCardFront;
        this.mFlCardBack=mFlCardBack;
        setAnimators();
        setCameraDistance(context);
    }



    private AnimatorSet mRightOutSet,mLeftInSet;

    // 设置动画
    @SuppressLint("ResourceType")
    private void setAnimators() {


        mRightOutSet = (AnimatorSet) AnimatorInflater.loadAnimator(context, R.anim.anim_out);
        mLeftInSet = (AnimatorSet) AnimatorInflater.loadAnimator(context,R.anim.anim_in);

        // 设置点击事件
        mRightOutSet.addListener(new AnimatorListenerAdapter() {
            @Override public void onAnimationStart(Animator animation) {
                super.onAnimationStart(animation);
                isCanReverse=false;
            }
        });
        mLeftInSet.addListener(new AnimatorListenerAdapter() {
            @Override public void onAnimationEnd(Animator animation) {
                super.onAnimationEnd(animation);
                isCanReverse=true;
            }
        });
    }




    // 改变视角距离, 贴近屏幕
    private void setCameraDistance(Context context) {
        int distance = 16000;
        float scale = context.getResources().getDisplayMetrics().density * distance;
        mFlCardFront.setCameraDistance(scale);
        mFlCardBack.setCameraDistance(scale);
    }

    private boolean mIsShowBack;
    // 翻转卡片
    public void flipCard() {
        if (!isCanReverse){
            return;
        }

        // 正面朝上
        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;
        }
    }


}


activity的xml 如下

<RelativeLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#FF852FFF"
        android:id="@+id/mFlContainer"
        tools:context=".ui.TestActivity"
        android:gravity="center">

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

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

</RelativeLayout>



activity中的使用

private ViewGroup mFlCardFront,mFlCardBack;
private void initView(){
    mFlCardFront=findViewById(R.id.mFlCardFront);
    mFlCardBack=findViewById(R.id.mFlCardBack);
    ViewReverseUitils utils=new ViewReverseUitils(this,mFlCardFront,mFlCardBack);
    findViewById(R.id.mFlContainer).setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            utils.flipCard();
        }
    });
}

对于一般的view 到这里就结束了，但是上图中我的一个子布局里面使用了

RecyclerView，他在使用属性动画去反转时他的item会闪烁，上面动图可以仔细看

找不到问题所在，最后看到https://blog.csdn.net/jiyidehao/article/details/81320379这篇文章
在xml中将view（item的父布局）的layerType设置为hardware即可。具体原因不太清楚，感兴趣可以看看

https://blog.csdn.net/iteye_16284/article/details/82309324这篇文章

最后解决闪烁
如下图

无闪烁
如果我的文章对你有帮助，请给我一个赞，谢谢

猜你喜欢