正反面，立体，3D翻转动画自定义view

 

 

/**
 * 立体翻转的view
 * 写布局时，在frame layout内部写两个子view，第一个是反面，第二个是正面，必须是两个
 */
public class ThreeDRotateView extends FrameLayout {
    private View frontView;
    private View backgroundView;
    public ThreeDRotateView(@NonNull Context context) {
        super(context);
    }

    public ThreeDRotateView(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public ThreeDRotateView(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onFinishInflate() {
        super.onFinishInflate();
        init();
    }

    private void init(){
        int childCount = getChildCount();
        if (childCount != 2){
            throw new RuntimeException("Child view Error!");
        }
        this.frontView = getChildAt(1);
        this.backgroundView = getChildAt(0);
        frontView.setVisibility(View.VISIBLE);
        backgroundView.setVisibility(View.INVISIBLE);
    }
    public void startRotate(){
        start3DRotateAnimator(this,frontView,backgroundView);
    }
    private void start3DRotateAnimator(final View rootView, final View view1, final View view2) {
        final float from = view1.getVisibility() == View.INVISIBLE ? 0 : 180;
        final float to = from == 0 ? 180 : 0;

        ValueAnimator rotateAnimator = ValueAnimator.ofFloat(from, to);
        rotateAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float value = (float) valueAnimator.getAnimatedValue();
                if (value <= 90) {
                    if (view1.getVisibility() != View.INVISIBLE) {
                        view1.setVisibility(View.INVISIBLE);
                        view2.setVisibility(View.VISIBLE);
                    }
                    rootView.setRotationY(value);
                } else {
                    if (view1.getVisibility() != View.VISIBLE) {
                        view1.setVisibility(View.VISIBLE);
                        view2.setVisibility(View.INVISIBLE);
                    }
                    rootView.setRotationY(value - 180);
                }
            }
        });

        ValueAnimator tzAnimator = ValueAnimator.ofFloat(1, 0.6f, 1);
        tzAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
            @Override
            public void onAnimationUpdate(ValueAnimator valueAnimator) {
                float value = (float) valueAnimator.getAnimatedValue();
                rootView.setScaleX(value);
                rootView.setScaleY(value);
            }
        });

        AnimatorSet set = new AnimatorSet();
        set.setDuration(600);
        set.playTogether(rotateAnimator, tzAnimator);
        set.addListener(new Animator.AnimatorListener() {

            @Override
            public void onAnimationStart(Animator animation) {
                //打开硬件加速
                rootView.setLayerType(View.LAYER_TYPE_HARDWARE, null);

            }

            @Override
            public void onAnimationEnd(Animator animation) {
                // 关闭硬件加速
                rootView.setLayerType(View.LAYER_TYPE_NONE, null);

            }

            @Override
            public void onAnimationCancel(Animator animator) {

            }

            @Override
            public void onAnimationRepeat(Animator animator) {

            }
        });
        set.start();
    }

}

xml布局使用

<ThreeDRotateView
        android:id="@+id/threeDRotateView"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:layout_margin="10dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_green_dark"
            android:text="反面"
            android:textSize="28sp"
            android:gravity="center"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@android:color/holo_orange_dark"
            android:text="正面"
            android:textSize="28sp"
            android:gravity="center"/>
    </ThreeDRotateView>

activity中使用

threeDRotateView.setOnClickListener {
            //翻转一次
            threeDRotateView.startRotate()
        }