我的回答很长。而且它只提供了一个通用框架来重新创建我在您的动画图像中看到的内容,因此您必须花一些时间自己进行调整以使其完美。
代码在这里可见:https ://gist.github.com/zizibaloob/e107fe80afa6873301bf234702d4b2b9
tl; dr:“共享元素”只是绿卡/背景,因此您可以使用它们创建过渡。在第二个活动的绿色背景后面放置一个灰色背景,以便绿色在生长时可以在上面绘制。将您的所有内容包装在父视图中并为其设置动画alpha
以淡入/淡出。
完整答案
在您的图像中,“共享元素”似乎是第一个屏幕上的绿卡/第二个屏幕的绿色背景。最重要的是,我们添加了两个额外的要求:
- 第一个活动的灰色背景必须在过渡期间可见
- 卡片的内容消失,然后在过渡期间/之后淡入
让我们浏览每个文件并讨论我为达到预期结果所做的选择......
activity_main.xml
这个真的很简单。我刚刚建立了一个视图层次结构,它与您图像中的视图层次结构隐约相似。View
顶部的空白是 a 的占位符Toolbar
,Space
卡片底部的 只是为了让它更大一点。
activity_other.xml
此布局的相关部分是“父”视图的三重堆栈。他们每个人都有一个目的:
- 顶层
FrameLayout
为卡片“增长”提供了灰色背景
- 中间
FrameLayout
提供了将在活动之间共享的绿色背景
- 内部
LinearLayout
包装了我们想要淡入/淡出的所有内容,并将由Activity
类中的代码进行动画处理
MainActivity.java
另一个简单的类。所有这些Activity
都是使卡片可点击并设置过渡。
其他活动.java
大多数魔法都发生在这里。在 内onCreate()
,这些Toolbar
东西都是标准的,所以我们可以跳过它。语句中的代码用于if
设置淡入动画(包装在 an 中if
,因此仅在首次启动时淡入)。我还重写onBackPressed()
以反转淡入淡出动画并触发返回过渡。
shared_element_transition.xml
所有其余的魔法都在这个文件中。该<targets>
元素不包括状态栏和导航栏,以确保它们在过渡期间不会闪烁。各种<changeFoo>
标签是播放的实际过渡动画。
样式.xml
我将它包含在 Gist 中的唯一原因是TransitionTheme
风格。这应用于OtherActivity
清单中,它设置了我们的自定义转换(从shared_element_transition.xml
)。