АнімаціяПочатковий

Squash & Stretch

Деформація форми вздовж руху, що передає вагу, швидкість і матеріал.

animation-principlejuicephysicality

Приклади

Записано з інтерактивного демо нижче на цій сторінці.

Огляд

Сквош і стретч — найстаріший із класичних 12 принципів анімації: об'єкти витягуються, коли рухаються швидко, і сплющуються при ударі чи різкій зміні напрямку, зберігаючи (у найпростішій версії) видимий об'єм.

Це працює, бо реальні деформівні матеріали справді так поводяться, а в мультиплікації так перебільшують навіть жорсткі об'єкти, щоб передати силу. Зорова система читає деформацію як доказ імпульсу та удару.

Прийом робить речі живими, пружними й фізично присутніми — це різниця між м'ячем, що виглядає як наліпка, і м'ячем, який відчувається як маса, що стрибає.

Інтерактивне демо

Сила сквошу0.3

Швидкість відскоку1.1

Де застосовується

ПлатформерГіперказуалкиMatch-3UI

Найкращі практики

Варто

✓Витягуйте вздовж напрямку руху, сплющуйте вздовж напрямку удару.
✓Тримайте загальний об'єм приблизно сталим — розтяг по одній осі має стискати іншу.
✓Застосовуйте і до елементів UI (кнопки, іконки) у малих дозах — це зчитується як тактильність, а не мультяшність.

Не варто

✕Не застосовуйте до жорстких, очевидно твердих матеріалів (камінь, метал) із мультяшним перебільшенням — руйнується зчитування матеріалу.
✕Не залишайте деформацію після завершення удару чи руху — вона має швидко повертатися.
✕Не масштабуйте нерівномірно без ізінгу — лінійний сквош виглядає механічно, а не пружно.

Поширені помилки

⚠Сквошити колайдер/хітбокс разом із візуальним мешем, ламаючи геймплей.
⚠Одна крива на всі об'єкти незалежно від їхньої уявної ваги та матеріалу.
⚠Перебір, після якого кожен об'єкт виглядає гумовим.

Реалізація

Встав це у свого ШІ-асистента (Cursor, Copilot, Claude), щоб додати ефект у проєкт.

Промт

Додай у мій проєкт ефект "Squash & Stretch": Деформація форми вздовж руху, що передає вагу, швидкість і матеріал.

Як це працює: Сквош і стретч — найстаріший із класичних 12 принципів анімації: об'єкти витягуються, коли рухаються швидко, і сплющуються при ударі чи різкій зміні напрямку, зберігаючи (у найпростішій версії) видимий об'єм.

Рекомендації:
- Витягуйте вздовж напрямку руху, сплющуйте вздовж напрямку удару.
- Тримайте загальний об'єм приблизно сталим — розтяг по одній осі має стискати іншу.
- Застосовуйте і до елементів UI (кнопки, іконки) у малих дозах — це зчитується як тактильність, а не мультяшність.

Чого уникати:
- Не застосовуйте до жорстких, очевидно твердих матеріалів (камінь, метал) із мультяшним перебільшенням — руйнується зчитування матеріалу.
- Не залишайте деформацію після завершення удару чи руху — вона має швидко повертатися.
- Не масштабуйте нерівномірно без ізінгу — лінійний сквош виглядає механічно, а не пружно.

Реалізуй ефект у тому рушії/стеку, який уже використовується в проєкті, і дотримуйся наявного стилю коду. Підключи його там, де це доречно.