Question

我正在使用图像作为共享元素来设置淡入淡出活动过渡。目标容器应该部分隐藏在具有app:behavior_overlapTop的另一个元素下面，在本例中是NestedScrollView。然而实际上，该元素在图像下面实现并且在动画结束时突然重叠。这会产生一种不流畅的感觉：

这是布局：

<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">

<android.support.design.widget.AppBarLayout
    android:id="@+id/app_bar_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp"
        android:fitsSystemWindows="true">

        <com.mypackage.android.view.SquareImageView
            android:id="@+id/img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"
            app:layout_collapseMode="parallax"
            android:transitionName="@string/trans_gallery_img"/>

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" />

    </android.support.design.widget.CollapsingToolbarLayout>

</android.support.design.widget.AppBarLayout>

<android.support.v4.widget.NestedScrollView
    android:id="@+id/scroll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clipToPadding="false"
    app:behavior_overlapTop="45dp"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    ... stuff
</android.support.v4.widget.NestedScrollView>

我使用的过渡：

Fade fade = new Fade();
fade.excludeTarget(android.R.id.navigationBarBackground, true);
getWindow().setEnterTransition(fade);
getWindow().setExitTransition(fade);

ChangeBounds changeBoundsTransition = new ChangeBounds();
getWindow().setSharedElementEnterTransition(changeBoundsTransition);
getWindow().setSharedElementExitTransition(changeBoundsTransition);

即使我使用Slide，它也会产生相同的效果，重叠元素在下面滑动，然后以相同的方式结束。为此有一个解决方法会很好。

Answer 1

要正确显示动画，shared element会覆盖no-shared elements，并在动画结束时返回到普通窗口的视图层次结构。这意味着在动画期间，shared element将高于NestedScrollView，并且当转换结束时NestedScrollView突然将返回到EnterTransition以下的正常状态（SharedElementEnterTransition和{{1 }}）。

我知道有两种方法可以解决这个问题：

1.-将android:windowSharedElementsUseOverlay="false"添加到style.xml：

动画不会覆盖其余视图，您只会在CollapsingToolbarLayout

中看到动画

2.-等到共享元素转换结束，然后开始fade in的{{1}}动画：

将NestedScrollView展示次数设置为NestedScrollView

invisible

设置一个Listener以等待共享元素转换结束并为<android.support.v4.widget.NestedScrollView ... android:visibility="invisible" >

启动动画

NestedScrollView

如果目标位于重叠元素下方，则会产生不平滑的过渡动画

1 个答案: