圆形到矩形 ImageView 共享元素过渡

Question

我在活动“A”中有一个方形 ImageView。我使用剪辑背景进行了圆形。

<com.app.customview.SquareWidthFitImageView
    android:id="@+id/imageview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/round_circle"
    android:layout_margin="@dimen/keyline_8dp"
    android:scaleType="centerCrop"
    android:transitionName="@string/image_source"/>

这就是我将它剪裁成圆形的方式。

mImageView.setClipToOutline(true);

我有另一个 ImageView 的活动“B”（比例 3:2）

<com.app.customview.ThreeTwoImageView
    android:id="@+id/detail_image"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:clickable="true"
    android:scaleType="centerCrop"
    android:src="@drawable/placeholder"
    android:transitionName="@string/image_target"/>

当我从活动“A”转到活动“B”时，我在此 ImageView 上使用共享元素过渡动画。

但是，我的动画不是从圆形图像到矩形图像的平滑过渡。当我从活动“A”转到活动“B”时，圆形图像变为矩形图像，然后动画到其最终位置。同样，当我按下返回并返回活动“A”时，矩形图像动画为较小的矩形（圆形图像的大小）图像，然后较小的矩形变为圆形。

活动“B”主题是

<style name="Detail" parent="AppTheme">
    <item name="android:windowAllowEnterTransitionOverlap">true</item>
    <item name="android:windowAllowReturnTransitionOverlap">false</item>
    <item name="android:windowSharedElementsUseOverlay">false</item>
    <item name="android:windowEnterTransition">@transition/detail_enter</item>
    <item name="android:windowReturnTransition">@transition/detail_return</item>
</style>

detail_enter.xml

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

<transitionSet
xmlns:android="http://schemas.android.com/apk/res/android">

<transitionSet>
    <!-- Dont apply this animation on below views -->
    <targets>
        <target android:excludeId="@android:id/navigationBarBackground" />
        <target android:excludeId="@android:id/statusBarBackground" />
        <target android:excludeId="@id/detail_image" />
    </targets>
    <!-- Slide from bottom all the transitioning views -->
    <transition
        class="android.transition.Slide"
        android:duration="500"
        android:interpolator="@android:interpolator/linear_out_slow_in" />
    <!-- Delay fading in so that the shared element transition on the background
         has time to run -->
    <fade
        android:startDelay="150"
        android:duration="350"
        android:interpolator="@android:interpolator/linear" />
</transitionSet>

<!-- Fade animation on system bars -->
<fade
    android:duration="500"
    android:interpolator="@android:interpolator/linear">
    <targets>
        <target android:targetId="@android:id/statusBarBackground" />
        <target android:targetId="@android:id/navigationBarBackground" />
    </targets>
</fade>

</transitionSet>

detail_return.xml

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

<transitionSet xmlns:android="http://schemas.android.com/apk/res/android">

<!-- Rapidly fade out all non-shared-element content with a slight downward shift -->
<transitionSet>
    <targets>
        <target android:excludeId="@android:id/navigationBarBackground" />
        <target android:excludeId="@android:id/statusBarBackground" />
    </targets>
    <fade
        android:duration="48"
        android:interpolator="@android:interpolator/fast_out_linear_in" />
    <slide
        android:slideEdge="bottom"
        android:duration="250"
        android:interpolator="@android:interpolator/fast_out_linear_in" />
</transitionSet>

</transitionSet>

如何在圆形图像变形为矩形图像的情况下平滑共享元素过渡？

Answer 1

保持所有代码相同，并将此代码添加到活动 B：

Activity B

onCreate(...){
super.onCreate(...);

ChangeClipBounds changeClipBounds = new ChangeClipBounds();
changeClipBounds.addTarget(R.id.detail_image);

getWindow().setSharedElementEnterTransition(changeClipBounds);

setContentView(...)
}