片段之间的过渡动画

Question

我有两个片段（A，B），可以互换；我想要实现的是每次交换它们时在它们之间向上/向下滑动动画。

我试过像这样使用两个对象动画师：

//slide up
<objectAnimator
    android:interpolator="@android:interpolator/linear"
    android:propertyName="translationY"
    android:valueType="intType"
    android:valueFrom="1920"
    android:valueTo="0"
    android:duration="1000" />

//Slide down  
<objectAnimator
    android:interpolator="@android:interpolator/linear"
    android:propertyName="translationY"
    android:valueType="intType"
    android:valueFrom="0"
    android:valueTo="1920"
    android:duration="1000" />

但它没有用，因为这两个片段是重叠的。那我该怎么做那个动画呢？

片段 A：

class FragmentA : Fragment(){

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)

    buttonA.setOnClickListener {
        activity.supportFragmentManager.beginTransaction()
                .setCustomAnimations(R.animator.slide_dowm, R.animator.slide_up)
                .replace(R.id.container, FragmentB()).commit()
    }
}
}

片段 B：

class FragmentB : Fragment(){

override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
    super.onViewCreated(view, savedInstanceState)

    buttonB.setOnClickListener {
        activity.supportFragmentManager.beginTransaction()
                .setCustomAnimations(R.animator.slide_up, R.animator.slide_down)
                .replace(R.id.container, FragmentB()).commit()
    }
}
}

Answer 1

animator/slide_in_left.xml

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

    <objectAnimator
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="500"
        android:propertyName="x"
        android:valueFrom="1000"
        android:valueTo="0"
        android:valueType="floatType" />

</set>

animator/slide_out_right.xml

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

    <objectAnimator
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:duration="500"
        android:propertyName="x"
        android:valueFrom="0"
        android:valueTo="-1000"
        android:valueType="floatType" />

</set>

Class 子类别

 public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            // TODO Auto-generated method stub
            // return super.onCreateView(inflater, container, savedInstanceState);

            View view = (ViewGroup) inflater.inflate(R.layout.product_frame, null);
            getFragmentManager().beginTransaction()
                    .replace(R.id.sub_header, new Sub_Header()).commit();
            getFragmentManager()
                    .beginTransaction()
                    .setCustomAnimations(R.animator.slide_in_left,
                            R.animator.slide_out_right, 0, 0)
                    .replace(R.id.product_frame, new Sub_Catagory_Grid()).commit();

            view.getWidth();
            return view;

        }

一些链接

Fragment transaction animation: slide in and slide out

How to apply a fade-in/fade-out animation when replacing a fragment

Answer 2

Google 发布了新的 Navigation UI 库

因此，现在我们可以从 your_named_navigation.xml 资源（main > res > navigation > your_named_navigation.xml）、

执行相同的片段转换

这是我实现的代码片段：

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    app:startDestination="@+id/first_fragment">

    <fragment
        android:id="@+id/first_fragment"
        android:name="com.yourpackage.FirstFragment"
        android:label="@string/title_first"
        tools:layout="@layout/fragment_first">

        <action
            android:id="@+id/second_fragment_action"
            app:destination="@id/second_fragment"
            app:enterAnim="@anim/slide_in_right"
            app:exitAnim="@anim/slide_out_left"
            app:popEnterAnim="@anim/slide_in_left"
            app:popExitAnim="@anim/slide_out_right" />

    </fragment>

    <fragment
        android:id="@+id/second_fragment"
        android:name="com.yourpackage.SecondFragment"
        android:label="@string/title_second"
        tools:layout="@layout/fragment_second">

        <action ...next fragment/>

    </fragment>

</navigation>

它还有助于处理后退按钮和向上按钮的点击，

因此，在我们的项目中实现 NavigationUi 之后，我们可以从我们的 firstFragment 实例调用 Navigation.findNavController 方法

myButton.setOnClickListener(View.OnClickListener {
    //This opens our second fragment creating a stack of fragments
    Navigation.findNavController(it).navigate(R.id.second_fragment_action)
})

下Google's Codelab对我有帮助，也许能帮到你，问候

片段之间的过渡动画

Transition animation between fragment

android

android-animation

android-fragments

片段之间的过渡动​​画

Transition animation between fragment

android

android-animation

android-fragments

片段之间的过渡动画