Android不同scaleType之间的共享元素转换

Question

我遵循了这篇Android开发者博客的文章，这是他的源代码。

演示效果不错，但是通常我们在图像列表中使用centerCrop比例类型，在详细模式下使用fitCenter。当我修改代码以实现此目的时，过渡效果无法处理比例类型的更改。从详细片段返回时，动画会以错误的比例类型开始。

我找到了ChangeImageTransform过渡。文档中写道：

该过渡捕获场景变化前后ImageView的矩阵，并在过渡期间对其进行动画处理。

结合ChangeBounds，ChangeImageTransform能够平滑地对通过改变大小、形状或ImageView.ScaleType的ImageView进行内容动画设置。

所以我修改了过渡设置:

<transitionSet
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="375"
    android:interpolator="@android:interpolator/fast_out_slow_in"
    android:transitionOrdering="together">
  <changeBounds/>
  <changeImageTransform/>
</transitionSet>

但是动画变得越来越丑陋:

如何在不同的比例类型之间平滑地转换？

- Chenhe

Answer 1

我按照同样的项目GridToPager，遇到了完全相同的问题。以下是两个解决方法。

image_shared_element_transition.xml

<?xml version="1.0" encoding="utf-8"?>
<transitionSet
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="375"
    android:interpolator="@android:interpolator/fast_out_slow_in"
    android:transitionOrdering="together">
  <changeClipBounds/>
  <changeTransform/>
  <changeBounds/>
  <changeImageTransform/>
</transitionSet>

并且

从image_card.xml中的CardView中移除android:clipChildren="false"属性。

- Sai

Answer 2

当您使用ChangeBounds时，需要过渡子元素和父元素，以使过渡适当地工作。每当元素从左上角进入（例如在第二个视频中），您可以假设父视图也没有被过渡。

我会确保CardView也被视为共享元素，这意味着您需要更新第二个片段布局，以便ImageView位于CardView内部。

还要注意，每个共享元素都需要一个唯一的transitionName...这在过去曾给我带来问题。

- Banjoe

---

我尝试移除CardView包装器，但不幸的是问题仍然存在。顺便说一下，演示也使用ChangeBounds而没有任何问题。我确定转换名称是唯一的，博客强调了这一点。 - Chenhe