• Теория
  • Теория

animation-timing-function, шаг 3

Что же скрывается за названиями linear, ease и других функций? Довольно сложная математика кубических кривых Безье.

По сути, именованные функции ease-in, ease-out и другие являются псевдонимами для универсального описания кривых, например:

cubic-bezier(0, 0, 1, 1)    // это linear
cubic-bezier(0.42, 0, 1, 1) // это ease-in

В общем представлении cubic-bezier(x1, y1, x2, y2) значения x и y — это координаты точек кривых на графике. При этом верным считается значение x только в диапазоне от 0 до 1.

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

А вот по этой ссылке можно найти целую коллекцию разных easing-функций на основе кривых Безье.

C помощью кривых Безье мы можем задавать любые формы анимации. Давайте попробуем!

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Анимация» тренажёра «Интерфейсные анимации» можно после регистрации и оформления подписки.