动画引擎原理 总览待审核
shared element · magic-move · FLIP 跨节点

shared element:让两个视图里的「同一个元素」连续morph

FLIP 处理的是同一个 DOM 元素布局变化前后的平滑过渡; 列表生命周期处理重排。这里更进一步:列表视图里的小头像和详情视图里的大头像 是两个不同的 DOM 节点,却代表同一个对象——切换视图时让它看起来是同一个元素连续放大飞过去 (magic-move / shared element transition)。手法仍是 FLIP 的「先量首末、反推、播回 identity」,只是首末取自 两个节点。

列表 ⇄ 详情:头像作为共享元素

点任一个人进入详情,头像从它在列表里的位置 / 尺寸飞放到详情里的大图位置;点「返回」再飞回原位。 两个视图各自的头像节点不同,过渡却连续——因为详情头像在播放前被反推到列表头像所在的盒子,再动画回它自己的位置。

共享元素 = 两个节点 + 一次 FLIP:进入时量出列表头像的盒子 (first)、把详情头像挂上来量它的盒子 (last), 用 invert(first, last) 求出位移与缩放差,先用 invertTransform(d, 1) 把详情头像反推 到列表头像的位置,再让一个 Animation 把这个因子从 1 播到 0——视觉上就是「同一个头像飞过去」。 浏览器原生的 View Transitions 把这一整套自动化 (给两节点同名 view-transition-name 即可), 对照见与原生对照;这里手写一遍是为看清它内部到底做了什么。
@vega/anim — 跨节点 shared element 的 FLIP

  


  

    单元素的 FLIP 与拖拽惯性见高级交互,列表增删重排的 FLIP 见
    列表生命周期;为什么 FLIP 能避免逐帧重排 (用 transform 反推而非动 left/width),
    见合成层。