Кривые ускорения и длительность: почему одно движение выглядит дорого, а другое — дёшево

В уроке про микроанимации мы разобрали, зачем интерфейсу движение. Здесь — следующий шаг: как сделать так, чтобы оно ощущалось качественным. Главный инструмент — easing, или кривая ускорения: она описывает, как скорость элемента меняется от начала до конца анимации. Без неё (linear) элемент с первого кадра несётся на полной скорости и так же резко замирает.

web.dev формулирует это просто: в природе ничто не движется линейно из точки в точку, поэтому линейное движение кажется роботизированным. В докладе Apple о пружинных анимациях видно и почему: на графике скорости у линейной анимации резкий скачок в начале и в конце. Глаз считывает этот скачок как рывок — и интерфейс начинает выглядеть как дешёвая презентация.

Названия кривых сначала путают: ease-out используют, когда что-то появляется, а ease-in — когда уходит. Nielsen Norman Group объясняет логику так: ease-out на входе замедляет элемент перед остановкой, и глаз успевает предсказать, где он замрёт; ease-in на выходе разгоняет элемент, и кажется, что он уезжает за пределы экрана сам.

Любую из стандартных кривых можно записать как cubic-bezier — функцию с четырьмя числами. По MDN это график, где по горизонтали — прошедшая доля времени, по вертикали — пройденная доля пути. Начало (0, 0) и конец (1, 1) зафиксированы, а четыре числа задают две промежуточные опорные точки, которые «тянут» кривую.

• Крутой подъём в начале — элемент стартует быстро; пологий участок в конце — мягкая остановка. Это и есть ease-out
• Пологое начало и крутой конец — медленный разгон и резкий финиш, то есть ease-in
• Кривая в форме буквы S — ease-in-out: разгон, быстрая середина, торможение
• Если вторая координата точки больше 1 или меньше 0, элемент перелетает цель и возвращается — так в CSS делают лёгкую «отдачу»
• Стандартные значения описаны в спецификации W3C: ease-in — cubic-bezier(0.42, 0, 1, 1), ease-out — cubic-bezier(0, 0, 0.58, 1), ease-in-out — cubic-bezier(0.42, 0, 0.58, 1)

Стандартные ключевые слова довольно мягкие. На проектах InterLAB мы обычно подбираем свою, более выраженную кривую появления — с резким стартом и длинным плавным хвостом: при той же длительности интерфейс ощущается быстрее. Подбирать удобно прямо в браузере: в Chrome DevTools у любого transition в панели Styles есть Easing Editor, где опорные точки можно тянуть мышью и сразу видеть результат.

Пружинная анимация (spring) описывается не кривой и временем, а физикой: насколько упругая пружина и насколько сильно её гасит трение. Apple в докладе WWDC 2023 упрощает настройку до двух параметров — длительности и «отскока» (bounce). При нулевом отскоке получается плавное движение без перелёта, при положительном элемент перелетает цель и несколько раз затухающе колеблется вокруг неё.

Главное преимущество пружины не в отскоке. Она умеет подхватить скорость, с которой человек отпустил элемент пальцем, и продолжить движение без рывка, а если цель поменялась на полпути — плавно развернуться. Поэтому в SwiftUI пружина стала анимацией по умолчанию. В вебе пружину можно приблизить CSS-функцией linear() по набору точек (её описывает MDN) — именно так сделана дорожка spring в демо выше.

Nielsen Norman Group называет диапазон 100–500 мс для большинства анимаций, а точное значение зависит от сложности изменения и от того, какое расстояние проходит элемент. Нажмите «Повторить» и посмотрите, где для вас проходит граница между «мгновенно», «плавно» и «приходится ждать».

• Чем меньше элемент и короче путь, тем быстрее движение: подсказка у курсора и боковая панель на весь экран не могут жить с одной длительностью
• Исчезновение делайте короче появления: по NN/g окно может открываться за 300 мс и закрываться за 200–250 мс
• Чем чаще повторяется действие, тем короче или незаметнее анимация — Apple HIG советует не нагружать движением частые взаимодействия
• Анимация не должна блокировать: если человек уже кликает дальше, интерфейс не ждёт окончания эффекта
• Даже небольшая разница ощутима: NN/g отмечает, что переход с 250 на 300 мс может ощущаться совсем иначе

Когда каждый разработчик подбирает длительность «на глаз», в продукте появляются 180, 250, 320 и 600 мс с пятью разными кривыми — и интерфейс начинает ощущаться неряшливым, хотя никто не может сказать почему. Решение — договориться о небольшом наборе именованных значений, токенов, и использовать только их, как цвета и отступы из палитры.

В коде это одна строка: transition: transform var(--duration-moderate) var(--ease-enter). На проектах InterLAB токены движения живут рядом с цветами и шрифтами в дизайн-системе: дизайнер в макете пишет «появление — moderate, ease-enter», разработчик берёт ровно эти значения, и спорить о «чуть побыстрее» приходится один раз, а не на каждом экране.