Функции времени

Функция времени представляет собой описание изменения скорости перехода. Анимация выглядит безжизненной, если она происходит в фиксированном, линейном темпе. Использование функций времени позволяет сделать переходы более реалистичными.

Здесь приведён пример анимации с линейной функцией времени. Движение происходит вперёд-назад в неизменном темпе.

Сравните это с примером, в котором используются кубические функции Безье. Вы заметите существенную разницу!

В данном примере мы используем пользовательскую функцию времени cubic-bezier:

Кубическая функция времени Безье

Кубическая функция времени Безье

В данном случае cubic-bezier заставляет анимацию немного качнуться назад перед быстрым переходом ко второму состоянию и даже слегка выйти вперёд, прежде чем скорректироваться обратно.

CSS для начального состояния и состояния наведения в каждом примере одинаковый. Всё, что поменялось, — это функция времени.

Давайте познакомимся с каждой из них и узнаем, как они влияют на движение наших элементов.

Если хотите поиграть с этими примерами, я настроил CodePen здесь.

linear

linear

linear

Линейный переход движется с постоянной скоростью от начала и до конца. Поскольку в переходе нет кривой, он не ускоряется и не замедляется. Это может быть полезно при создании анимации, требующей постоянного движения, например, пейзажа, движущегося за окном поезда, или постоянно вращающейся луны.

ease-in

ease-in

ease-in

Функция времени ease-in начинается медленно и ускоряется к концу перехода. Это можно сравнить с шаром, который начинает катиться вниз по склону и заканчивает движение с наибольшей скоростью у подножия. Или, скажем, скучающая рыба плавает влево и вправо.

ease-out

ease-out

ease-out

Функция ease-out противоположна ease-in. Начинается быстро и замедляется к концу перехода. Применяется в тех случаях, когда что-то должно выглядеть так, будто оно стремительно проносится за пределами экрана и замедляется для остановки.

ease-in-out

ease-in-out

ease-in-out

ease-in-out — это комбинация функций ease-in и ease-out. Начинается медленно, ускоряется в средней части перехода, а затем замедляется к концу. В качестве иллюстрации представьте автомобиль, с ускорением стартующий с места, а затем замедляющийся перед остановкой. Если вы создаёте анимацию загрузки или нечто подобное, то это может выглядеть весьма эффектно.

cubic-bezier

cubic-bezier

cubic-bezier

Все функции времени, которые мы рассмотрели ранее, являются примерами кубической кривой Безье. Это кривая описывает «форму» функции времени. Таким образом, определение cubic-bezier похоже на создание собственной функции времени.

Она состоит из четырёх значений, обозначающих две координаты, и может выглядеть следующим образом:

transition-timing-function: cubic-bezier(1,-0.49,.13,1.09);

Здесь две координаты: (1, -0,49) и (.13, 1,09). На графике они выглядят следующим образом:

Источник: https://cubic-bezier.com/#1,-0.49,.13,1.09

Вместо создания координат вручную, я использую сайт cubic-bezier.com. Это отличный способ получения интересных эффектов — и они становятся действительно забавными, если использовать значения больше 1. Это позволяет создать переходы, которые выходят за рамки и отскакивают обратно.

steps

steps

Если в большинстве функций времени используются кривые, то функция steps разбивает переход на набор шагов и прыжков между ними. Например, если указать steps(4), то переход разделит длительность на 4 дискретных скачка (см. рисунок выше).

Это полезно для спрайтовой анимации, например, индикатора загрузки или анимированного персонажа видеоигры. Задав позицию фона в начале серии кадров, можно использовать функцию steps для перехода через каждый кадр и создания видимости движения.

В качестве примера можно привести анимацию кнопки избранного в Twitter.

Вы также можете указать, будет ли переход удерживать первый или последний кадр. По умолчанию используется end, поскольку предполагается, что первый кадр в спрайте уже показан до начала анимации.

Мы можем указать, что именно применяется при настройке шагов:

transition: all 2s steps(10, start);
transition: all 2s steps(10, end);

Другие примеры

Я написал о функциях времени здесь, если хотите прочитать больше и увидеть другие примеры.

Домашнее задание

В продолжение предыдущего примера домашнего задания попробуйте поменять значение функции transition-timing-function и посмотрите, как это изменит впечатление от перехода.

Вы также можете попробовать изменить значения в этом примере. Технически это анимация, а не переход, но функция времени применяется точно так же.

Автор: Донован Хатчинсон
Последнее изменение: 17.02.2024