共享元素过渡图像在退出过渡时跳下

Question

我一直在到处寻找导致此问题的原因，并应用了我在网上找到的大多数解决方案，但我没有运气。

情况就是这样，我有两个活动，一个带有一个 viewpager，每个选项卡内都有一个 recyclerview。当我从 recyclerview 中单击其中一个项目时，它将打开一个模态活动，其中包含片段内的目标转换图像。

所以图片会从recyclerview项扩展到活动模态图片

所以是这样的：Activity1/ViewPager/RecyclerView/Item/Image -> Activity2/Fragment/Image

它从 Activity1 到 Activity2 运行良好，但是当退出动画发生时，图像会向下跳，就像图像的一半并在 Activity 中下降一半图像，所以看起来非常笨重。

这里有一些代码sn-ps：

recyclerview_item.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    android:id="@+id/product_container"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="20dp"
    android:clickable="true"
    android:focusable="true"
    android:foreground="?android:attr/selectableItemBackground"
    android:orientation="vertical">

    <RelativeLayout
        android:background="@drawable/bordered_image"
        android:padding="2dp"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <ImageView
            android:id="@+id/product_image"
            android:layout_width="match_parent"
            android:layout_height="140dp"
            android:adjustViewBounds="true"
            android:scaleType="centerCrop"
            android:src="@drawable/default_item" />
    </RelativeLayout>

    <TextView
        android:id="@+id/product_name"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:gravity="center"
        android:textColor="@color/black"
        android:textSize="20sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/product_price"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="16sp" />

</LinearLayout>

我这样打开活动：

val options = ActivityOptions
    .makeSceneTransitionAnimation(this, sharedImage, sharedImage.transitionName)
startActivity(intent, options.toBundle())

这就是我处理模态活动的方式

    requestWindowFeature(Window.FEATURE_NO_TITLE)
    window.setBackgroundDrawableResource(R.drawable.rounded_dialog)
    window.setLayout(
        ViewGroup.LayoutParams.MATCH_PARENT,
        ViewGroup.LayoutParams.WRAP_CONTENT
    )

我在片段的 onCreateView 中添加了这个

image.transitionName = "image_${mItem.id}"
image.loadUrl(mItem.image)
startPostponedEnterTransition()

我使用 glide 来显示这样的图像

private fun ImageView.loadUrl(url: String) {
    val options = RequestOptions()
    Glide.with(context)
        .load(url)
        .apply(
            options.transforms(
                CenterCrop(),
                RoundedCorners(150)
            )
        )
        .into(this)
}

这是图像返回到活动 1 的方式：

编辑：所以我找到了问题所在。我为活动对话框使用自定义样式。在 android 清单中，我将其添加到活动中：

<activity android:name=".activities.Activity2"
    android:theme="@style/AppTheme.ActivityDialog"/>

风格是这样的：

<style name="AppTheme.ActivityDialog" parent="Theme.AppCompat.DayNight.Dialog">
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
    <item name="android:windowContentTransitions">true</item>
    <item name="windowActionBar">false</item>
    <item name="windowNoTitle">true</item>
    <item name="android:windowBackground">@color/white</item>
</style>

这在某种程度上破坏了动画

Answer 1

所以我发现了问题所在：

活动转换是这样工作的。当您开始第二个活动时，它会以透明背景显示在您的第一个活动之上。共享元素 > 以它们在第一个活动上的相同方式定位，然后动画到第二个活动上指定的正确位置。

在您的情况下，您使用的是 android:theme="@style/Theme.AppCompat.Dialog" 这意味着第二个活动的绘图区域的大小小于第一个活动的大小。这解释了在外部单击时的剪辑和无过渡。

我把Activity2的主题改成了这样：

<style name="AppTheme.ActivityDialog" parent="AppTheme">
    <item name="android:windowIsTranslucent">true</item>
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:backgroundDimEnabled">true</item>
</style>

并在活动 2 布局中添加了一个卡片视图，现在可以使用了