先定位原因，再调参数

来源：debug-animation/SKILL.md。目的：把“感觉不对”变成可验证的原因，用最小改动验证假设。

11.1 五步诊断循环

复现真实环境→录屏/10–25% 慢放→分类症状→一次改一个变量并录制比较→正常速度与真实设备复验。曲线和延迟先检查，再调时长。慢放正确不代表正常速度好用。

记录触发方式、项目版本、设备、刷新率、窗口大小、加载/空闲状态。没有稳定复现，随机把 300 改成 200 再改 180，只是在生成不同版本，很难知道哪个因素有帮助。

11.2 感觉慢

曲线不是越陡越好：瞬间走完绝大部分距离也可能显得跳变。用参考和实际操作判断。

11.3 机械、呆板

查非匀速场景用了 linear；检查所有项目相同幅度/延迟是否抹掉层级；拖拽释放是否不使用释放速度。根据症状选择曲线、派生值或弹簧，而不是给每个值加 bounce。原文“现实没有匀速”是设计修辞，不能当物理事实或禁用 linear 的理由。

11.4 廉价、说不清哪里不对

近零尺度入场、错误原点、组件子动画不同步、空间来去不一致、品牌性格不匹配都可能是原因。Crossfade 的双影先查几何和时序，必要时试小 blur。淡入本身不是错误，不能因为原文偏好 scale＋opacity 就给所有静态内容强加位移。

11.5 掉帧

区分“曲线让它看着顿”和“真实帧没及时产生”。用 Performance 录制检查 Layout/Paint、主线程长任务、每帧 React render、父级继承变量、滤镜面积与图层。功能正常但掉帧是性能问题；不应仅改 easing 掩盖。

11.6 跳变、闪一下、退出没播

不要只背“没有 key 所以没有 exit”，要画出挂载和移除的时间线。

11.7 不该触发、反复触发

Hover 抖动→命中区域随视觉移动；触屏误 hover→能力查询与交互入口；连续 Tooltip 全都重新延迟/动画→区分首次和连续打开；滚动上下经过反复 reveal→once/unobserve；返回路由重播→明确页面级播放持久性策略。

11.8 表格匹配不上时

重新检查用途→频率→曲线→时长→真实参考。代码可能正确地实现了一个不合适的方案。把参考和自身录制在同条件下比较，不把个人形容词当原因。

问题：抽屉在快速开关时闪到关闭位置
复现：打开后约 100ms 立刻关闭再打开
假设：开关状态切换重启了固定起点动画
证据：慢放中 transform 突然从中间值跳到 100%
修改：保留节点，用可改目标的过渡管理位置
验证：同样操作连续五次，正常速度与 reduce 各看一次

Skill 的实现方式

按症状组织知识，比按 CSS 属性组织更适合排错入口；按可能性排序原因，禁止一次盲调多个值；匹配失败时返回基础决策框架。深度性能分析交给 performance，API 误用交给 motion-react，全 diff 审查交给 review。

自测与答案

1. 改三个参数后效果更好，能确认原因吗？不能，缺少单变量比较。

2. 编译通过能证明动画正确吗？不能证明视觉、输入和中断行为。

3. 只能在手机重现怎么办？以真实手机的复现与录制为准。