UI Animation

UI Animation (анимация интерфейса) — это движения и переходы в пользовательском интерфейсе, которые помогают объяснить действия, навигацию и состояния системы, делая взаимодействие понятным, отзывчивым и приятным.

Зачем нужна

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

Что даёт:

• визуальная причинно-следственная связь (нажал → произошло);
• ориентация в пространстве (куда «уехал» элемент, откуда «пришёл»);
• ощущение скорости и отзывчивости;
• эмоциональный тон бренда.

Основные типы

• Микровзаимодействия: ховер, нажатие, переключатели, валидация полей.
• Переходы экранов/страниц: слайд/фейд, shared element transitions.
• Состояния загрузки: скелетоны, шиммер, прогресс-индикаторы.
• Обратная связь об ошибках/успехе: потряхивание поля, чек-иконка.
• Подсказки/наведение: туры, подсветка зон внимания (coach marks).
• Параллакс и скролл-анимации: реакция контента на прокрутку.

Принципы хорошей UI-анимации

• Смысл > эффект: каждый кадр отвечает на вопрос «что происходит сейчас?».
• Естественная физика: ускорение/замедление, пружинность в меру.
• Скорость: 120–300 мс для микровзаимодействий, 200–400 мс для переходов; длиннее — только если анимация несёт полезную информацию.
• Последовательность: единые кривые, длительности и стили по всему продукту.
• Иерархия: важные элементы двигаются заметнее, второстепенные — деликатнее.
• Реверсивность: действие и «откат» ощущаются зеркально и предсказуемо.

Время и кривые

• Длительности (ориентиры):
  • Ховер/тап: 100–150 мс
  • Смена состояния компонента: 150–250 мс
  • Переход экрана: 200–400 мс
• Кривые ускорения: ease-out для появления (быстрый старт, мягкая остановка), ease-in — для ухода; для «живости» — пружинные (spring) с умеренной амплитудой.

Доступность

• Учитывайте Reduce Motion (предпочтение уменьшенной анимации): отключайте параллакс/плавание, оставляйте мгновенные фейды.
• Не используйте вспышки >3 Гц; избегайте резких масштабов и внезапных перемещений.
• Дублируйте смысл анимации текстом/иконкой, чтобы не потерять информацию при её отключении.

Производительность

• Анимируйте только transform и opacity — это задействует композитинг GPU.
• Избегайте layout-триггеров (width/height/top/left), тяжёлых теней и размытия.
• Группируйте изменения (requestAnimationFrame), ограничивайте количество одновременно движущихся элементов.
• Тестируйте на целевых устройствах (мобильные, low-end).

Инструменты

• Web: CSS Animations/Transitions, Web Animations API, Framer Motion (React), GSAP, Motion One.
• iOS: UIKit Dynamics, UIViewPropertyAnimator, Core Animation, SwiftUI (withAnimation).
• Android: MotionLayout, Lottie, Jetpack Compose Animations.
• Кроссплатформа: Lottie (After Effects → JSON), Rive.

Лучшие практики

• Начинайте с статического дизайна, затем добавляйте движение только там, где есть сценарная польза.
• Введите токены анимации в дизайн-системе: длительности, кривые, глубину/высоту слоёв.
• Держите варианты: стандартный, «сжатый» (reduce motion), «быстрый» для power users.
• Используйте shared element transitions для связи контента между списком и деталями.
• Поддерживайте обратную связь мгновенно (до 100 мс) — даже если действие длится дольше, показывайте прогресс/скелетоны.

Частые ошибки

• «Шоу-рум эффект»: много параллакса и пружин без смысла.
• Задержки ради «красоты» — ощущение тормозов.
• Разнобой кривых и таймингов в соседних компонентах.
• Анимация, скрывающая задержки сервера вместо честного индикатора.

Метрики оценки

• Время до отклика (Time to Feedback) ≤ 100 мс.
• Доля кадров с просадкой ниже 60 FPS (или 120 FPS на ProMotion).
• Завершение ключевых переходов ≤ 300–400 мс.
• Когнитивная понятность (UX-тесты): скорость нахождения цели, ошибки навигации.
• UXR/опросы: «понятно ли, что произошло?» без текста.

Мини-чеклист перед релизом

• Анимация объясняет действие?
• Длительность и кривая согласованы с дизайн-системой?
• Есть вариант Reduce Motion?
• Производительность стабильна на слабых устройствах?
• Поведение реверсивно и предсказуемо?

UI-анимация — это не украшение, а язык интерфейса. Используйте движение, чтобы вести пользователя по пути задачи: быстро, понятно, последовательно.