Back to Details

slow-in-out-mastery

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Slow In / Slow Out Mastery

Slow In / Slow Out 精通指南

The Physics Principle

物理原理

Objects in the real world don't move at constant speeds—they accelerate from rest and decelerate to stops. Slow in/slow out (also called ease in/ease out) captures this fundamental truth. Without it, animation looks mechanical. With it, motion feels alive.
现实世界中的物体不会以恒定速度运动——它们从静止状态加速，然后减速至停止。Slow in/slow out（也称为ease in/ease out）正是对这一基本规律的体现。没有它，动画会显得机械生硬；有了它，运动就会充满生机。

Core Theory

核心理论

Slow Out (Ease Out): More drawings clustered at the start of a movement. The object accelerates away from its starting position gradually.
Slow In (Ease In): More drawings clustered at the end of a movement. The object decelerates into its final position gradually.
Linear motion: Equal spacing between positions. Rare in nature, useful for mechanical elements or stylistic choice.
Slow Out（Ease Out）：运动起始阶段的帧密度更高。物体从起始位置逐渐加速。
Slow In（Ease In）：运动结束阶段的帧密度更高。物体逐渐减速至最终位置。
Linear motion：各位置间间距相等。在自然界中很少见，适用于机械元素或作为风格化选择。

The Spacing Principle

间距原则

Traditional animators controlled this through drawing spacing:
  • Tight spacing = slow movement (drawings close together)
  • Wide spacing = fast movement (drawings far apart)
Digital animators control this through easing curves—mathematical functions that describe how values change over time.
传统动画师通过绘制间距来控制这一效果：
  • 紧密间距 = 慢速运动（帧之间距离近）
  • 宽松间距 = 快速运动（帧之间距离远）
数字动画师则通过easing curves来控制——这是一种描述数值随时间变化的数学函数。

Common Easing Functions

常见缓动函数

  • Ease Out: Fast start, slow end (70% of UI animations)
  • Ease In: Slow start, fast end (exits, departures)
  • Ease In Out: Slow start and end (elegant, deliberate)
  • Linear: Constant rate (mechanical, looping)
  • Custom bezier: Precise control for specific feels
  • Ease Out：快启慢停（70%的UI动画会使用）
  • Ease In：慢启快停（适用于退出、离开场景）
  • Ease In Out：慢启慢停（优雅、从容）
  • Linear：恒定速率（机械感、循环场景）
  • Custom bezier：为特定质感提供精准控制

Interaction with Other Principles

与其他动画原理的交互

Timing is modified by easing: The same duration feels different with different easing. Ease out feels faster than ease in at identical durations.
Anticipation often uses ease in: The wind-up accelerates before the fast action.
Follow through uses ease out: Settling motion decelerates to rest.
Squash/stretch intensity follows easing: More deformation during fast phases, less during slow phases.
缓动会调整时长感知：相同的时长搭配不同的缓动效果，给人的感受截然不同。相同时长下，Ease Out会比Ease In感觉更快。
预备动作（Anticipation）常使用Ease In：蓄力阶段加速，随后进入快速动作。
跟随动作（Follow through）使用Ease Out：收尾运动逐渐减速至静止。
挤压/拉伸（Squash/stretch）的强度随缓动变化：快速阶段变形更大，慢速阶段变形更小。

Domain Applications

领域应用

UI/Motion Design

UI/动效设计

  • Page transitions: Ease out for entrances (fast appearance, settle), ease in for exits
  • Modals: Ease out scale-up for friendly, non-jarring appearance
  • Buttons: Ease out on press feedback (immediate response, smooth settle)
  • Loading: Linear for progress bars (predictable), ease for spinners (organic)
  • Hover states: Quick ease out to start, ease in out for smooth feel
  • 页面过渡：入场使用Ease Out（快速出现，平稳落地），退场使用Ease In
  • 模态框：使用Ease Out缩放呈现，友好且不突兀
  • 按钮：按压反馈使用Ease Out（即时响应，平稳收尾）
  • 加载动画：进度条使用Linear（可预测），加载 spinner 使用缓动效果（更自然）
  • 悬停状态：快速Ease Out启动，Ease In Out实现平滑质感

Character Animation

角色动画

  • Jumps: Slow out from ground (acceleration), slow in to peak (deceleration), fast middle
  • Head turns: Slow out from rest, slow in to new direction
  • Blinks: Fast down (almost linear), slow out up (lids dragging)
  • Weight shifts: Heavy easing reflects mass
  • 跳跃：离地时Slow Out（加速），到达顶点时Slow In（减速），中间阶段快速
  • 转头：从静止状态Slow Out启动，转向新方向时Slow In
  • 眨眼：快速向下（近乎Linear），缓慢向上（眼睑拖动感）
  • 重心转移：强烈的缓动效果体现重量感

Motion Graphics

动态图形

  • Text reveals: Staggered ease outs create cascading arrivals
  • Logo animations: Carefully crafted curves define brand personality
  • Data visualization: Ease out for growth, ease in for decrease
  • 文字揭示：交错的Ease Out效果营造层叠出现的视觉
  • Logo动画：精心设计的曲线定义品牌个性
  • 数据可视化：增长效果使用Ease Out，下降效果使用Ease In

Game Feel

游戏手感

  • Camera movement: Ease in out for cinematic, quick ease out for responsive
  • Character control: Ease curves define how "tight" or "floaty" movement feels
  • Impact effects: Sharp ease in creates punch
  • 镜头运动：Ease In Out用于电影感镜头，快速Ease Out用于响应式操作
  • 角色控制：缓动曲线定义运动的“紧绷感”或“漂浮感”
  • 冲击效果：尖锐的Ease In营造冲击力

Common Mistakes

常见误区

  1. Linear everything: Motion feels robotic and sterile
  2. Too much easing: Overly soft motion feels sluggish, unresponsive
  3. Wrong easing direction: Ease in on entrances feels reluctant; ease out on exits feels like the element doesn't want to leave
  4. Ignoring context: Playful UIs need bouncier curves; professional UIs need subtler easing
  1. 全部使用Linear：运动显得机械、刻板
  2. 过度使用缓动：过于柔和的运动显得迟缓、缺乏响应
  3. 缓动方向错误：入场使用Ease In会显得不情愿；退场使用Ease Out会给人元素不愿离开的感觉
  4. 忽略场景语境：活泼的UI需要更有弹性的曲线；专业UI需要更细腻的缓动

The Bounce and Elastic Extensions

弹跳与弹性扩展

Beyond basic easing:
  • Bounce: Overshoot with diminishing oscillation (playful, energetic)
  • Elastic: Overshoot with wobble (stretchy, cartoony)
  • Back: Slight pullback before motion (adds anticipation)
除基础缓动外：
  • Bounce：带衰减振荡的过冲效果（活泼、有活力）
  • Elastic：带 wobble 的过冲效果（有弹性、卡通感）
  • Back：运动前轻微回拉（增加预备感）

The 80/20 Rule

80/20原则

For most UI work: use ease out for 80% of animations (elements responding to user action). Ease out communicates responsiveness—"I heard you and I'm moving." Reserve ease in for departures and de-emphasis.
对于大多数UI工作：80%的动画使用Ease Out（响应用户操作的元素）。Ease Out传达响应感——“我接收到你的指令，正在执行”。将Ease In留给退场和弱化场景。

Implementation Heuristic

实施准则

Default to ease out (fast start, slow end) for element appearances and responses. Use ease in for exits. Use ease in out for autonomous animations (not triggered by user). Adjust curve intensity based on brand personality—aggressive curves for dynamic brands, subtle curves for calm brands.
元素出现和响应用户操作时，默认使用Ease Out（快启慢停）。退场时使用Ease In。自主动画（非用户触发）使用Ease In Out。根据品牌个性调整曲线强度——动态品牌使用强烈曲线，沉稳品牌使用细腻曲线。