От автора: в этой статье мы окунемся в замечательный мир функций кривых Безье и получим полный контроль над CSS анимацией. Давайте узнаем, как улучшить css анимацию.
Плавные переходы и анимация произвели фурор в веб-разработке, и это заслуженно. Отличный инструмент, простой, полезный, способный сделать из просто хороших front-end компонентов и интерфейсов конфетку. Способ объявления анимации и переходов похожи, для этого необходимы всего две вещи:
В случае с переходами необходимо выбрать свойство, которое будет подвержено плавному переходу. Для анимации же выбирается keyframe блок.
Потом необходимо объявить длительность задержки анимации или перехода.
Типичный CSS код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.box { opacity: 0; transition: opacity 0.3s; } .cat { animation: fadeIn 0.3s; } @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? Вот так:
|
1 |
cubic-bezier(x1, y1, x2, y2) |
где:
x1 – координата Х контрольной точки p1
y1 – координата У контрольной точки p1
x2 – координата Х контрольной точки p2
y2 – координата У контрольной точки p2
Граф выше я создал только для того, чтобы продемонстрировать вам, как выглядит эта кривая, но вы можете представить, что кубическая кривая задана примерно следующим образом:
|
1 |
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 анимации. Вторая составляющая – умение их применять. Никогда не забывайте, что анимация это не просто «нажал и вперед», ей нельзя злоупотреблять. Анимация – результат долгой практики, и мы должны относиться к ней с уважением. Тайминг функции передают разный смысл, и только от вас зависит, передадите ли вы правильный посыл или нет. Кубические кривые Безье могут помочь вам, так что с ними как минимум нужно ознакомиться. Ну вот и все! Если у вас возникли вопросы, комментарии или другие мысли, пишите об этом ниже.
Источник: //callmenick.com/
Редакция: Команда webformyself.
