Анимация в интерфейсе: принципы, длительность и easing

Короткий ответ

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

Зачем вообще движение

• Обратная связь: нажатие, загрузка, успешное сохранение.
• Ориентация: переход между экранами показывает, где пользователь находится в иерархии.
• Связь элементов: карточка раскрывается в детальную страницу — ясно, что это тот же объект.
• Внимание: аккуратно привлечь взгляд к новому уведомлению или ошибке.
• Характер бренда — только поверх перечисленного, не вместо.

Длительность

Точных универсальных значений нет, но есть рабочие ориентиры:

Правила подбора:

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

Easing

Объекты в реальном мире не начинают и не заканчивают движение мгновенно, поэтому linear выглядит механически. Он уместен для прозрачности, бесконечных лоадеров и индикаторов прогресса.

• ease-out (замедление в конце) — для появления: элемент быстро входит и мягко останавливается.
• ease-in (ускорение) — для ухода с экрана: элемент разгоняется и исчезает.
• ease-in-out — для перемещения внутри экрана из одной точки в другую.
• spring — пружинная физика для жестов и перетаскивания, когда важна инерция.

В коде кривые задаются через cubic-bezier(). Заведите 3–4 именованные кривые в дизайн-системе вместо случайных значений в каждом макете.

Хореография

Когда двигается несколько элементов, нужен порядок:

• одна точка внимания за раз — главное движение, остальное поддерживает;
• stagger — небольшая задержка между элементами списка показывает их последовательность, но общая длительность не должна расти бесконечно;
• единое направление — элементы приходят и уходят логично относительно навигации;
• shared element — общий элемент «перетекает» между экранами и связывает их.

Reduced motion

Часть пользователей включает в системе настройку уменьшения движения: у кого-то анимация вызывает дискомфорт или головокружение. Уважайте её: заменяйте сдвиги и масштабирование на плавную смену прозрачности, отключайте параллакс и автопроигрывание.

:root {
  --motion-fast: 150ms;
  --motion-base: 250ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
}

.panel {
  transition: transform var(--motion-base) var(--ease-out),
              opacity var(--motion-base) var(--ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .panel { transition: opacity var(--motion-fast) linear; }
}

Как передать анимацию разработчикам

Видео «как должно быть» недостаточно. Для каждой анимации укажите:

1. Триггер — что её запускает.
2. Свойства — что меняется и от какого значения к какому (позиция, масштаб, прозрачность).
3. Длительность и задержку — в миллисекундах или токеном.
4. Easing — именованную кривую или cubic-bezier.
5. Прерывание — что происходит, если пользователь повторно нажал во время анимации.
6. Вариант для reduced motion.

Прототип в Figma или видео помогает передать ощущение, а таблица параметров — точность. Анимируйте по возможности transform и opacity: их браузер обрабатывает эффективнее, чем изменение размеров и отступов.