Squash Stretch Mastery

dylantarre/animation-principles/skills/11-by-principle-focus/squash-stretch-mastery

作者 dylantarre83597134ba8f无许可证99 个星标收录于 2026年10月8日更新于 2026年10月8日仓库9个月前更新

Use when implementing deformation effects, bounce animations, impact responses, or any motion requiring organic elasticity and weight expression.

仅含说明Design & Creative
AI 生成的概览

讲解挤压与拉伸动画原理,以及如何将其应用于动态、角色、标志和游戏动画。

功能
说明挤压与拉伸这一动画原理,包括体积守恒、力的可视化,以及从橡胶到刚性材料的弹性谱系。描述该原理与节奏、预备动作和跟随动作的配合方式,并给出界面与动态设计、角色动画、标志动画和游戏手感方面的应用要点。还列出常见错误,以及一个实现经验法则:有活力的动作约 10% 变形,细微修饰约 2-3%。
适用场景
适用于实现变形效果、弹跳动画、撞击反应,或任何需要有机弹性和重量感的动作。也适合在审阅动画作品时检查体积破坏、均匀变形或过度应用等问题。
运行要求
无需任何工具、软件包、运行时、凭据或网络访问;仅为说明性内容,不附带脚本。

Squash & Stretch Mastery

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.

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.

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

  • 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

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

  • Bouncing logos: exaggerated squash creates playful personality
  • Subtle breathing: micro-squash/stretch keeps static logos alive

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

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.

来源与署名

来源:dylantarre/animation-principles位于skills/11-by-principle-focus/squash-stretch-mastery提交8359713

许可证: 无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架