换列数走弧线重排

网格换列数时，每一项沿弧线飞到新位置，相邻项错开延迟——比直线 FLIP 高级一档的重排手感。点下面按钮切换列数看效果。

实时 Demo

↑ 切换列数：每项走弧线 + 相邻错峰，注意右上→左下的弧度方向

调参台拖动滑杆实时改手感，提示词同步更新

效果拆解

FLIP 记位：列数切换前记录每项旧位置（First），改布局后测量新位置（Last），然后 invert 反向偏移让画面看起来没动（Invert），最后播放到零（Play）——重排动画的通用底座。
弧线 = 双轴异步：直线运动是 X/Y 同步插值；弧线让 Y 先走、X 后走（或反之），两个轴用不同的缓动/时序，轨迹自然变成贝塞尔弧。哪些项往右上弯、哪些往左下弯，由行列相对位置决定。
错峰延迟：按「新位置行列序号」计算 delay = (row + col) × stagger，对角线波次推进，重排有秩序感而不是一团乱飞。
rAF + transform：全程只写 transform（合成层），布局跳变只在切换瞬间发生一次，动画期间零重排。

AI 提示词

用现代前端技术实现换列数走弧线重排（Arc Reflow）：网格在 2/3/4 列间切换，用 FLIP 技术做重排动画——切换前记录每项旧 rect，改列数后测新 rect，先 transform 反偏移再播放到零。运动轨迹要求弧线：X、Y 两轴用不同时序（Y 用 easeOut 先到位、X 用 easeInOut 后到位），使轨迹呈二次贝塞尔弧感。错峰：delay 按 (目标行 + 目标列) × ${v.stagger}ms 波次推进，总时长 ${v.dur}ms，末尾每项带 ${v.overshoot} 轻微超调回弹。动画期间零布局抖动，容器高度用 FLIP 同步过渡，全程只写 transform。

参数可调：错峰间隔 stagger、单程时长 dur、超调幅度 overshoot。
注意：项数多时用 rAF 手写插值代替逐项 CSS transition（几百个 transition 同时起会卡）；切换按钮要防连点（动画中再次切换先快进到终态再重新 FLIP）。