Back to Details

timing-calibration

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Timing Calibration

时间校准

Get animation speed right using Disney's timing principles.
运用迪士尼的时间原则，让动画速度恰到好处。

Problem Indicators

问题表现

  • "Too slow" or "too fast" feedback
  • Animations feel inconsistent
  • Similar actions have different speeds
  • Users wait for animations
  • Motion feels robotic or unnatural
  • 反馈“太慢”或“太快”
  • 动画效果不一致
  • 相似操作的动画速度不同
  • 用户需要等待动画完成
  • 动效显得机械或不自然

Diagnosis by Principle

基于动画原则的问题诊断

Timing

Timing

Issue: Duration doesn't match action type Fix: Micro-interactions: 100-150ms. Transitions: 200-400ms. Complex reveals: 400-600ms. Never exceed 1s for UI.
问题：时长与操作类型不匹配 修复方案：微交互：100-150ms。过渡动画：200-400ms。复杂展开动画：400-600ms。UI动画时长绝不要超过1秒。

Slow In and Slow Out

Slow In and Slow Out

Issue: Linear timing feels mechanical Fix: Use easing. Ease-out for entrances (fast start, soft landing). Ease-in for exits (soft start, quick finish).
问题：线性时间动效显得机械 修复方案：使用easing。入场动画使用Ease-out（快速启动，柔和收尾）。退场动画使用Ease-in（柔和启动，快速收尾）。

Arcs

Arcs

Issue: Straight-line motion at wrong speed Fix: Curved paths need more time than straight paths. Increase duration for arc motion.
问题：直线运动的速度不合适 修复方案：曲线路径的动画时长需要比直线路径更长。增加弧线运动的时长。

Staging

Staging

Issue: Multiple speeds compete Fix: Similar elements should animate at similar speeds. Create timing harmony.
问题：多种动画速度互相冲突 修复方案：相似元素的动画速度应保持一致，营造时间协调性。

Secondary Action

Secondary Action

Issue: Secondary animations at wrong relative speed Fix: Secondary actions should be slightly slower than primary. Creates natural hierarchy.
问题：次要动画的相对速度不合适 修复方案：次要动画的速度应略慢于主要动画，构建自然的层级关系。

Timing Scale

时间尺度表

CategoryDurationUse For
Instant0-100msHover states, micro-feedback
Fast100-200msButtons, toggles, small elements
Normal200-300msCards, modals, most transitions
Slow300-400msPage transitions, large elements
Deliberate400-600msComplex reveals, onboarding
类别时长适用场景
即时0-100ms悬停状态、微反馈
快速100-200ms按钮、开关、小型元素
常规200-300ms卡片、模态框、大多数过渡动画
缓慢300-400ms页面过渡、大型元素
刻意400-600ms复杂展开动画、引导流程

Quick Fixes

快速修复方案

  1. Start with 200ms - Adjust from there
  2. Larger elements = longer duration - Size affects perceived speed
  3. Distance affects timing - Longer travel = longer duration
  4. Create a timing scale - Use 3-4 consistent values
  5. Test at 2x speed - If too slow works, use it
  1. 从200ms开始 - 在此基础上调整
  2. 元素越大，时长越长 - 尺寸会影响感知速度
  3. 距离影响时长 - 移动距离越长，时长越久
  4. 建立时间尺度 - 使用3-4个统一的时长值
  5. 以2倍速度测试 - 如果加速后仍合适，就使用这个速度

Troubleshooting Checklist

故障排查清单

  • Is duration under 400ms for most UI?
  • Do similar elements have similar timing?
  • Is easing applied (not linear)?
  • Does larger movement have longer duration?
  • Test: Speed up by 30%—still readable?
  • Test: Slow down by 30%—feels sluggish?
  • Are users waiting for animations?
  • Compare to platform conventions (iOS/Android/Web)
  • 大多数UI动画的时长是否在400ms以内？
  • 相似元素的动画时长是否一致？
  • 是否应用了easing（而非线性）？
  • 移动距离更长的动画是否有更长的时长？
  • 测试：加速30%——仍然清晰可读吗？
  • 测试：减速30%——是否显得拖沓？
  • 用户是否需要等待动画完成？
  • 是否与平台惯例（iOS/Android/Web）一致？

Code Pattern

代码模式

css
: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); }
css
: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); }