动效与动画

共享元素过渡 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 的位移缩放过渡,
返回时反向播放;其余内容淡入,不抢主角。