Android 卡片翻转动画

ui显示在卡片背面视觉效果

先上布局activity_animate

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="160dp"
    android:id="@+id/root"
    android:layout_centerInParent="true"
    android:layout_marginStart="35dp"
    android:layout_marginTop="60dp"
    android:layout_marginEnd="35dp"
    android:background="@color/home_text_orange">

    <include
        android:id="@+id/positive"
        layout="@layout/animate_positive" />

    <include
        android:id="@+id/negative"
        layout="@layout/animate_negative" />
</RelativeLayout>

animate_positive

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="30dp"
        android:layout_marginTop="10dp"
        android:text="正面"
        android:textColor="@android:color/black"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="30dp"
        android:layout_marginTop="50dp"
        android:text="正面"
        android:textColor="@android:color/black"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="30dp"
        android:layout_marginTop="90dp"
        android:text="正面"
        android:textColor="@android:color/black"
        android:textSize="20sp" />
</RelativeLayout>

animate_negative

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="30dp"
        android:text="背面"
        android:textColor="@android:color/black"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="10dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="30dp"
        android:text="背面"
        android:textColor="@android:color/black"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="10dp"
        android:layout_marginTop="90dp"
        android:layout_marginEnd="30dp"
        android:text="背面"
        android:textColor="@android:color/black"
        android:textSize="20sp" />
</RelativeLayout>

ui.png

AnimateActivity

class AnimateActivity : BaseSimpleActivity() {
    private val handler = Handler(Looper.getMainLooper())
    private var bool = true
    private var animating = false

    override fun getLayoutId() = R.layout.activity_animate

    override fun initData(savedInstanceState: Bundle?) {
        //卡片
        val animate = root.animate()
        //正面
        val pAnimate = positive.animate()
        //背面
        val nAnimate = negative.animate()
        positive.alpha = 1.0F
        negative.alpha = 0.0F
        root.setOnClickListener {
            if (animating) {
                return@setOnClickListener
            }

            if (bool) {
                animate.setDuration(1500)
                    .rotationXBy(180F)
                    .start()

                pAnimate.setDuration(750)
                    .alpha(0.0F)
                    .start()

                nAnimate.setDuration(750)
                    .alpha(1.0F)
                    .setStartDelay(750)
                    .start()

                handler.postDelayed({
                    bool = false
                }, 1500)
            } else {
                animate.setDuration(1500)
                    .rotationXBy(-180F)
                    .start()

                nAnimate.setDuration(750)
                    .alpha(0.0F)
                    .start()

                pAnimate.setDuration(750)
                    .alpha(1.0F)
                    .setStartDelay(750)
                    .start()

                handler.postDelayed({
                    bool = true
                }, 1500)
            }
        }

        //动画监听，防止动画期间点击
        animate.setListener(object : Animator.AnimatorListener {

            override fun onAnimationStart(animation: Animator?) {
                animating = true
            }

            override fun onAnimationEnd(animation: Animator?) {
                animating = false
            }

            override fun onAnimationCancel(animation: Animator?) {
            }

            override fun onAnimationRepeat(animation: Animator?) {
            }
        })
    }
}

运行下

positive.png

点击卡片翻转

negative.png

卡片翻转后，文字也跟着翻转了=。=

这里可以先将背面rotationX180

修改animate_negative

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:rotationX="180">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="30dp"
        android:text="背面"
        android:textColor="@android:color/black"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="10dp"
        android:layout_marginTop="50dp"
        android:layout_marginEnd="30dp"
        android:text="背面"
        android:textColor="@android:color/black"
        android:textSize="20sp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_marginStart="10dp"
        android:layout_marginTop="90dp"
        android:layout_marginEnd="30dp"
        android:text="背面"
        android:textColor="@android:color/black"
        android:textSize="20sp" />
</RelativeLayout>

根布局添加android:rotationX="180"，点击卡片执行翻转动画。

negative.png

这样看起来文字显示在卡片背面了