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

时间:2014-10-04 10:39:00

标签: android animation

我正在制作一个汉字卡片应用程序。我希望有一个LinearLayout代表前面,另一个代表卡的背面,我都在一个XML布局中声明。 问题是,第二个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;
    }
}

3 个答案:

答案 0 :(得分:3)

编辑:我的问题已经解决,我将容器布局更改为FrameLayout,这样两个视图可以相互重叠。谢谢大家:))

答案 1 :(得分:1)

在AnimatorSet中,您可以添加额外的动画,将alpha设置为0或1.仅使用startdelay方法在动画集总长度的中间设置1 ms长的动画。

如果您想进一步了解AdapterViewFlipper:)

答案 2 :(得分:0)

您可以使用:

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

这将在您想要的任何地方更改代码内部布局的可见性。