Easing. Или почему анимация бывает живой. Есть вещи которые замечаешь только когда их нет. Easing — одна из них. Когда он есть — интерфейс ощущается живым. Когда его нет — что-то не так, но непонятно что.

Disney и 1981 год

Олли Джонстон и Фрэнк Томас — два аниматора Disney которые работали ещё на Белоснежке в 1937-м — написали книгу «The Illusion of Life». В ней они сформулировали 12 принципов анимации которые Disney выработал за десятилетия работы.

Первый принцип — Squash and Stretch. Второй — Anticipation. Шестой — Slow In and Slow Out. Slow In and Slow Out — это и есть easing. Объект начинает движение медленно, разгоняется в середине, замедляется перед остановкой. Именно так двигаются реальные объекты с массой. Именно поэтому мячик в анимации Disney выглядит как настоящий — он разгоняется и тормозит, а не едет с постоянной скоростью.

Disney открыл это наблюдая за реальным миром. Линейное движение в природе почти не встречается — всегда есть ускорение и замедление.

Как это перешло в интерфейсы

Когда компьютерные интерфейсы начали добавлять анимации — первые попытки были линейными. Окно открывается равномерно, элемент появляется с постоянной скоростью. Выглядело механически и дёшево.

Потом кто-то вспомнил про Disney. Macintosh в 80-х начал добавлять нелинейные анимации в системные переходы. Окна начали «выпрыгивать» с ease-out. Это было небольшое изменение но ощущение интерфейса изменилось принципиально.

CSS в 2001-м добавил transition-timing-function с четырьмя базовыми значениями: linear, ease, ease-in, ease-out, ease-in-out. Это был первый раз когда веб-разработчики получили easing из коробки без JS.

Три основных варианта и когда что использовать

Ease-in — медленный старт, быстрый конец. Объект разгоняется. Используется когда элемент уходит с экрана — исчезновение с ускорением выглядит естественно.

Ease-out — быстрый старт, медленный конец. Объект тормозит. Используется когда элемент появляется — влетает быстро и мягко останавливается. Это самый частый вариант для UI потому что появление с торможением ощущается как «приземление».

Ease-in-out — медленный старт, быстрый середина, медленный конец. Используется для переходов между состояниями — элемент перемещается из одного места в другое.

Линейный — почти никогда. Только для вещей которые физически должны двигаться равномерно — прогресс-бар, лоадер.

cubic-bezier и тонкая настройка

Четыре базовых варианта — это упрощение. За ними стоят кривые Безье — математическая функция с четырьмя параметрами которая описывает любую кривую скорости.

CSS позволяет написать cubic-bezier(0.25, 0.1, 0.25, 1.0) напрямую. Есть сайты где кривую можно нарисовать мышью и сразу увидеть анимацию. Именно это Apple использует для своих системных анимаций — не стандартный ease, а конкретные кривые которые они вывели эмпирически и патентовали.

Для скролла — одна кривая. Для открытия модального окна — другая. Для тултипа — третья. Каждый контекст требует своего характера движения.

Когда easing меняет ощущение радикально

Я использовал easing везде где была анимация — в GMS, Unity, вебе. Разница между линейной анимацией и ease-out в интерфейсе — как между пластиком и металлом. Технически то же самое, ощущение другое.

В геймдеве это особенно заметно на UI. Меню которое выезжает линейно выглядит как прототип. То же меню с ease-out выглядит как продукт. Изменение в одну строчку кода, разница в восприятии — огромная.

В вебе кастомный Безье на ховерах кнопки — это разница между сайтом который ощущается живым и сайтом который ощущается сделанным по шаблону.