Android Fragments 片段之间的过渡动画

66bbxpm5  于 2023-01-21  发布在  Android
关注(0)|答案(2)|浏览(188)

我有两个片段(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()
    }
}
}
q43xntqr

q43xntqr1#

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)
})

下一个谷歌的Codelab帮了我,也许能帮到你,问候

k4ymrczo

k4ymrczo2#

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>

分类子类别

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

相关问题