squash-stretch-mastery

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Squash & Stretch Mastery

Squash & Stretch 精通指南

The Foundation Principle

基础原理

Squash and stretch is considered the most important of Disney's 12 principles because it solves animation's fundamental problem: making rigid objects feel alive. Developed in the 1930s at Disney, it emerged from observing how real flesh and rubber deform under force while maintaining constant volume.
挤压与拉伸(Squash and Stretch)被认为是迪士尼12大动画原则中最重要的一项,因为它解决了动画的核心问题:让僵硬的物体看起来富有生命力。该原则于20世纪30年代在迪士尼诞生,源自对真实肉身和橡胶在受力时如何变形同时保持体积恒定的观察。

Core Theory

核心理论

Volume Preservation: When an object squashes, it must widen. When it stretches, it must narrow. This constraint creates believability—violate it and objects appear to grow or shrink rather than deform.
Force Visualization: Squash and stretch makes invisible forces visible. A ball squashing on impact shows us the floor's resistance. A character stretching mid-leap reveals velocity and momentum.
体积守恒:物体被挤压时一定会变宽,被拉伸时一定会变窄。这个约束能让动效更具真实感——如果违背这一点,物体看起来就像是在变大或缩小,而不是发生了形变。
受力可视化:挤压与拉伸能让不可见的力变得可视化。球碰撞时的挤压能让我们感受到地面的阻力,角色跳跃到半空时的拉伸能体现出速度和动量。

The Elasticity Spectrum

弹性区间

Not all objects deform equally:
  • High elasticity: Rubber balls, cartoon characters, jelly (extreme deformation)
  • Medium elasticity: Human faces, cloth, muscle (subtle deformation)
  • Low elasticity: Wood, metal, bone (minimal but present micro-deformation)
Even "rigid" objects benefit from 1-2% deformation—it prevents the dead, mechanical feel.
不同物体的形变程度各不相同:
  • 高弹性:橡胶球、卡通角色、果冻(形变程度极高)
  • 中等弹性:人脸、布料、肌肉(形变程度较柔和)
  • 低弹性:木头、金属、骨头(形变极小但仍存在微观形变)
即便是「刚性」物体,加入1-2%的形变也会大有裨益——这能避免死板、机械的观感。

Interaction with Other Principles

与其他原则的配合

Timing amplifies squash/stretch: Fast impacts demand more squash; slow floats need gentle stretch. The deformation amount must match velocity.
Anticipation uses stretch: A character winding up for a jump often stretches slightly before the motion begins.
Follow-through extends it: After landing, the squash ripples through secondary elements (hair, clothing, flesh).
时序会放大挤压/拉伸效果:快速碰撞需要更明显的挤压效果;缓慢漂浮的物体只需要柔和的拉伸。形变程度必须和速度匹配。
预备动作会用到拉伸:角色起跳前的蓄力阶段通常会在动作开始前有轻微的拉伸。
跟随动作会延伸效果:落地后,挤压效果会传导到次级元素(头发、衣物、肉身)上产生涟漪效果。

Domain Applications

各领域应用

UI/Motion Design

UI/动效设计

  • Button press: subtle squash (95-98% height) on tap
  • List items: stretch slightly when pulled beyond bounds (rubber-band scroll)
  • Notifications: squash on arrival, bounce to rest
  • 按钮点击:点按时添加轻微挤压效果(高度压缩至95-98%)
  • 列表项:拉到边界外时轻微拉伸(橡皮筋滚动效果)
  • 通知提醒:到达时挤压,随后弹跳至静止状态

Character Animation

角色动画

  • Facial expressions: cheeks squash on smile, stretch on surprise
  • Walk cycles: torso compresses on contact, extends on passing
  • Emotional beats: extreme stretch for shock, squash for dejection
  • 面部表情:微笑时脸颊挤压,惊讶时脸颊拉伸
  • 走路循环:脚接触地面时躯干压缩,抬腿迈步时躯干舒展
  • 情绪表达:极度拉伸表现震惊,挤压表现低落

Logo Animation

Logo动画

  • Bouncing logos: exaggerated squash creates playful personality
  • Subtle breathing: micro-squash/stretch keeps static logos alive
  • 弹跳Logo:夸张的挤压效果能塑造活泼的个性
  • 微妙呼吸动效:微观的挤压/拉伸能让静态Logo更有生命力

Game Feel

游戏手感优化

  • Jump arcs: stretch on ascent, squash on landing
  • Hit reactions: brief squash sells impact before knockback
  • Collectibles: rhythmic pulse using gentle squash/stretch
  • 跳跃弧线:上升时拉伸,落地时挤压
  • 受击反应:击退前的短暂挤压能强化碰撞感
  • 收集物:用柔和的挤压/拉伸实现有节奏的脉动效果

Common Mistakes

常见错误

  1. Breaking volume: Objects appear to grow/shrink instead of deform
  2. Uniform deformation: Real objects deform more where force is applied
  3. Over-application: Subtle contexts need 1-5%, not cartoon 50%
  4. Static extremes: Deformation should ease in/out, never snap
  1. 违背体积守恒:物体看起来是在变大/缩小,而不是发生形变
  2. 形变均匀:真实物体在受力点的形变程度更高
  3. 过度使用:柔和场景只需要1-5%的形变,而不是卡通风格的50%
  4. 静态极值:形变应该有缓入缓出效果,不能生硬跳变

Implementation Heuristic

实现参考

Start with 10% deformation for energetic motions, 2-3% for subtle polish. Adjust based on material and tone. When in doubt, less is more—squash/stretch should be felt, not consciously noticed.
充满活力的动效可以从10%的形变开始调试,细腻的优化场景可以从2-3%开始。根据材质和风格调性调整。拿不准的时候,越少越好——挤压与拉伸应该让用户感受到,而不是被刻意注意到。