NEW BOT Телеграм, страница

📉

Easing Functions: що це таке?

Думаю, всі бачили готові інструменти типу Ease-In, Ease-Out, Ease-In-Out, або, наприклад, як кнопка плавно збільшується при натисканні, а потім так само плавно повертається у свій розмір.

Але чи знаєте ви, що стоїть за цими термінами з точки зору математики?

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

Замість рівномірного руху, ми отримуємо:
• повільний старт і прискорення (Ease-In)
• швидкий старт і плавне гальмування (Ease-Out)
• або поєднання обох ефектів (Ease-In-Out)

Це дозволяє анімаціям виглядати плавно, природно і живо, імітуючи закони фізики: інерцію, прискорення, гальмування.

🔹 Easing Functions через математичні формули

Всі ці формули працюють за принципом: беремо час t від 0 до 1 і отримуємо значення від 0 до 1, яке потім можна застосувати до будь-якої шкали: 2D-векторів, 3D-векторів, розмірів UI, обертів тощо.

Тобто t = 0 → початок, t = 1 → кінець, а значення, що повертає функція, показує позицію об’єкта в анімації.

1️⃣ Quadratic (квадратичне easing)

Цей тип easing часто використовують, коли хочеться плавний старт і плавне закінчення руху.
Рух поділений на дві частини за часом t ∈ [0,1]:

Перша половина (t ≤ 0.5) – прискорення (Ease-In)

f(t) = 2⋅t²

• Коли t мале, об’єкт рухається дуже повільно.
• Чим ближче t до 0.5, тим швидше прискорення.
• Це створює ефект легкого старту для об’єкта.

Друга половина (t > 0.5) – уповільнення (Ease-Out)

f(t) = 2⋅t⋅(1−t) + 0.5

• На початку другої половини рух ще швидкий.
• Чим ближче t до 1, тим плавніше об’єкт зупиняється.
• Це створює природне гальмування, без різких кінців.

C# приклад використання:

float InOutQuadBlend(float t)
{
    if(t <= 0.5f)
        return 2.0f * t * t; // прискорення (ease-in)
    
    t -= 0.5f;
    return 2.0f * t * (1.0f - t) + 0.5f; // уповільнення (ease-out)
}

2️⃣ Bézier Blend (Бейзерове згладжування)

Ця формула дає дуже плавний рух без умовних операторів.

f(t) = t²⋅(3 − 2⋅t)

C# приклад:

float BezierBlend(float t)
{
    return t * t * (3.0f - 2.0f * t);
}

Початок руху повільний, середина швидка, кінець – плавне гальмування.

Цього поки достатньо для базового розуміння, але насправді у Easing Functions є ще багато цікавого. Кожна функція має свій крутий і складний графік, який показує, як змінюється швидкість об’єкта протягом часу.

[Практично все можете знайти тут]

👈

🚀

Швидкість через похідну

Easing-функція f(t) показує позицію об’єкта на інтервалі часу t ∈ [0,1].

Щоб дізнатися швидкість, потрібно взяти похідну цієї функції: v(t) = f′(t). Тобто v(t) показує, наскільки швидко об’єкт рухається в кожний момент часу.

1. Для квадратичного easing похідна лінійна, тому об’єкт прискорюється і гальмує рівномірно.

2. Для smoothstep (Bézier Blend) похідна поліноміальна (квадратична форма), що дає більш «м’який» старт і кінець руху.

Не знаю насправді, навіщо вам це може знадобитися 😏, але можливо комусь було цікаво зазирнути під капот анімацій і зрозуміти, як працюють ці плавні рухи. Або хтось відкриє собі нову тему для дослідження.

✈️

Gamedev | #математика #анімацiя #easingFunctions #функції #похідна

Please open Telegram to view this post