带有导航组件的滑动动画

Question

我正在使用 JetPack 导航组件在片段之间导航。我在图中的 2 个片段之间添加了幻灯片动画 xml:

<action
    android:id="@+id/action_Fragment_to_DetailsFragment"
    app:enterAnim="@anim/slide_left"
    app:popEnterAnim="@anim/slide_right"
    app:destination="@id/DetailsFragment" />

问题是 - b/c 我正在使用导航组件，它使用 fragmentManager.replace()，而不是 fragmentManager.add()，而不是流畅的动画，我看到：

第一个片段消失
正在触发第二个片段的动画并将新片段滑动到屏幕
第二个片段出现在屏幕上。

和b/c 我在两个屏幕上有不同的内容，看起来有问题。我想要实现的是 "like in IOS"，用户可以看到 2 层屏幕，相互滑动。有没有办法用不支持“fragmentManager.add()”的导航组件来实现它？

我也试过了

app:enterAnim="@anim/slide_in_right"
app:exitAnim="@anim/slide_out_left"
app:popEnterAnim="@anim/slide_in_left"
app:popExitAnim="@anim/slide_out_right"

但情况也好不到哪儿去

Answer 1

到目前为止，我能够使用以下方法改进动画：

SharedElement 对于屏幕的某些部分
为动画添加 alpha
提高幻灯片动画的速度，使 "empty space" 不那么可见

但是还是没能实现"IOS - like"幻灯片动画。

Answer 2

终于找到方法了。

在图中，设置动画：

<action
        android:id="@+id/action_DetailsFragment"
        app:enterAnim="@anim/slide_left"
        app:exitAnim="@anim/wait_anim"
        app:popEnterAnim="@anim/wait_anim"
        app:popExitAnim="@anim/slide_right"
        app:destination="@id/detailsFragment" />

创意动画：

slide_left.xml

    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <translate
        android:duration="300"
        android:fromXDelta="100%"
        android:fromYDelta="0%"
        android:toXDelta="0%"
        android:toYDelta="0%" />
</set>

slide_right.xml

    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false">
    <translate
        android:duration="300"
        android:fromXDelta="0%"
        android:fromYDelta="0%"
        android:toXDelta="100%"
        android:toYDelta="0%" />
</set>

wait_anim.xml

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

为了让它看起来更好看，在 DetailsFragment 中添加：

override fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated（视图，已保存实例状态） ViewCompat.setTranslationZ(getView()!!, 100f) }
您还可以添加sharedElementTransitions让您的动画更加独特

带有导航组件的滑动动画

Slide animation with navigation component

android

android-animation

android-fragments

android-navigation