Тайминг в анимации

f

Почему стандартные значения 300 мс убивают UX: разбор на цифрах

Когда в интерфейсе плавно выезжает модальное окно за 0.4 сек — это ощущается как тормоз. Когда то же окно появляется за 0.15 сек — глаз фиксирует рывок. Проблема в том, что 80% аниматоров копируют базовые значения из готовых библиотек, не учитывая контекст. Конкретный пример: для карточки товара на лендинге (2026 год, скорости сайтов выросли) рабочий диапазон длительности появления — 180–220 мс. Ниже 140 мс — мерцание, выше 300 мс — пользователь начинает скроллить дальше, считая, что контента нет.

Пошаговый подбор:

  1. Замерьте время реакции пользователя на вашем устройстве — часто это 100–120 мс.
  2. Клик мыши (или тап) плюс начальная задержка браузера — суммарно 50–70 мс.
  3. Итог: анимация появления должна уложиться в 220–280 мс от момента действия до фиксации. Значит чистый цикл — 150–200 мс.

Типичная ошибка: берут 300 мс «на глаз» и получают залипание. Исправляется сухим замером через Performance tab в Chrome.

Расчет тайминга для микро-взаимодействий: кейс «кнопка лайка»

Разбираем нажатие на иконку сердечка. Классический сценарий: scale + цвет. Цифры:

Многие делают симметрично: 0.2 сек на сжатие и 0.2 сек на расширение. Итог — 0.4 сек, что в 2 раза дольше комфортного порога. Правильная кривая: быстрый antic (0.1 сек) + замедленный return на overshoot (0.25 сек). Но overshoot не более 8 пикселей, иначе глаз видит дрожание. Проверяйте на нативной кнопке — разница в ощущении скорости при 0.35 сек против 0.55 сек.

Тайминг для смены слайдов в галерее (пошаговая настройка)

  1. Замерьте скорость скролла пальцем на тачпаде — средняя 800–1200 мс на экран.
  2. Если анимация перехода длится дольше 400 мс — пользователь начинает новый свайп до окончания, получая глитч.
  3. Решение: длительность сдвига слайда — 280–360 мс. Параметры easing: cubic-bezier(0.25, 0.1, 0.25, 1) — ускорение в начале 0.15 сек, плавное замедление.

Ошибка: ставят одинаковый timing для вертикального и горизонтального скролла. В мобильных приложениях (данные 2025–2026) горизонтальный свайп требует на 15% быстрее, чем вертикальный, иначе кажется «резиновым».

Для галерей с автопрокруткой: интервал между кадрами — 4–5 сек. Но тайминг анимации внутри этого интервала должен составлять не более 6% от паузы. Пример: 4 паузы × 0.06 = 0.24 сек на сам переход. Если сделать 0.5 сек, пользователь успеет заметить «смазывание».

Практика для персонажной анимации (векторные спрайты)

Здесь не работают UI-стандарты. Конкретные цифры для idle-цикла (поза ожидания): длительность полного цикла — 2–3 секунды для реалистичной картинки, 3.5–5 секунд для стилизованных персонажей (например, в 2D-играх). Главное — фаза покоя (hold) не менее 0.5 сек, иначе персонаж «дергается».

Ошибка новичков: пытаются сделать «плавный» цикл без остановки. Визуально это выглядит как бесконечное напряжение мышц. На практике между движениями обязательно вставляют статичный кадр длиной 200–400 мс.

Для прыжка анимации: время отрыва от земли — 0.08–0.12 сек (быстрый спринт), фаза полета — 0.25–0.4 сек, приземление — 0.15 сек с амортизацией (пружинистость). Если все фазы сделать одинаковыми по длительности (например, по 0.2 сек), прыжок не считывается как прыжок — он превращается в наложение кадров.

Выбор timing-функции в зависимости от цели

Универсального easing не существует. Таблица по кейсам:

  1. Выезд тултипа — linear (чтобы пользователь мог читать во время движения). Длительность: 0.1–0.12 сек.
  2. Сворачивание меню — ease-in (замедление в конце). Длительность: 0.2–0.25 сек. Не используйте ease-out — меню будет «выпрыгивать».
  3. Анимация заполнения прогрессбара — ease-in-out. Длительность: 2–5 сек (зависит от процесса). Ошибка: ставят cubic-bezier с резким началом — заполнение кажется дерганым.

Лайфхак: для длительных анимаций (более 1 сек) ставьте самую медленную фазу в середине. Человеческий глаз быстрее адаптируется к ускорению в начале и замедлению в конце, чем к монотонности. Если нужно показать загрузку длительностью 3 секунды — первые 0.5 сек быстрый старт, следующие 2 сек плавное движение, последние 0.2 сек полное замедление. Это убирает ощущение зависания.

Помните: 90% случаев, когда анимация «не выглядит», проблема не в ключах, а в тайминге. Перепроверяйте цифры в миллисекундах — именно они решают, залипнет ли пользователь или отреагирует мгновенно.

Добавлено: 24.04.2026