前言
介绍了几篇 Hero
动画,我们来一个 Hero
动画应用案例。在一些应用中,列表的元素和详情的内容是一致的,这个时候利用 Hero
动画切换到详情会感觉无缝过渡,用户体验会更好。例如本篇我们要实现下面的效果:
思路
上面的效果是列表和详情共用了头像和头像的背景色。二者的组合是一个 Stack
组件,因此可以使用 Hero
组件完成。然后是 Hero
组件的移动,我们先做了水平移动,再做垂直方向移动,这样过渡体验会更好,这种可以用我们自定义的 RectTween
完成。下面是我们的各个部分的实现过程。
列表元素
列表元素我们定义一个 HeroListItem
类,整个列表元素需要点击进入详情,使用 GestureDetector
包裹。然后使用 Row
组件完成横向布局,而头像部分使用的是 S