高级交互:拖拽惯性、滚动驱动、FLIP
前面的要素组合起来,就能支撑三类常见的交互动画。它们都不引入新机制,只是把输入接到动画值上, 或把播放头接到别的来源上。
拖拽 + 惯性
拖动方块:松手瞬间用最近一小段时间窗的位移估出速度,作为弹簧的初速度接管, 于是顺势抛出并在边界回弹。把它甩到容器外,会被弹回范围内。
拖我 →
滚动驱动 (scroll-linked)
在下面这个框里滚动:进度不再由时间流动,而是由 scrollTop 在区间内归一化得到——
滚动条就是动画的播放头。方块的旋转 / 缩放与进度条都绑定到同一个滚动进度。
scroll
↕ 在框内滚动,进度 = scrollTop 归一化
FLIP 布局动画
点任意方块切换大小。直接对 width 做动画会逐帧重排;FLIP 先量变更前位置 (First),让 DOM
直接跳到终态并量新位置 (Last),用一个 transform 把它反推回看起来没变 (Invert),再把 transform
动画回 identity (Play)。整个过渡只动 transform,不重排。
Δx/Δt,作为弹簧的初速度接管 (真正的速度接管见
中断与重定向);滚动驱动——进度不再来自时间,而是 scrollTop 在区间内
归一化,滚动条就是播放头;FLIP——先量旧位 (First)、让 DOM 跳到终态量新位 (Last)、
用一个 transform 反推回看似没动 (Invert)、再把 transform 动画回 identity (Play)。其中 Invert 必须在首帧 rAF
之前同步写上,否则会先闪现终态。三者全程只动 transform,不触发重排。
@vega/anim — 拖拽 · 滚动驱动 · FLIP
拖拽惯性的弹簧见弹簧;滚动驱动依赖播放头可被任意 seek,见
播放控制;归一化映射见插值的
interpolate(input, output)。