Генератор кубічних кривих Безьє: візуальний easing CSS-анімацій

Що таке кубічні криві Безьє?

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

У CSS функція cubic-bezier() контролює easing властивостей transition-timing-function та animation-timing-function. Замість лінійного руху вона дозволяє створювати природні прискорення та сповільнення, що імітують фізику реального світу, роблячи анімації інтерфейсу витонченими та цілеспрямованими.

Розуміння чотирьох контрольних значень

Функція cubic-bezier() приймає чотири значення, що визначають дві контрольні точки на кривій. Ці контрольні точки формують те, як анімація прискорюється та сповільнюється.

• X1 (0-1) — горизонтальна позиція першої контрольної точки, що визначає, коли закінчується фаза початкового прискорення
• Y1 (будь-яке значення) — вертикальна позиція першої контрольної точки, що контролює швидкість початку анімації. Значення більше 1 створюють ефект перевищення
• X2 (0-1) — горизонтальна позиція другої контрольної точки, що визначає, коли починається фаза сповільнення
• Y2 (будь-яке значення) — вертикальна позиція другої контрольної точки, що контролює завершення анімації. Значення більше 1 створюють ефект відскоку

Поширені пресети easing та коли їх використовувати

CSS надає кілька вбудованих ключових слів easing, які відповідають конкретним значенням cubic-bezier. Розуміння цих пресетів допомагає вибрати правильне відчуття для ваших анімацій.

• ease (0.25, 0.1, 0.25, 1.0) — стандарт CSS, починається швидко, потім плавно сповільнюється. Підходить для більшості загальних переходів
• ease-in (0.42, 0, 1.0, 1.0) — починається повільно і прискорюється. Найкраще для елементів, що залишають екран або зникають
• ease-out (0, 0, 0.58, 1.0) — починається швидко і сповільнюється. Ідеально для елементів, що з'являються на екрані
• ease-in-out (0.42, 0, 0.58, 1.0) — повільний початок і кінець з швидшою серединою. Підходить для циклічних анімацій або елементів, що залишаються на екрані
• linear (0, 0, 1, 1) — постійна швидкість від початку до кінця. Використовуйте для індикаторів прогресу, спінерів завантаження або колірних переходів

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

Чи підтримують cubic-bezier() всі браузери?

Так. Функція cubic-bezier() підтримується всіма основними браузерами з IE 10 (2012). Вона є частиною специфікацій CSS Transitions і CSS Animations, які повністю підтримуються в Chrome, Firefox, Safari, Edge та всіх сучасних мобільних браузерах.

Чи можна створити пружинні або відскокові анімації з cubic-bezier()?

Кубічні криві Безьє можуть апроксимувати прості ефекти відскоку, використовуючи значення Y більше 1 (перевищення). Наприклад, cubic-bezier(0.34, 1.56, 0.64, 1) створює легке перевищення. Однак справжня фізика пружини з кількома відскоками потребує CSS spring() (поки не підтримується широко) або JavaScript-бібліотек анімації, таких як GSAP або Framer Motion.

Яка різниця між CSS-переходами та CSS-анімаціями?

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