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

Easing (Slow In / Slow Out)

Розгін на вході в рух і гальмування на виході замість сталої швидкості.

animation-principlemotionuicurves

Приклади

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

Огляд

Ізінг формує швидкість руху в часі: він починається повільно, розганяється і гальмує до цілі — класичний «slow in / slow out» із 12 принципів анімації, у коді відомий як криві ease-in-out.

Це працює, бо ніщо фізичне не рухається зі сталою швидкістю: реальні об'єкти мають масу, тож розганяються і гальмують. Лінійний рух — найгучніший сигнал «це комп'ютер»: око позначає його як механічний ще до того, як глядач встигає пояснити чому.

Крива — це ще й регулятор тону: сильний ізінг із довгим осіданням відчувається м'яким і розкішним, різкий ease-out — жвавим і чуйним, а різні степені кривої на тому самому русі в 300 мс дають цілком різні характери.

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

та сама відстань і час — різниться лише кривалінійнийз пом'якшенням

Тривалість800ms

Степінь кривої3

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

Панелі UI, що заїжджають і виїжджаютьПерельоти камери між цілямиПредмети, що летять до лічильникаБудь-який рух, який зараз виглядає лінійним

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

Варто

✓Робіть ізінг типовим для кожного твіну — лінійність має бути свідомим винятком (смуги завантаження, стрілки годинника, конвеєри).
✓Обирайте сімейство за наміром: ease-out для реакцій на інпут (відчувається миттєво), ease-in-out для того, що рухається самостійно.
✓Тримайте UI-ізінги короткими (150–350 мс) — форма кривої читається й на малих тривалостях, а довгі твіни в UI відчуваються млявими.

Не варто

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

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

⚠Лінійне обертання чи рух на декоративних елементах, що миттєво здешевлює відполірований візуал.
⚠Ізінг на самій властивості, але не на супутніх — панель їде плавно, а її тінь чи дочірні елементи стрибають окремо.
⚠Драматичні bounce/elastic криві на частих взаємодіях — за кілька хвилин «приємно» перетворюється на «виснажливо».

Реалізація

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

Промт

Додай у мій проєкт ефект "Easing (Slow In / Slow Out)": Розгін на вході в рух і гальмування на виході замість сталої швидкості.

Як це працює: Ізінг формує швидкість руху в часі: він починається повільно, розганяється і гальмує до цілі — класичний «slow in / slow out» із 12 принципів анімації, у коді відомий як криві ease-in-out.

Рекомендації:
- Робіть ізінг типовим для кожного твіну — лінійність має бути свідомим винятком (смуги завантаження, стрілки годинника, конвеєри).
- Обирайте сімейство за наміром: ease-out для реакцій на інпут (відчувається миттєво), ease-in-out для того, що рухається самостійно.
- Тримайте UI-ізінги короткими (150–350 мс) — форма кривої читається й на малих тривалостях, а довгі твіни в UI відчуваються млявими.

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

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