Создание анимаций пользовательского интерфейса игр

Создание анимаций пользовательского интерфейса игр

Анимация UI — это не украшение. Это сигнальная система: открытие экрана, подтверждение действия, получение награды, предупреждение об ошибке. Правильная анимация сокращает когнитивную нагрузку — игрок понимает, что произошло, без чтения текста. Неправильная анимация бесит: слишком медленная задерживает игровой процесс, слишком резкая пропускается незаметно.

Инструменты анимации UI в Unity: три подхода

Animator + Animation Clips — классика. Работает через Animator Controller на Canvas-объекте. Плюс: видимость в Unity Animator, поддержка Blend Trees, легко управлять через SetTrigger/SetBool. Минус: тяжело управлять динамически (если нужно анимировать элемент в произвольную позицию, известную только во время игры — Animator не поможет напрямую). Подходит для фиксированных переходов: открытие/закрытие экрана, pulse-эффект на кнопке, idle-анимация элемента.

DOTween — де-факто стандарт для code-driven UI анимаций в Unity. RectTransform.DOAnchorPos(), CanvasGroup.DOFade(), Image.DOColor() — всё это через fluent API с возможностью sequencing. DOTween.Sequence() с .Append(), .Join(), .InsertCallback() позволяет строить сложные скоординированные анимации из кода без визуального редактора. Важный момент: DOTween работает в Update-цикле, что означает — при Time.timeScale = 0 (пауза игры) анимации UI останавливаются тоже, если не использовать SetUpdate(UpdateType.Normal, true) для ignoreTimeScale.

UI Toolkit Transitions — CSS-подобные transitions через USS: transition-property: translate; transition-duration: 300ms; transition-timing-function: ease-out;. Самый декларативный подход, но с ограниченными возможностями по сравнению с DOTween — только трансформации, непрозрачность и цвет. Хорошо работает для hover-эффектов и простых переходов состояний.

Timing и easing: физика анимации UI

Диапазоны длительности, которые работают:

• Микро-обратная связь (hover, press): 80–120 мс
• Появление/скрытие малого элемента (tooltip, badge): 150–200 мс
• Переход экрана (открытие инвентаря, меню): 250–350 мс
• Награды и fanfare-анимации: 600–1200 мс

Всё, что больше 400 мс для утилитарных переходов — раздражает при повторных открытиях. Игрок открывает инвентарь сто раз за сессию. 600 мс перехода = минута потраченного времени только на ожидание открытия.

Easing функции не симметричны по назначению. Ease Out (fast start, slow end) — для появляющихся элементов: элемент вылетает быстро и мягко останавливается на месте, создавая ощущение «приземления». Ease In (slow start, fast end) — для исчезающих: элемент медленно начинает и быстро улетает. Ease In/Out — для переходов между состояниями, где нет чёткого «откуда» и «куда». Linear easing в UI почти никогда не нужен — выглядит механически.

Overshoot и spring: когда физика работает

Overshoot (анимация, которая немного переходит за целевое значение и возвращается) добавляет «веса» и «характера» элементу. DOTween предоставляет Ease.OutBack и Ease.OutElastic. OutBack с strength 1.5–2.0 хорошо работает для pop-up уведомлений: элемент «выпрыгивает» немного за пределы финального размера и возвращается. OutElastic — для игровых наград, лут-боксов, критических попаданий, где нужна энергичная реакция.

Важное ограничение: overshoot анимации на больших экранных элементах (full-screen панели) выглядят странно. Это работает только для компактных элементов — иконок, кнопок, pop-up уведомлений.

Кейс: уведомление о получении предмета

На проекте потребовалась анимация всплывающего уведомления при получении предмета: иконка + название + описание. Анимация должна была появляться без остановки геймплея, удерживаться 2 секунды и исчезать.

Реализация через DOTween Sequence: иконка вылетает снизу с Ease.OutBack за 200 мс, одновременно (.Join()) фейд CanvasGroup.alpha с 0 до 1. Через 200 мс текст появляется через DOFade за 150 мс (.AppendInterval(0.2f).Append(...)). Удержание — .AppendInterval(2f). Исчезновение: сдвиг вправо + фейд за 200 мс с Ease.InCubic. Вся последовательность — 15 строк кода, переиспользуется через NotificationController.Show(item).

Проблема, которую решали отдельно: при быстром получении нескольких предметов подряд новое уведомление должно было вытеснять старое, а не накапливаться в очередь. Решение: при вызове Show() проверяем, есть ли активный tween, убиваем его через DOTween.Kill(targetTransform) и запускаем новую анимацию.

Производительность UI-анимаций: где терять FPS незаметно

Анимации в Canvas часто вызывают Canvas Rebuild — пересчёт всей UI-геометрии. Это происходит каждый раз, когда меняется что-то в иерархии Canvas: позиция, размер, непрозрачность через alpha. CanvasGroup.alpha не вызывает Rebuild геометрии (только перерасчёт прозрачности), а вот изменение RectTransform.position через DOTween — вызывает.

Для анимаций перемещения это означает: анимировать через DOAnchorPos (изменение AnchoredPosition) безопаснее, чем через DOMove (изменение World Position). AnchoredPosition работает в локальном пространстве Canvas и вызывает Rebuild только для изменённого элемента и его родителей, World Position может потянуть за собой пересчёт всей иерархии.

Для scale-анимаций: transform.DOScale() на дочернем объекте Canvas не вызывает Canvas Rebuild вообще — масштаб обрабатывается на уровне Transform, а не Layout системы. Это самый дешёвый тип UI-анимации. Именно поэтому pulse-эффект (лёгкое увеличение/уменьшение масштаба) так популярен для кнопок с call-to-action.

Разбивайте анимируемые элементы на отдельные Canvas'ы. Если иконка в углу экрана мигает для привлечения внимания — она должна быть в своём Canvas, чтобы её Rebuild не перестраивал геометрию всего HUD каждый кадр.

Анимация состояний кнопок: нюансы

Стандартный Button в uGUI с ColorTween анимирует Highlight/Pressed/Disabled состояния через Color. Это работает, но ограничено. Для кастомного поведения лучше использовать UIAnimation компонент на основе DOTween или переопределить IPointerEnterHandler, IPointerExitHandler, IPointerDownHandler.

Scale-анимация на кнопке при нажатии (Press: scale 0.95, Release: scale 1.0) — один из самых простых и эффективных тактильных откликов. 80 мс с Ease.OutQuad. Для мобильных платформ это особенно важно, потому что тактильной вибрации под пальцем нет, а визуальная обратная связь критична.

Стоимость определяется индивидуально после анализа требований к анимациям.