Во второй части цикла уроков мы рассматривали свойство CSS3 transition-timing-function, которое отвечает за изменение скорости анимации со временем во время перехода. Значений этого свойства, таких как ease, ease-in и linear, обычно достаточно даже для очень требовательного веб-разработчика. Тем не менее вы можете создать свою собственную временную функцию, используя значение cubic-bezier. Оно выглядит и звучит сложно, но его можно объяснить с помощью нескольких простых диаграмм.

Диаграмма выше показывает отношение процента выполненной анимации ко времени. Эта линия прямая, как при использовании значения временной функции linear, так что прогресс выполненной анимации прямо пропорционален прошедшему времени , т. е. 50% анимации выполнено за половину времени перехода.

Эта диаграмма показывает изгиб значения ease-in-out:

• Начинается медленно, примерно 12% анимации выполнено за первые 25% времени.
• Заканчивается медленно, примерно 12% анимации проигрывается в последние 25% времени.
• Таким образом, средние 76% анимации должны быть воспроизведены за 50% времени, так что скорость увеличится.

В сущности, чем круче касательная к изгибу, тем быстрее будет воспроизводиться анимация в соответствующий момент. Если линия вертикальна, анимация выполняется мгновенно в этой точке.  Это показано на следующей диаграмме:

На половине времени анимация перепрыгнет с 30% на 70%.

Можно представить, что все переходы анимации начинаются в точке 0,0, в начальном состоянии анимация воспроизведена на 0% после 0 прошедшего времени. Подобным образом, она закончится в точке 1,1, где в конечном состоянии анимация выполнена на 100% за всю продолжительность.

Таким образом, мы можем задавать значение функции кривой Безье между 0,0 и 1,1.

Что такое кривая Безье? 

Вы, вероятно, встречались с использованием кривых Безье в графических пакетах. Задавая начальную точку P0 и конечную точку P3 линии, кривая Безье определяет две контрольные точки для каждого конца, P1 и P2. Мы даже не будем пытаться объяснить математический смысл, но, если вам интересно, обратитесь к Википедии или WolframMathWorld для вызывающих тошноту вычислений.

К счастью, нам не нужно волноваться о сложностях. Так как наша линия анимации начинается на 0,0 и заканчивается на 1,1, нам нужно только определить точки P1 и P2 в значении функции cubic-bezier, т.е.:

/* cubic-bezier(p1x, p1y, p2x, p2y) */

/* идентично значению linear */
transition-timing-function: cubic-bezier(0.25,0.25,0.75,0.75);
/* идентично значению ease-in-out */
transition-timing-function: cubic-bezier(0.420, 0.000, 0.580, 1.000);

Заметьте, что координаты x точек P1 и P2 определяют время и должны быть между 0 и 1 включительно. Нельзя задать отрицательное значение, так как тогда анимация должна начаться раньше, чем она запускаются. Подобным образом, нельзя задать значение больше 1, так как время не может дойти, например, до 120%, а затем вернуться назад к 100%, если у вас под рукой нет машины времени.

А координаты y определяют процент выполнения анимации и могут иметь любые значения, в том числе и меньше нуля или больше единицы, например:

transition-timing-function: cubic-bezier(0.5, -0.5, 0.5, 1.5);

На примерно 15% продолжительности анимация выполнена на -10%. Поэтому, если мы сдвигаем элемент с 0px на 100px, в этот момент он будет находится на -10px. Другими словами, у нас есть эффект отскока, который вы можете увидеть, пройдя на сайт cubic-bezier.com и нажав кнопку «GO!».

Пусть инструменты работают за нас 

Для достижения нужного эффекта значения функции кривых Безье могут подбираться методом проб и ошибок. К счастью, есть отличные инструменты, которые помогут поэкспериментировать и создать правильный код:

• cubic-bezier.com
• Ceaser

В заключительной части цикла уроков о переходах CSS3 мы рассмотрим несколько продвинутых способов переходов.

Автор урока Craig Buckler

Перевод — Дежурка

Смотрите также:

• Цикл уроков о переходах CSS3, часть 1: Основы. Что такое переходы?
• Цикл уроков о переходах CSS3. Часть 2: Основы свойств переходов
• Создание эффектов загрузки страницы