共享元素过渡 Shared Element Transition
同一个元素在两个视图间连续变形飞过去,列表小卡片无缝长成详情页头图
项目 A点击展开详情
项目 B点击展开详情
项目 C点击展开详情
(点一张卡片,它会"飞"过去变成详情页头图)
**共享元素过渡(Shared Element Transition)**让“同一个东西”横跨两个页面:列表里的小卡片点击后放大、位移,无缝长成详情页的头图——它是 Material Design 的招牌,实现的经典套路叫 FLIP(First-Last-Invert-Play):先量两个矩形,再用 transform 反演差值播放。
什么时候用:列表 → 详情(电商商品卡、相册缩略图、聊天头像 → 大图)。它建立“我点的就是这个”的因果感,比任何转场都强的空间连续性。
对 AI 说清楚的三要素:① 用 FLIP:只动 transform(位移+缩放),不动 layout 属性;② 时长 0.3~0.4s、缓动带一点点快出慢收;③ 返回时必须反向播放(大图缩回原位),只做正向不做反向等于做了一半。
复制即用的提示词片段
列表到详情用共享元素过渡(Shared Element Transition,FLIP): 点击列表卡片后,测量其起始矩形(First)与详情页头图矩形(Last), 将头图反演(Invert)到起始位置后播放(Play)0.38s 的位移缩放过渡, 返回时反向播放;其余内容淡入,不抢主角。