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

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

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

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

SharedElement（针对屏幕的某些部分）
向动画添加Alpha
提高幻灯片动画的速度，以使“空白空间”不可见

但是仍然无法实现“类似iOS的”幻灯片动画。

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中添加：

onViewCreated（view：View，savedInstanceState：Bundle？）的替代乐趣{ super.onViewCreated（view，savedInstanceState） ViewCompat.setTranslationZ（getView（）!!，100f） }
您还可以添加sharedElementTransitions，使动画更加独特。

带有导航组件的幻灯片动画

2 个答案: