АнімаціяСередній

Spring Motion

Рух через загасаючу пружину замість твіну — його можна перервати, перенацілити, і він живий у кожному кадрі.

animationphysicsspringprocedural

Приклади

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

Огляд

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

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

Реалізація — п'ять рядків напівнеявного Ейлера: прискорення зі зміщення, швидкість із прискорення, позиція зі швидкості. Завдяки внутрішньому стану вона компонується безкоштовно: штовхніть швидкість — отримаєте реакцію на удар; посуньте ціль — отримаєте слідування; повісьте на масштаб — отримаєте сплющення. Половина ефектів на цьому сайті — пружина в костюмі.

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

квадрат проносить імпульс крізь кожну зміну цілі

Частота2Hz

Коеф. загасання0.5

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

Панелі UI та курсори, що слідують за ціллюРіги камери та згладжування прицілуРеакції на удар і віддачаПредмети, які тягнуть або кидають

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

Варто

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

Не варто

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

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

⚠Оновлення позиції до швидкості (явний Ейлер) — і в релізі пружина, що детонує на просіданнях кадру.
⚠Один глобальний конфіг пружини на все — камера і цифра шкоди не повинні мати спільний характер.
⚠Прив'язування пружини до цілі, щойно «майже дійшла», з помітним стрибком — замість дати їй осісти нижче порогу сприйняття.

Реалізація

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

Промт

Додай у мій проєкт ефект "Spring Motion": Рух через загасаючу пружину замість твіну — його можна перервати, перенацілити, і він живий у кожному кадрі.

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

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

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

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