带有导航组件的滑动动画

Question

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

<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(), 而不是平滑动画，我看到：

1. 第一个片段消失了

2. 正在触发第二个片段的动画并将新片段滑动到屏幕

3. 第二个片段出现在屏幕上。

并且 b/c 我在两个屏幕上都有不同的内容，它看起来有问题。我想要实现的是“就像在 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

最后我找到了如何做到这一点。

1. 在图表中，设置动画：

<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" />

2. 创意动画：

   幻灯片_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>

幻灯片_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>

等待动画文件

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

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

   覆盖 fun onViewCreated(view: View, savedInstanceState: Bundle?) { super.onViewCreated(view, savedInstanceState) ViewCompat.setTranslationZ(getView()!!, 100f) }

4. 您还可以添加sharedElementTransitions以使您的动画更加独特。

Answer 2

如果有人想用进入和退出的片段来实现这个动画。

<action
    android:id="@+id/action_sign_in_to_fragmentMemberValidate"
    app:destination="@id/fragmentMemberValidate"
    app:enterAnim="@anim/nav_slide_in_right"
    app:exitAnim="@anim/nav_slide_out_left"
    app:popExitAnim="@anim/nav_slide_out_right"
    app:popEnterAnim="@anim/nav_slide_in_left"/>

nav_slide_in_right.xml

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

nav_slide_out_left.xml

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

nav_slide_out_right.xml

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

nav_slide_in_left.xml

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