timing-calibration

时间校准

运用迪士尼的时间节奏原则，让动画速度恰到好处。

问题表现

• 收到“太慢”或“太快”的反馈
• 动画感觉不一致
• 类似操作的速度不同
• 用户需要等待动画
• 动效感觉生硬或不自然

按原则诊断

时间节奏

问题：持续时间与操作类型不匹配
修复：微交互：100-150ms。过渡：200-400ms。复杂揭示：400-600ms。UI 动画绝不超过 1s。

缓入和缓出

问题：线性时间节奏感觉生硬
修复：使用缓动。入场使用缓出（快速开始，平缓结束）。离场使用缓入（缓慢开始，快速结束）。

弧线

问题：直线运动的速度不合适
修复：曲线路径需要比直线路径更多时间。延长弧线运动的持续时间。

舞台调度

问题：多种速度相互冲突
修复：相似元素应以相近的速度播放动画。让时间节奏保持协调。

次要动作

问题：次要动画与主要动画的相对速度不合适
修复：次要动作应比主要动作稍慢。这样能形成自然的层次。

时间节奏尺度

类别	持续时间	适用场景
即时	0-100ms	悬停状态、微反馈
快速	100-200ms	按钮、切换、小型元素
正常	200-300ms	卡片、模态框、大多数过渡
慢速	300-400ms	页面过渡、大型元素
从容	400-600ms	复杂揭示、新手引导

快速修复

1. 从 200ms 开始 - 再逐步调整
2. 元素越大，持续时间越长 - 大小会影响感知速度
3. 距离会影响时间节奏 - 移动距离越长，持续时间越长
4. 建立时间节奏尺度 - 使用 3-4 个一致的数值
5. 以 2 倍速测试 - 如果更快仍然合适，就采用更快的速度

故障排查清单

• 大多数 UI 动画的持续时间是否低于 400ms？
• 相似元素的时间节奏是否相近？
• 是否应用了缓动（而非线性）？
• 移动幅度较大的动画是否有更长的持续时间？
• 测试：加快 30%——仍然清晰易懂吗？
• 测试：减慢 30%——会感觉拖沓吗？
• 用户是否需要等待动画？
• 是否符合平台惯例（iOS/Android/Web）？

代码模式

:root {
  /* Timing scale */
  --duration-instant: 50ms;
  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-slow: 350ms;
  --duration-deliberate: 500ms;

  /* Easing */
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Size-aware timing */
.small-element { transition-duration: var(--duration-fast); }
.medium-element { transition-duration: var(--duration-normal); }
.large-element { transition-duration: var(--duration-slow); }