如果目标低于重叠元素，则过渡动画不平滑

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 之上，并在动画结束时返回到正常窗口的 View 层次结构。 这意味着在动画期间，shared element 将高于NestedScrollView，并在过渡结束时突然恢复到低于NestedScrollView 的正常状态（EnterTransition 和SharedElementEnterTransition）。

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

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

动画不会覆盖其余视图，您只会看到 CollapsingToolbarLayout 内的动画

2.- 在为NestedScrollView 启动fade in 动画之前等待共享元素过渡结束：

将NestedScrollView 的可见性设置为invisible

  <android.support.v4.widget.NestedScrollView
    ...
    android:visibility="invisible"
    >

设置一个监听器等待共享元素过渡结束并为NestedScrollView启动动画

getWindow().getSharedElementEnterTransition().addListener(new Transition.TransitionListener() {

        ...

        @Override
        public void onTransitionEnd(Transition transition) {
            Animator anim   = ObjectAnimator.ofFloat(myNestedScrollView, "alpha", 0f, 1f);
            anim.setInterpolator(new DecelerateInterpolator());
            anim.setDuration(1000);
            ns.setVisibility(View.VISIBLE);
            anim.start();


        }

        ...

    });