Від автора: у цій статті ми поринемо в чудовий світ функцій кривих Безьє і отримаємо повний контроль над CSS анімацією. Давайте дізнаємося, як поліпшити css анімацію.
Плавні переходи і анімація справили фурор в веб-розробці, і це заслужено. Відмінний інструмент, простий, корисний, здатний зробити з просто хороших front-end компонентів і інтерфейсів цукерку. Спосіб оголошення анімації і переходів схожі, для цього потрібні лише дві речі:
У випадку з переходами необхідно вибрати властивість, яка буде піддано плавного переходу. Для анімації ж вибирається keyframe блок.
Потім необхідно оголосити тривалість затримки анімації або переходу.
Типовий CSS код:
.box {
opacity: 0;
transition: opacity 0.3 s;
}
.cat {
animation: fadeIn 0.3 s;
}
@keyframes fadeIn {
0% { opacity: 0; }
100% { opacity: 1; }
}
Біля переходів і анімації є ще одна спільна властивість, вычисляющее проміжні значення станів — transition timing function. Даний параметр необов’язковий, за замовчуванням стоїть ease. За замовчуванням нам доступні наступні таймінг функції:
ease – анімація трохи прискорюється до середини і сповільнюється в кінці
ease-in – повільний початок і поступове прискорення до кінця
ease-out – швидкий початок та поступове затухання до кінця
ease-in-out – повільний початок, прискорення до середини і поступове згасання до кінця
linear – постійна швидкість анімації
step-start – перестрибує в останній стан анімації в першому кадрі
step-end – перестрибує в останній стан в останньому кадрі анімації
steps(n, start|end) – перестрибує через “n”‘е кількість кадрів анімації, тим самим “з’їдаючи” або початковий або кінцевий кадр
При роботі з простими переходами і анімацією вам, швидше за все, не знадобляться функції step – дані функції більше підходять для мультяшною keyframe анімації, яка вкрай рідко використовується. Ви, можливо, використовували безліч інших вбудованих таймінг функцій для поліпшення кнопок, меню, модальних вікон та інших компонентів з відстежуваними станами. Але ви коли-небудь думали про те, що незважаючи на ефект накопичення анімації, вона все одно виглядає якось не так?
Кубічна крива Безьє йде на допомогу!
Трохи відійдемо від теми. Люди, які працювали з анімацією, знають, що ПО типу Flash, After Effects йде з купою функцій анімації — easeInQuint, easeOutSine, easeInOutCubic – і це тільки 3 з великого списку. З допомогою ключових слів CSS типу ease і linear ми не можемо викликати ці функції. Однак варто сказати, що всі ці функції, включаючи функції з ключовими словами в CSS, це всього лише функції кубічної кривої Безьє. Але що таке ця кубічна крива Безьє? Звернемо увагу на зображення нижче:
На малюнку представлений граф з максимальним значенням по осях 1 або декартова система координат кубічної кривої Безьє. Примітка: точки в графі можуть виходити за межі 1 тільки по осі У (осі властивості), а от по осі Х цього робити не можна (осі часу). Сірі лінії – осі, помаранчева лінія – крива таймінг функції, блакитні лінії з точками – контрольні точки і лінії кривої Безьє. За допомогою контрольних точок можна змінювати форму кривої, крім цього точки – це одна з фундаментальних концепцій для векторної графіки типу Adobe Illustrator.
Ми можемо анімувати окремий вид кривої Безьє — кубічну криву – з допомогою чотирьох контрольних точок її можна математично поставити в площині графа, показаного вище. Проте в CSS-анімації нас турбують тільки точки p1 та p2, так як точка p0 завжди буде 0,0, а точка p3 завжди буде 1,1. Так як же вибрати функцію кубічної кривої Безьє в CSS? Ось так:
cubic-bezier(x1, y1, x2, y2)
де:
x1 – координата Х контрольної точки p1
y1 – координата У контрольної точки p1
x2 – координата Х контрольної точки p2
y2 – координати У контрольної точки p2
Граф вище я створив тільки для того, щоб продемонструвати вам, як виглядає ця крива, але ви можете уявити, що кубічна крива задана наступним чином:
cubuc-bezier(0.5, 0.31, 0.84, 0.05)
Якщо ви в ладах з математикою чи розумієте принцип роботи кривих Безьє або функцій анімації в типовому ПЗ, то ви відразу побачите ту міць, яка прихована в цій функції. Подумайте так: анімація повинна розповідати історію і направляти контекст і настрій користувача до заданого нами стану. Якщо б вся анімація в інтернеті була тільки лінійною, вона виглядала б однаково і викликала б одне настрій. Якщо після дії користувача вам потрібно було б показати вкрай важливе діалогове вікно, ви напевно хотіли б привернути увагу відвідувача своєї таймінг функцією. Кубічні криві Безьє дають нам повний контроль.
Я не дружу з математикою – допоможіть
Якщо ви не в ладах з числами або не можете візуалізувати у себе в голові кінцевий результат, не бійтеся. В мережі повно ресурсів, які можуть допомогти вам. Перший і найважливіший – з допомогою швидкого пошуку в Google ви зможете знайти масу прикладів портування функцій анімації в CSS еквівалент кубічної функції Безьє. Два ресурсу, якими користуюся я:
easings.net – Колекція стандартних функцій (таймінг функцій) і їх реалізацій в CSS у вигляді кубічної кривої Безьє
cubic-bezier.com – Експериментальний майданчик і інтерфейс для створення свій власної функції, яку можна подивитися там же в реальному часі.
Обидва ресурсу гарні, і краще використовувати їх разом.
Невеликий приклад
Давайте створимо невелике демо і порівняємо дві таймінг функції. У демо нижче два блакитних блоку однакового розміру. По кліку на кнопку вони переїжджають на 20rem вправо з затримкою в 600ms. Блоки повністю ідентичні, відрізняються лише таймінг функції. Перший блок приймає функцію ease in, яка в CSS доступна по ключовому слову ease in. Другий блок приймає функцію ease in out back, побачити її у дії можна на сайті easings.net. Результат:
Не знаю як ви, але мені друга анімація виглядає набагато краще! Ми доклали трохи більше зусиль і отримали приголомшливий результат.
Висновок
Розуміння кубічний кривих Безьє є однією зі складових при вивченні CSS-анімації. Друга складова – вміння їх застосовувати. Ніколи не забувайте, що анімація це не просто «натиснув-і вперед», їй не можна зловживати. Анімація – результат довгої практики, і ми повинні ставитися до неї з повагою. Таймінг функції передають різний зміст, і тільки від вас залежить, що ви передасте правильний посил чи ні. Кубічні криві Безьє можуть допомогти вам, так що з ними як мінімум потрібно ознайомитися. Ну ось і все! Якщо у вас виникли питання, коментарі або інші думки, пишіть про це нижче.
