Anticipation prepares the audience for action. Discovered through theatrical observation, Disney animators found that without a preparatory movement, actions appeared to happen "out of nowhere"—confusing rather than exciting. The principle: before any significant action, there must be a counter-movement.
Newton's Third Law, Visualized: Physical actions require preparation. A pitcher winds up before throwing. A cat crouches before pouncing. Anticipation makes this mechanical necessity visible and dramatic.
Attention Direction: Anticipation tells viewers where to look and what to expect. It transforms surprise into suspense—a more engaging emotional state.
Physical preparation: The body must coil to spring (jumping, throwing, punching)
Mental preparation: The audience needs time to register incoming action
Emotional preparation: Building tension before release amplifies impact
物理层面的准备:身体必须先收缩蓄力才能爆发(如跳跃、投掷、出拳)
心理层面的准备:观众需要时间来感知即将发生的动作
情绪层面的准备:在释放张力前先积累紧张感,以增强动作的冲击力
Timing Dynamics
时机动态
Duration signals magnitude: Brief anticipation (2-4 frames) for small actions. Extended anticipation (12-24 frames) for major moments. A full second of wind-up tells viewers something significant is coming.
Inverse proportion: The bigger the anticipation, the faster the following action can be while remaining readable.
Button hover states: subtle scale-up anticipates the click response
Page transitions: brief pause or micro-movement before navigation
Loading states: pulsing or winding animation before content appears
Drag interactions: slight resistance before element "releases"
按钮悬停状态:轻微放大以预示点击反馈
页面转场:导航前的短暂停顿或微动作
加载状态:内容出现前的脉冲或缠绕动画
拖拽交互:元素“释放”前的轻微阻力
Character Animation
角色动画
Jump preparation: full crouch with held pose before launch
Punch delivery: shoulder rotation backward before forward strike
Emotional shifts: beat of stillness before reaction
跳跃预备:起跳前完全蹲下并保持姿势
出拳动作:向前击打前先向后转动肩膀
情绪转变:做出反应前的短暂静止
Micro-interactions
微交互
Toggle switches: brief compression before snap to new state
Notifications: subtle entrance from off-screen before settling
Tooltips: micro-delay with subtle scale from origin point
切换开关:切换到新状态前的短暂收缩
通知:从屏幕外轻微进入后再稳定下来
提示框:从原点轻微放大并伴随微小延迟
Game Design
游戏设计
Attack wind-ups: readable tells that allow player response
Ability charging: visual buildup matching power accumulation
Boss patterns: exaggerated anticipation creates learnable mechanics
攻击蓄力:清晰的预示动作,让玩家有时间做出反应
技能蓄力:与能量积累匹配的视觉铺垫
Boss机制:夸张的Anticipation形成可学习的机制
Common Mistakes
常见误区
Skipping anticipation entirely: Actions feel robotic and sudden
Over-anticipating minor actions: Creates sluggish, over-animated feel
Wrong direction: Anticipation must oppose the action direction
Uniform timing: Vary anticipation length based on action importance
完全省略Anticipation:动作会显得机械且突兀
对小动作过度使用Anticipation:会导致动作迟缓、动画过度
方向错误:Anticipation的方向必须与动作方向相反
时机统一化:应根据动作的重要性调整Anticipation的时长
The Reversal Technique
反转技巧
For comedic or surprising effect, violate anticipation expectations. Long wind-up followed by tiny action. No wind-up before massive action. The principle's power is proven by how jarring its absence feels.
Every action above 200ms duration should have anticipation. Scale anticipation duration to 30-50% of the main action. When actions feel "empty," anticipation is usually missing.