微交互如何本地复现：固定手势轨迹、弹簧参数和截图

微交互如何本地复现：固定手势轨迹、弹簧参数和截图

微交互调参不能靠肉眼记忆。小沙盒固定手势轨迹、弹簧参数、时间步长和关键截图，让设计讨论落到同一条可复现运动曲线上。

固定输入，再比较输出

用 Playwright 执行同一段指针轨迹，采集几个关键时间点的截图。截图差异适合发现回归，不适合要求每一帧在所有系统上完全一样：字体渲染、合成策略和设备像素比都会产生差异。

test('drawer settles after release', async ({ page }) => { await page.goto('/sandbox/drawer'); await page.locator('[data-drawer]').dragTo(page.locator('[data-target]')); await expect(page).toHaveScreenshot('drawer-settled.png', { maxDiffPixelRatio: 0.02, }); });

用时间步长更新弹簧

弹簧的关键参数是刚度、阻尼、质量和释放速度。无论选择欧拉、半隐式欧拉还是 RK4，时间步长都要受限，并以真实时间为基准；过度复杂的求解器不一定比简单稳定的方案更适合界面。

function step(state, dt) { const capped = Math.min(dt, 1 / 30); const acceleration = (-state.k * state.x - state.c * state.v) / state.mass; state.v += acceleration * capped; state.x += state.v * capped; }

让沙盒服务于判断

面板里展示参数、当前位移和速度就够了。先保证手势可用、减少动效可选、动画可取消，再微调那一点回弹的呼吸感。像素级还原是沟通工具，不该变成脱离体验的数字竞赛。