Back to Details

universal-timing

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Universal Timing Principles

通用计时原则

Some animation truths transcend duration. These principles work at 50ms and 5000ms. Master these to make good timing decisions at any scale.
有些动画规律不受时长限制。这些原则在50ms和5000ms的场景下都适用。掌握这些原则，就能在任何尺度下做出合理的计时决策。

Disney Principles - Universal Application

Disney动画原则——通用应用

Always True

始终适用的原则

Squash & Stretch: Scale proportionally - 5% at 100ms, 30% at 2000ms. Never eliminate, always proportional.
Anticipation: Ratio stays constant - anticipation is 20-30% of main action duration, regardless of total time.
Staging: One clear focus - whether instant or cinematic, only one thing should demand primary attention.
Straight Ahead/Pose to Pose: Complexity matches duration - short = straight ahead, long = pose to pose.
Follow Through: Present at all durations - even 100ms can have micro-overshoot. Scale matches duration.
Slow In/Slow Out: Always ease - linear motion looks mechanical at every duration.
Arcs: Natural paths scale - short animations = subtle curves, long animations = sweeping arcs.
Secondary Action: Supports, never competes - true at 50ms and 5000ms.
Timing: Duration determines perception - same motion reads differently at different speeds.
Exaggeration: Match duration and importance - longer duration allows more exaggeration.
Solid Drawing: Transforms must match - consistency matters regardless of speed.
Appeal: The goal - animation should enhance, not impede, at any duration.
Squash & Stretch：按比例缩放——100ms时缩放5%，2000ms时缩放30%。绝对不能省略，始终保持比例协调。
Anticipation：比例保持恒定——预备动作时长占主要动作时长的20-30%，与总时长无关。
Staging：单一清晰焦点——无论是瞬时动画还是电影级动画，都应该只有一个元素成为主要视觉焦点。
Straight Ahead/Pose to Pose：复杂度与时长匹配——短动画采用逐帧绘制（Straight Ahead），长动画采用关键帧绘制（Pose to Pose）。
Follow Through：所有时长场景下都需存在——即使是100ms的动画也可以有微幅过冲效果，幅度与时长成正比。
Slow In/Slow Out：始终使用缓动——线性运动在任何时长下都会显得机械生硬。
Arcs：自然运动路径随尺度调整——短动画采用细微曲线，长动画采用大幅弧线。
Secondary Action：辅助而非竞争——在50ms和5000ms的场景下均需遵循这一原则。
Timing：时长决定感知——相同的运动在不同速度下给人的感受截然不同。
Exaggeration：与时长和重要性匹配——时长越长，可加入的夸张效果越多。
Solid Drawing：变形需保持一致——无论速度如何，一致性都至关重要。
Appeal：最终目标——动画在任何时长下都应起到增强效果的作用，而非干扰用户。

Universal Ratios

通用比例规则

The Golden Ratio of Animation Timing

动画计时的黄金比例

Anticipation : Action : Follow-through
    20%      :   50%  :     30%

Example at 500ms:
  Anticipation: 100ms
  Main action: 250ms
  Follow-through: 150ms
Anticipation : Action : Follow-through
    20%      :   50%  :     30%

Example at 500ms:
  Anticipation: 100ms
  Main action: 250ms
  Follow-through: 150ms

Stagger Ratio

交错动画比例

Optimal stagger delay: 10-20% of item duration

Item duration: 300ms
Stagger delay: 30-60ms between items
Optimal stagger delay: 10-20% of item duration

Item duration: 300ms
Stagger delay: 30-60ms between items

Easing Intensity vs Duration

缓动强度与时长的关系

Duration < 150ms: ease-out only (no time for ease-in)
Duration 150-400ms: ease-out or custom
Duration 400ms+: full ease-in-out possible
Duration < 150ms: ease-out only (no time for ease-in)
Duration 150-400ms: ease-out or custom
Duration 400ms+: full ease-in-out possible

Easing That Works Everywhere

通用缓动函数

css
/* Universal ease-out - works at any duration */
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

/* Universal natural motion */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

/* Universal bounce - scale amplitude with duration */
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
css
/* Universal ease-out - works at any duration */
transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

/* Universal natural motion */
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

/* Universal bounce - scale amplitude with duration */
transition-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);

Universal Laws

通用法则

  1. Shorter distances = shorter durations - motion should feel proportional to space.
  2. Bigger elements move slower - perceived weight requires more time.
  3. Enter fast, exit faster - users care about what's arriving, not leaving.
  4. Context determines tolerance - first visit allows longer animation than repeat use.
  5. Attention is finite - compete for it wisely, regardless of duration.
  6. Physics provides intuition - match real-world expectations at any speed.
  7. Easing is mandatory - linear motion looks wrong at every duration.
  8. Test at extremes - if it works at 2x and 0.5x, it's robust.
  1. 距离越短，时长越短——运动时长应与移动空间成正比。
  2. 元素越大，移动越慢——感知重量越大，所需时间越长。
  3. 进入快，退出更快——用户更关注即将出现的内容，而非正在消失的内容。
  4. 上下文决定容忍度——首次访问时可使用较长动画，重复访问时则需缩短。
  5. 注意力是有限资源——无论时长如何，都要合理争夺用户注意力。
  6. 物理规律提供直觉——无论速度如何，都要符合现实世界的预期。
  7. 缓动是必须的——线性运动在任何时长下都会显得违和。
  8. 在极端场景下测试——如果动画在2倍速和0.5倍速下都表现良好，说明它足够健壮。

Duration Selection Framework

时长选择框架

What should the user feel?
├── Instant (< 100ms)
│   └── Confirmation, responsiveness
├── Quick (100-300ms)
│   └── Efficiency, polish
├── Standard (300-500ms)
│   └── Clarity, communication
├── Deliberate (500-1000ms)
│   └── Importance, attention
└── Dramatic (> 1000ms)
    └── Story, emotion, memory
用户应该获得怎样的感受？
├── 瞬时（< 100ms）
│   └── 确认感、响应性
├── 快速（100-300ms）
│   └── 高效感、精致感
├── 标准（300-500ms）
│   └── 清晰感、传递信息
├── 刻意（500-1000ms）
│   └── 重要性、吸引注意力
└── 戏剧性（> 1000ms）
    └── 故事性、情感、记忆点

Key Insight

核心见解

Duration is a design decision. It communicates importance, guides attention, and shapes emotion. The Disney principles are tools - timing is how you wield them. Master the principles, then let context determine duration.
时长是一项设计决策。它传递重要性、引导注意力并塑造情感。Disney原则是工具——而计时是你使用这些工具的方式。先掌握原则，再根据上下文决定时长。