在共享元素转换中衰落英雄观点的孩子

我很好奇android如何处理在Google Keep中可以看到的共享元素转换中的英雄视图的子项:

在标准共享元素转换中,在inputanimation中,调用活动中的英雄视图在目标视图的维度中转换animation更改之前立即与目标视图(在起始维度上)重叠,以达到其新位置。

但是,在返回animation中,返回的活动的视图保留在叠加层之上,而且它们是在animation结束之前显示的视图,此时目标(调用活动的)英雄视图会卡入到位。

如果两个英雄视图的内容有任何不同,例如,行的换行方式不同的textview或者不同的子视图,这会产生相当震撼的效果。

同时,在Google Keep中,共享元素转换似乎会使内容视图以各种方式来回褪去,所以这种震撼效果不太明显。 因此,诸如填充或换行之类的差异问题就less得多了。

我在自己的应用程序中实现这个最好的方法是什么?

这里是一个例子:

在这里输入图像说明

Solutions Collecting From Web of "在共享元素转换中衰落英雄观点的孩子"

我的答案很长。 而且它只提供一般的框架来重现我在animation图像中看到的东西,所以你将不得不花费一些时间来调整自己的东西才能使它完美。

代码在这里可见: https : //gist.github.com/zizibaloob/e107fe80afa6873301bf234702d4b2b9

tl; dr :“共享元素”只是绿卡/背景,所以你使用这些创build了转换。 在第二个活动的绿色背景之后放置一个灰色的背景,以便在绿色的背景上增加一些东西。 将所有内容包装在父视图中,并使其alpha显示淡入/淡出。

完整答案

在你的图片中,“共享元素”看起来是第一个屏幕/第二个屏幕的绿色背景上的绿卡。 最重要的是,我们增加了两个额外的要求:

  • 第一个活动的灰色背景必须在过渡期间可见
  • 卡片的内容消失,然后在过渡期间/之后淡入

让我们通过每个文件,并谈论我所做的select,以达到预期的结果…

activity_main.xml中

这个很简单。 我只是build立了一个视图层次结构,模糊地类似于你的形象。 顶部的空白View是一个Toolbar的占位符,并在卡的底部的Space只是为了使它更大一点。

activity_other.xml

这个布局的相关部分是“父”视图的三重叠。 他们每个人都有一个目的:

  • 顶层FrameLayout为卡片“增长”提供灰色背景
  • 中间的FrameLayout提供了将在活动之间共享的绿色背景
  • 内部的LinearLayout包装了我们想要淡入/淡出的所有东西,并且会被Activity类中的代码animation

MainActivity.java

另一个简单的类。 所有这些Activity都是使卡片可点击并设置过渡。

OtherActivity.java

大部分的魔术都发生在这里。 在onCreate()Toolbar东西都是标准的,所以我们可以跳过这个。 if语句中的代码是设置淡入animation(包装在if因此只在第一次启动时淡入)。 我也重写onBackPressed()来反转淡出的animation,并触发返回转换。

shared_element_transition.xml

所有其余的魔法都在这个文件中。 <targets>元素排除状态和导航栏,确保在转换过程中不闪烁。 各种<changeFoo>标签是播放的实际过渡animation。

styles.xml

我把这个包含在Gist中的唯一原因是TransitionTheme风格。 这应用于OtherActivity中的OtherActivity ,它是设置我们的自定义转换(从shared_element_transition.xml )。

在这里输入图像说明