褪色的英雄观点＆＃39;共享元素转换中的孩子

Question

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

在标准共享元素转换中，在输入动画中，调用活动中的英雄视图会立即覆盖目标视图（在起始维度），然后转换动画将目标视图的维度更改为到他们的新位置。

但是，在返回动画中，返回活动的视图仍保留在叠加层的顶部，它们是在动画结束之前显示的视图，此时目标（调用活动＆＃39; s） ）英雄观点到位。

如果两个英雄视图的内容存在任何差异，这会产生一种非常刺耳的效果 - 例如，线条换行的文本视图或完全不同的子视图。

与此同时，在Google Keep中，共享元素转换似乎会在每个方向上来回淡化内容视图，因此这种不和谐的效果相当不明显。因此，填充或换行等方面的差异要小得多。

我在自己的应用中实现此功能的最佳方法是什么？

这是一个例子：

Answer 1

我的回答很长。它只提供了重新创建我在动画图像中看到的内容的一般框架，因此您需要花一些时间自己调整内容以使其完美。

代码在此处可见：https://gist.github.com/zizibaloob/e107fe80afa6873301bf234702d4b2b9

tl; dr ：＆＃34;共享元素＆＃34;只是绿卡/背景，所以你使用它们创建过渡。在第二个活动的背景上放置绿色背景背后的灰色背景，以便绿色在其生长的同时绘制一些东西。将所有内容包装在父视图中，并为其alpha设置动画以淡入/淡出。

完整答案

在您的图片中，＆＃34;共享元素＆＃34;似乎是第一个屏幕上的绿卡/第二个屏幕的绿色背景。最重要的是，我们还增加了两个要求：

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

让我们浏览每个文件并谈谈我为达到预期效果而做出的选择......

activity_main.xml中

这个非常简单。我刚建立了一个视图层次结构，模糊地类似于图像中的层次结构。顶部的空View是Toolbar的占位符，而卡片底部的Space就是为了让它更大一些。

activity_other.xml

此布局的相关部分是＆＃34; parent＆＃34;的三重叠加。观点。他们每个人都有一个目的：

• 顶级FrameLayout为卡片提供灰色背景，以便＆＃34;成长＆＃34;在
• 中间FrameLayout提供将在活动之间共享的绿色背景
• 内部LinearLayout包含了我们想要淡入/淡出的所有内容，并将通过Activity类
中的代码进行动画处理

MainActivity.java

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

OtherActivity.java

大部分魔法发生在这里。在onCreate()内，Toolbar内容都是标准内容，因此我们可以跳过它。 if语句中的代码用于设置淡入动画（包含在if中，因此它仅在首次启动时淡入）。我还覆盖了onBackPressed()以反转淡入淡出动画并触发返回过渡。

shared_element_transition.xml

所有剩下的魔法都在这个文件中。 <targets>元素排除状态和导航栏，确保它们在转换期间不会闪烁。各种<changeFoo>标签是播放的实际过渡动画。

styles.xml

我在Gist中包含它的唯一原因是TransitionTheme风格。这适用于清单中的OtherActivity，它设置了我们的自定义转换（来自shared_element_transition.xml）。