F7.04.3Shared-element fallback设计

共享元素失败时需退化为普通转场

别名: 共享元素回退 · 对不上的英雄转场 · 退化转场

概念解释

共享元素依赖两端都能指出同一块表面。列表项被回收、图片还在下载、源已经滚出屏幕、两端宽高比完全对不上时,对应关系在几何上就不存在。这时硬做形变,得到的不是身份连续,而是两件东西在融化。失败需要退化成普通转场——淡入、方向性滑入、甚至硬切——让两个完整状态先后出现,好过一个错误的中间物体。

机制

渲染层按 ID 或几何锚点去配对。配对落空时,实现常常拿「最近的同类视图」或一个空矩形去插值,于是用户看见无关的卡片飞向详情,或看见一张空白框胀开。错误对应比没有对应更贵:它写入一条假的对象档案,后续返回会找错行。

普通转场不承诺身份焊缝,只承诺「页在换」。淡入保留两个完整表面;方向性滑入还能保住层级方向。它们的信息量低于成功的共享元素,但不会主动撒谎。退化不是降级体验的借口,是在对应前提消失时停止伪造。

边界

  • 源只是暂时离屏、滚动回来还在,可以等源进入视口再共享,不必立刻退化;等太久则变成假延迟。
  • 两端是同一张图的不同裁切,有时可用交叉淡入而不是几何形变,这仍是一种退化,不是硬拉。
  • 全产品没有方向约定时,退化成滑入会引入一条新的空间谎言,不如淡入。

怎么落地

  • 在配对前检查:源视图是否仍在层级里、图像是否已解码、尺寸比是否可接受。任一失败就走淡入或既有的页面转场。
  • 不要用邻近的另一项顶替丢失的源。
  • 验证:人为让图片加载失败、让源项被回收、让源滚出屏幕,各走一次详情。若仍出现飞错卡片或空白框拉伸,回退分支没有接上。

延伸

  • 同组F7.04.1 共享元素维持对象的连续身份 · F7.04.2 转场前后元素尺寸差异过大会失真
  • 相邻F7.05 入场与出场的方向 · F7.06.3 用动效制造的假延迟是净损失
  • 站内检索shared-element fallback · object correspondence · cross-fade

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F7.04.3