Генератор CSS Cubic Bezier

Основи функцій розподілу часу в CSS

У веб-розробці плавність переходів та анімацій визначається функціями розподілу часу (timing functions). Вони вказують браузеру, з якою швидкістю має змінюватися властивість елемента протягом усього процесу анімації. Замість рівномірного, монотонного руху, розробники використовують криві безьє третього порядку, які описуються функцією cubic-bezier(x1, y1, x2, y2).

Ця функція є математичною основою для стандартних ключових слів CSS, таких як ease, ease-in, ease-out та ease-in-out. Кожне з цих слів є лише спрощеним позначенням для конкретних фіксованих координат опорних точок. Використання інструменту дозволяє вийти за межі стандартних шаблонів і створити унікальну динаміку руху для властивостей transition-timing-function та animation-timing-function.

Математичний принцип та роль опорних точок

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

• Вісь X відображає плин часу від 0 до 1 (від 0% до 100% тривалості).
• Вісь Y відображає прогрес виконання анімації від 0 до 1 (від початкового до кінцевого стану властивості).

Форму кривої визначають дві опорні точки (контрольні маркери), кожна з яких має власні координати:

• Перша опорна точка визначає поведінку на початку руху і має координати (x1, y1).
• Друга опорна точка керує поведінкою ближче до завершення руху і має координати (x2, y2).

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

Правила налаштування та обмеження параметрів

Для забезпечення коректної роботи браузерних рушіїв під час інтерпретації CSS, на координати опорних точок накладаються суворі обмеження:

1. Обмеження осі X: Значення x1 та x2 повинні суворо перебувати в діапазоні від 0 до 1. Час не може повертатися назад або виходити за межі загальної тривалості анімації.
2. Діапазон осі Y: Значення y1 та y2 можуть виходити за межі стандартного діапазону 0–1. У цьому генераторі встановлено обмеження для Y-координат від -0.70 до 1.70.

Вихід значень Y за межі діапазону 0–1 дозволяє створювати складніші фізичні ефекти:

• Ефект відтягування назад (pull-back): Якщо значення Y стає меншим за 0, елемент спочатку рухається у протилежному напрямку від кінцевої точки, після чого починає основний рух вперед.
• Ефект виходу за рамки (overshoot): Якщо значення Y перевищує 1, елемент пролітає повз свою кінцеву точку, а потім повертається назад, щоб зафіксуватися у фінальному стані.

Робота з інтерфейсом генератора

Інструмент надає візуальне середовище для точного проектування кривих. Користувач може керувати формою кривої двома способами:

• Перетягуванням двох маркерів безпосередньо на графіку.
• Введенням числових значень у поля введення для координат першої та другої опорних точок.

Під час взаємодії з інтерфейсом діють такі правила валідації та керування:

• Якщо ввести некоректне значення (наприклад, число 9 для координати X першої опорної точки) і прибрати фокус із поля, система автоматично скоригує його до максимально дозволеної межі 1.
• Якщо повністю очистити числове поле і зняти з нього фокус, буде відновлено попереднє валідне значення.
• Порожні або нечислові значення ігноруються системою до моменту введення коректних цифр.
• Для точного налаштування можна виділити маркер фокусом і натиснути клавішу зі стрілкою вліво — це змінить значення на мінімальний крок, наприклад, до 0.99.

Для швидкого старту доступні готові шаблони (пресети), серед яких стандартні ease, ease-in, ease-out, ease-in-out, а також складніші варіанти з ефектами виходу за межі: Back In, Back Out та Back In-Out. Наприклад, вибір пресету Back Out автоматично встановлює координати у значення cubic-bezier(0.34, 1.56, 0.64, 1).

У зоні попереднього перегляду відображається графік з підписом ваша крива, на якому точка рухається відповідно до створеної траєкторії. Поруч із нею рухається друга точка з постійною швидкістю (лінійно), що дозволяє наочно порівняти динаміку. Після завершення налаштування можна скопіювати готовий рядок cubic-bezier(x1, y1, x2, y2). У разі успішного копіювання з'явиться статус Copied.

Обмеження однієї кривої Безьє

Попри гнучкість налаштування, математична модель однієї функції cubic-bezier() має фізичні обмеження. Оскільки крива будується лише за допомогою двох контрольних точок між стартом і фінішем, вона може рухатися лише в одному напрямку (можливо, з одноразовим випередженням чи виходом за межі на кінцях) і потім стабілізуватися.

За допомогою однієї функції cubic-bezier() неможливо реалізувати ефекти, які вимагають багаторазової зміни напрямку руху, такі як згасаючий відскок (bounce) або тривалі коливання (elastic). Для таких складних сценаріїв необхідно використовувати покадрову анімацію CSS (@keyframes) або сучасну функцію linear(), яка дозволяє описувати траєкторію за допомогою великої кількості проміжних точок.

Локальна обробка даних

Усі обчислення, рендеринг графіки та симуляція руху точок відбуваються безпосередньо у вашому браузері. Жодні параметри, координати чи налаштування кривих не завантажуються на сервери BroBroGo. Це забезпечує повну автономність процесу проектування в межах поточної вкладки браузера.

Часті запитання

Що означають два маркери та чотири числа? Крива йде від нижнього лівого кута (старт) до верхнього правого (фініш), де час рухається зліва направо, а прогрес — знизу вгору. Два маркери — це опорні точки, які вигинають криву; кожен має координати X та Y, тому разом вони записуються як cubic-bezier(x1, y1, x2, y2). Координата X завжди залишається в межах від 0 до 1, тоді як Y може виходити за верхню або нижню межі, створюючи ефект виходу за рамки або відтягування назад перед фінішем.

Як використовувати отримане значення в CSS? Скопіюйте значення cubic-bezier() та вставте його туди, де вказується функція розподілу часу: transition-timing-function, animation-timing-function або у скорочений запис, наприклад: transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1). Ключові слова ease, ease-in, ease-out та ease-in-out — це просто фіксовані криві cubic-bezier, тому вибір одного з цих пресетів покаже вам точне значення, що стоїть за ключовим словом.

Чи можна створити ефект відскоку або еластичності? Не зовсім. Одинарна крива cubic-bezier може створювати ефекти випередження та виходу за межі (пресети «back» витягують один із маркерів за межі сітки саме для цього), але вона може рухатися лише в одному напрямку до стабілізації. Ефекти відскоку (bounce) або еластичності вимагають зміни напрямку руху кілька разів, що неможливо описати однією кривою; для цього потрібні CSS keyframes або функція linear() з багатьма точками зупину.