Question

首先，请不要将其声明为重复，因为自从过去五天以来我一直在堆栈溢出上花费时间，我已经阅读了很多答案，但仍然无法实现这个。

我想在我的应用程序中使用卡片翻转动画。我也试过https://developer.android.com/training/animation/cardflip.html但是我没有在那里播放退出动画。

所以我在线性布局中对两个片段使用了两个帧布局，然后尝试旋转并将第一帧布局向左移出屏幕，同时从右侧旋转和翻译下一帧布局。第一帧根据需要旋转但是平移不在这里。

请帮助使用旋转进行帧布局转换，以便下一个片段可以进入屏幕。

我的代码是：

activity_card.xml：

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

<android.support.v7.widget.Toolbar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:id="@+id/toolbar"
    android:background="@color/colorPrimary"
    >
</android.support.v7.widget.Toolbar>


<LinearLayout
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:orientation="horizontal"
    >

    <FrameLayout
        android:id="@+id/frame_layout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:animateLayoutChanges="true"
        >
    </FrameLayout>

    <FrameLayout
        android:id="@+id/frame_layout2"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:animateLayoutChanges="true"
        >
    </FrameLayout>
</LinearLayout>
</LinearLayout>

card_flip_left_out.xml：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="0"
        android:valueTo="180"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:startOffset="0"
        android:duration="1000" />

    <!-- Half-way through the rotation (see startOffset), set the alpha to 0. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:startOffset="0"
        android:duration="800" />

    <objectAnimator
        android:propertyName="translationX"
        android:valueTo="-200"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:startOffset="0"
        android:duration="1000"
        />

</set>

card_flip_right_in.xml：

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- Before rotating, immediately set the alpha to 0. -->
    <objectAnimator
        android:valueFrom="1.0"
        android:valueTo="0.0"
        android:propertyName="alpha"
        android:duration="0" />

    <!-- Rotate. -->
    <objectAnimator
        android:valueFrom="180"
        android:valueTo="0"
        android:propertyName="rotationY"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:duration="1000" />

    <!-- Half-way through the rotation (see startOffset), set the alpha to 1. -->
    <objectAnimator
        android:valueFrom="0.0"
        android:valueTo="1.0"
        android:propertyName="alpha"
        android:startOffset="0"
        android:duration="800" />

    <objectAnimator
        android:propertyName="translationX"
        android:valueTo="0"
        android:interpolator="@android:interpolator/accelerate_decelerate"
        android:startOffset="0"
        android:duration="1000"
        />

</set>

CardActivity.java：

public class CardActivity extends AppCompatActivity implements
                Toolbar.OnMenuItemClickListener {

    FragmentTransaction fragmentTransaction;
    FrameLayout layout1, layout2;
    String visibleFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_card);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        toolbar.setTitle("Digital card");
        toolbar.setTitleTextColor(Color.WHITE);
        toolbar.inflateMenu(R.menu.menu);
        toolbar.setOnMenuItemClickListener(this);

        layout1 = (FrameLayout) findViewById(R.id.frame_layout1);
        layout2 = (FrameLayout) findViewById(R.id.frame_layout2);


        fragmentTransaction = getFragmentManager().beginTransaction();
        fragmentTransaction.replace(R.id.frame_layout1, GeneralDetailsFragment.newInstance());
        fragmentTransaction.replace(R.id.frame_layout2, AddMoreDetailsFragment.newInstance());
        visibleFragment = "layout1";
        fragmentTransaction.commit();
    }

    @Override
    public boolean onMenuItemClick(MenuItem item) {
        Animator anim1 = AnimatorInflater.loadAnimator(this,R.animator.card_flip_left_out);
        Animator anim2 = AnimatorInflater.loadAnimator(this,R.animator.card_flip_right_in);

        if(visibleFragment.equals("layout2"))
        {
            anim1.setTarget(layout2);
            anim2.setTarget(layout1);
            anim1.start();
            anim2.start();
            visibleFragment = "layout1";
        }
        else
        {
            anim1.setTarget(layout1);
            anim2.setTarget(layout2);
            anim1.start();
            anim2.start();
            visibleFragment = "layout2";
        }
        return true;
    }
}

Answer 1

尝试这种方式：

下面是动画的xml文件（从左到右旋转）并在视图上开始动画。并根据需要进行更改。

    <?xml version="1.0" encoding="utf-8"?>
  <set xmlns:android="http://schemas.android.com/apk/res/android"
           android:interpolator="@android:anim/linear_interpolator">

        <rotate xmlns:android="http://schemas.android.com/apk/res/android"
            android:duration="500"
            android:fromDegrees="0"
            android:pivotX="50%"
            android:pivotY="50%"
            android:repeatCount="5"
            android:toDegrees="359" />
        <translate
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:fromXDelta="0%p"        //For Y - android:fromYDelta="0%p" also -value 
            android:toXDelta="100%p"        //For Y - android:toYDelta="50%p"   
            android:repeatCount="0"
            android:duration="3000">
        </translate>
  </set>

希望这会对你有所帮助。

Answer 2

我找到了一种不同且非常简单的方式来实现卡片翻转动画here。此动画不是用于使用FragmentTransaction替换或添加片段，而是用于已包含相应Fragment的两个帧布局。

示例代码为：

public void flip(final View front, final View back, final int duration) {
    if (Build.VERSION.SDK_INT < Build.VERSION_CODES.HONEYCOMB) {
        AnimatorSet set = new AnimatorSet();
        set.playSequentially(
                ObjectAnimator.ofFloat(front, "rotationY", 90).setDuration(duration / 2),
                ObjectAnimator.ofInt(front, "visibility", View.GONE).setDuration(0),
                ObjectAnimator.ofFloat(back, "rotationY", -90).setDuration(0),
                ObjectAnimator.ofInt(back, "visibility", View.VISIBLE).setDuration(0),
                ObjectAnimator.ofFloat(back, "rotationY", 0).setDuration(duration / 2)
        );
        set.start();
    }
    else {
        front.animate().rotationY(90).setDuration(duration / 2).setListener(new AnimatorListenerAdapter() {
            @Override
            public void onAnimationEnd(Animator animation) {
                front.setVisibility(View.GONE);
                back.setRotationY(-90);
                back.setVisibility(View.VISIBLE);
                back.animate().rotationY(0).setDuration(duration / 2).setListener(null);
            }
        });
    }
}

旋转正在工作，而翻译在android中不能同时工作

2 个答案: