Анимация с ИИ: принципы и карта путей

Для дизайнера с ИИ есть три принципиально разных способа получить движение. Они не конкурируют, у каждого своя зона.

Первый путь разобран в теме «Генерация и монтаж видео с ИИ». Два других — в следующих темах этой главы: «Моушн-ролик кодом» и «Анимация интерфейса». Правило выбора простое. Если на экране должен быть реальный мир, бери видео-модель. Если на экране текст, интерфейс или данные, бери код. Если движение живёт внутри продукта, бери инструмент, который экспортирует в формат продукта.

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

Классические «12 принципов анимации» Disney написаны для персонажей. Для интерфейса и моушн-графики из них работают шесть. Их же и нужно уметь называть в промпте, потому что агент знает эти слова.

• Timing (тайминг). Сколько длится движение. Быстрое читается как лёгкое и точное, медленное как тяжёлое и важное. Главный рычаг ощущения качества.
• Slow in / slow out (easing). Объект разгоняется и тормозит, а не едет с постоянной скоростью. Линейное движение выглядит механическим везде, кроме бесконечной прокрутки и вращения.
• Anticipation (замах). Короткое движение в противоположную сторону перед основным. Кнопка чуть сжимается перед тем, как раскрыть панель. Без замаха действие возникает ниоткуда.
• Follow-through (доводка). Движение не замирает мгновенно: панель чуть перелетает и возвращается. Именно это делают пружины ниже.
• Staging (постановка). В каждый момент внимание на одном главном. Если двигается всё сразу, не двигается ничего. В ролике это «одна новая вещь на экране каждые 2–4 секунды».
• Arcs (дуги). Естественное движение идёт по дуге, а не по прямой. Для UI это чаще про курсор и перелёт элементов между областями.

Остальные шесть (squash and stretch, exaggeration, secondary action и другие) нужны, когда появляются персонажи и маскоты. Тогда проси агента применить их явно, по названию.

Универсальной таблицы нет, но есть ориентиры, с которыми согласны гайдлайны Apple и Material.

• Микровзаимодействия (кнопка нажалась, переключатель щёлкнул): 100–200 мс.
• Обычные переходы (панель открылась, карточка развернулась): 200–300 мс.
• Крупные перемещения на весь экран: 300–500 мс.
• Выход короче входа. Появление ease-out (быстрый старт, мягкая остановка), исчезновение ease-in.
• Больше 500 мс в интерфейсе почти всегда ошибка. Пользователь ждёт, а не любуется.

В роликах масштаб другой. Заголовок должен успеть прочитаться: 1,5–3 секунды на экране в зависимости от длины. Смена состояния на экране каждые 2–4 секунды. Первые две секунды решают, досмотрят ли.

Кривая easing — это заранее заданный график скорости от начала к концу: ease-out, cubic-bezier(0.2, 0, 0, 1). Длительность фиксирована, результат предсказуем. Это идеальный вариант для роликов, где каждый кадр должен быть одинаковым при каждом рендере.

Пружина (spring) задаётся не длительностью, а физикой: жёсткость, затухание, масса. Движение разгоняется, чуть перелетает цель и успокаивается. Пружину можно прервать на середине и перенаправить, она продолжит естественно. Поэтому пружины выбирают для жестов, перетаскивания и смены раскладки в интерфейсе. Material 3 Expressive перешёл на пружинные токены, SwiftUI задаёт пружину парой duration и bounce.

Практическое правило из темы «Моушн-ролик кодом»: у каждого класса объектов своя пружина. Мелкие элементы UI щёлкают почти без перелёта, панели оседают мягко, камера плывёт незаметно, заголовки приземляются жёстко и держатся. Если перелетает всё, точность пропадает.

• Кадр и fps. Ролик — последовательность кадров, 30 или 60 в секунду. Тайминг в коде задаётся номером кадра, а не секундами «на глаз».
• Keyframe (ключевой кадр). Точка, где значение задано явно. Между ключами значения считаются автоматически.
• Timeline (таймлайн). Шкала времени со всеми анимациями проекта. В GSAP и HyperFrames это буквально объект, который можно перемотать в любую точку.
• Seek. Перемотка таймлайна в момент t. Главное слово для рендера кодом: если кадр 240 можно нарисовать без проигрывания первых 239, ролик детерминирован.
• Stagger. Запуск одинаковой анимации у группы элементов с небольшим сдвигом. Список «проявляется по одному».
• Loop. Последний кадр совпадает с первым, ролик замыкается без рывка.
• Аниматик. Черновой ролик из грубых блоков на реальном тайминге и звуке. Тайминг утверждают здесь, до полировки.
• Контакт-лист (contact sheet). Сетка стоп-кадров ролика на одной картинке. Агент не умеет смотреть видео, но умеет смотреть картинку, поэтому критика идёт по контакт-листу.
• Safe zone. Поля, куда интерфейс соцсети кладёт свои кнопки и подписи. Текст там не читается.

У части людей движение на экране вызывает головокружение и тошноту. В системах есть настройка «уменьшить движение», в браузере она доступна через медиазапрос prefers-reduced-motion. WCAG 2.3.3 требует, чтобы анимацию от взаимодействия можно было отключить. Правильная реакция не «убрать всё», а заменить: параллакс и перелёты превращаются в короткое затухание, автопрокрутка останавливается, смысл сохраняется. Попроси агента сразу делать два варианта: полный и для reduced motion. Это одна строка в промпте и одна проверка в ревью.

Это главный сдвиг в голове. «Зум, морф, добавь частицы» — список активности. Агент такое выполнит, но ролик получится из эффектов без истории. Сториборд говорит иначе: что зритель знает в каждую секунду. У каждого кадра есть состояние входа, состояние выхода и причина существовать. Если агент не может объяснить, зачем нужен четвёртый кадр, четвёртый кадр вырезается.

00–02 с  ХУК      один образ, который удерживает внимание
02–05 с  ПРОБЛЕМА трение, показанное на экране
05–09 с  ПОКАЗ    продукт входит через реальное взаимодействие
09–13 с  ДОКАЗ.   один экран или одна цифра подтверждает заявление
13–16 с  ФИНАЛ    чистое конечное состояние и читаемый призыв

Второй сдвиг: решения живут в файлах, а не в чате. Моушн-гайд на полстраницы (длительности, кривые, расстояния, что запрещено) агент читает при каждом запуске. Без него он заполняет пробелы самыми частотными дефолтами: заголовок по центру на градиенте, всё появляется затуханием, свечение на UI. Это и есть нейрослоп в движении (тема «Нейрослоп»). Запрети дефолты списком, и они исчезнут.

## Моушн-гайд проекта
- Длительности: micro 150 мс, обычный переход 250 мс, крупный 400 мс
- Кривые: вход ease-out cubic-bezier(0.2, 0, 0, 1), выход ease-in
- Пружины: UI без перелёта, панели мягкие, заголовки жёсткие и держатся 2 с
- Stagger в списках 40 мс, не больше 8 элементов
- Запрещено: заголовок по центру на градиенте, всё затуханием, свечение на UI, подписи по углам
- Reduced motion: перелёты заменяются затуханием 150 мс

Помогает: написать анимацию кодом по гайду, разложить референс на тайминг и переходы, собрать десять вариантов под форматы из одного таймлайна, проверить собственные кадры по контакт-листу. Пока слабо: персонажная анимация с характером, органика и жидкости кодом, точная синхронизация под сложный монтаж живого видео. Там по-прежнему нужны After Effects, Cavalry и руки моушн-дизайнера. Самый продуктивный режим — ты ставишь состояния и критикуешь кадры, агент пишет и рендерит.

Разложи 12 принципов анимации на те, что нужны для интерфейса, и те, что нужны только персонажам. Для каждого из первых дай пример в UI-переходе длиной до 300 мс

Вот описание моего продукта: [описание]. Предложи три пути к анимированному промо: видео-модель, код через агента, инструмент интерфейсной анимации. Для каждого назови, что получится, что не получится и сколько времени займёт

Составь моушн-гайд для [бренд]: длительности для трёх классов движения, кривые входа и выхода, правила stagger, список запрещённых дефолтов и правило для reduced motion. Формат — markdown-файл на полстраницы

Вот сториборд ролика на 15 секунд: [список кадров]. Для каждого кадра напиши состояние входа, состояние выхода и зачем он нужен. Кадры без причины предложи вырезать