使用AnimatorSet实现两个视图之间的卡片翻转动画

Question

我正在制作一款汉字卡片应用程序。我想在一个XML布局中声明一个代表卡片正面的LinearLayout和另一个代表卡片背面的LinearLayout。 问题是，第二个LinearLayout始终不可见，而第一个则会正常地动画显示。 是否有任何方法可以在动画进行时进行方法调用？我想将第一个布局的可见性设置为“GONE”，并将第二个布局设置为“VISIBLE”？ 或者有没有其他更好的实现翻转卡片的方法？ 以下是我的代码。提前感谢您的帮助。

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/card_container_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:background="#ff825e4e" >

        <LinearLayout
            android:id="@+id/card_front_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="10dp"
            android:gravity="center"
            android:background="@drawable/card_shape_front">
            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="傘"
                android:textColor="#ff000000"
                android:textSize="200sp"/>
        </LinearLayout>

        <LinearLayout
            android:id="@+id/card_back_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_margin="10dp"
            android:background="@drawable/card_shape_front">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="16dp"
                android:gravity="center"
                android:text="QWERTY"
                android:textColor="#ff000000"/>
        </LinearLayout>
</LinearLayout>

FlashcardsFragment.java

public class FlashcardsFragment extends Fragment
{
    private AnimatorSet showFrontAnim = new AnimatorSet();
    private AnimatorSet showBackAnim = new AnimatorSet();
    private boolean isShowingBack = false;

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        View v =  inflater.inflate(R.layout.fragment_flashcard, container, false);

        LinearLayout cardFront = (LinearLayout) v.findViewById(R.id.card_front_layout);
        LinearLayout cardBack = (LinearLayout) v.findViewById(R.id.card_back_layout);

        // Load the animator sets from XML and group them together

        AnimatorSet leftIn   = (AnimatorSet) AnimatorInflater
                .loadAnimator(getActivity(), R.animator.card_flip_left_in);
        AnimatorSet rightOut = (AnimatorSet) AnimatorInflater
                .loadAnimator(getActivity(), R.animator.card_flip_right_out);
        AnimatorSet leftOut  = (AnimatorSet) AnimatorInflater
                .loadAnimator(getActivity(), R.animator.card_flip_left_out);
        AnimatorSet rightIn  = (AnimatorSet) AnimatorInflater
                .loadAnimator(getActivity(), R.animator.card_flip_right_in);

        leftIn.setTarget(cardFront);
        rightOut.setTarget(cardBack);
        showFrontAnim.playTogether(leftIn, rightOut);

        leftOut.setTarget(cardFront);
        rightIn.setTarget(cardBack);
        showBackAnim.playTogether(leftOut, rightIn);

        LinearLayout cardContainer = (LinearLayout) 
                v.findViewById(R.id.card_container_layout);
        // Set the flip animation to be triggered on container clicking
        cardContainer.setOnClickListener(new View.OnClickListener()
        {
            @Override
            public void onClick(View v)
            {
                if (isShowingBack) {
                    showFrontAnim.start();
                    isShowingBack = false;
                }
                else {
                    showBackAnim.start();
                    isShowingBack = true;
                }
            }
        });

        return v;
    }
}

- tuanna

Answer 1

编辑：我的问题已经解决了，我改变了容器布局为FrameLayout，这样两个视图可以重叠在一起。谢谢大家 :))

- tuanna

Answer 2

在您的AnimatorSet中，您可以添加一个额外的动画来设置alpha为0或1。只需使用startdelay方法将您的1毫秒长的动画设置在总AnimationSet长度的中间即可。

如果您想进一步改进翻转效果，请查看AdapterViewFlipper :)

- Adam Wigren

Answer 3

你可以使用：

cardFront.setVisibility(View.VISIBLE);
cardBack.setVisibility(View.GONE);

这将在代码中的任何位置更改您的布局的可见性。

- tibuurcio

---

谢谢，但我想知道的是如何在视图动画时插入这些调用。 - tuanna

那样做不行，因为动画还没有开始。我想在动画进行到一半的时候改变视图。 - tuanna

@kradragon 我明白了。嗯，我猜这不是最好的解决方案，但既然你知道动画持续时间，你可以设置一个处理程序，在持续时间的一半后，视图更改其可见性。你知道如何使用处理程序吗？如果您想要，我可以在我的答案中放一些代码片段。 编辑：我猜Adam的解决方案会起作用。看看它。 - tibuurcio

谢谢 :) 我会尝试 - tuanna