状态之间的转换 · A 变成 B
共享元素转场Shared element transition
- 连贯
- 有空间感
- 电影感
列表里的缩略图在打开详情页时飞到新位置并放大，让两个页面看起来是同一个空间。
什么时候用它
列表到详情的跳转、图片放大预览用它；两个页面没有共同视觉元素时用它反而会乱。
参数
320ms · cubic-bezier(0.32, 0.72, 0, 1) · position and size transition together
配方
共享元素转场 → 320ms cubic-bezier(0.32, 0.72, 0, 1)共享元素转场 → position and size transition together
给 AI 的一句话
实现列表缩略图到详情大图的共享元素转场：同一张图从列表位置平滑移动到详情位置并放大，320ms，cubic-bezier(0.32, 0.72, 0, 1)。