Как делать плавные анимации в Alight Motion

Дёрганные переходы в Alight Motion чаще всего возникают из-за линейной интерполяции между ключевыми кадрами: объект движется с постоянной скоростью, резко стартует и мгновенно останавливается, отчего анимация выглядит механической. Плавность достигается не количеством ключевых кадров, а правильной настройкой графиков скорости (velocity graphs) и кривых смягчения — именно они определяют, как объект разгоняется и тормозит между точками.

В этом руководстве разберём рабочие приёмы: от базовых easing-кривых до тонкой настройки motion blur и частоты кадров проекта. Материал подходит как для новичков, так и для тех, кто уже делает эдиты, но хочет убрать «топорность» движений.

Почему анимация выглядит дёрганной

Прежде чем что-то настраивать, полезно понять причину. По умолчанию Alight Motion соединяет ключевые кадры прямой линией: значение параметра (позиция, масштаб, поворот) меняется равномерно. В реальной жизни объекты так не движутся — у них есть инерция, разгон и плавная остановка.

Вторая частая причина — слишком большое расстояние между ключевыми кадрами по значению при малом расстоянии по времени. Объект перелетает экран за долю секунды, и глаз воспринимает это как рывок. Третья причина — низкая частота кадров проекта: при 24–30 fps быстрые движения неизбежно выглядят рваными по сравнению с 60 fps.

  • 🔹 Линейная интерполяция между ключевыми кадрами вместо сглаживания
  • 🔹 Резкие скачки значений при коротких интервалах времени
  • 🔹 Низкий FPS проекта и отсутствие motion blur
  • 🔹 Несогласованные кривые у соседних ключевых кадров

Настройка графиков скорости (Velocity Graphs)

Главный инструмент плавности в Alight Motion — редактор кривых. Выделите ключевой кадр, откройте панель смягчения (иконка кривой рядом с таймлайном) и выберите тип интерполяции. Для большинства движений подходит Ease In-Out: объект плавно разгоняется в начале и плавно тормозит в конце.

Если стандартных пресетов мало, переключитесь на ручную кривую Безье. Потяните ручки кривой: чем положе участок, тем медленнее изменение параметра в этот момент. Классическая S-образная кривая даёт естественное движение с мягким стартом и финишем.

Обратите внимание на стыки: если у соседних ключевых кадров крутизна кривой сильно различается, в точке стыка возникнет видимый «тычок». Выровняйте наклон кривых с обеих сторон ключевого кадра, чтобы скорость переходила непрерывно.

Пошаговая инструкция: плавное движение объекта

Разберём базовый сценарий — плавное перемещение слоя по экрану. Порядок действий универсален и подходит для позиции, масштаба, поворота и прозрачности.

☑️ Плавная анимация за 6 шагов

Выполнено: 0 / 6

После применения кривой обязательно просмотрите результат. Если движение всё ещё кажется вялым или, наоборот, резким в середине — скорректируйте форму кривой, а не добавляйте новые ключевые кадры. Лишние ключи только усложняют контроль над траекторией.

⚠️ Внимание: предпросмотр в приложении может подтормаживать на слабых устройствах, и это легко спутать с дёрганной анимацией. Перед выводами о плавности сделайте тестовый экспорт короткого фрагмента и оцените уже готовое видео.

Частота кадров и motion blur

При создании проекта выберите частоту кадров заранее — менять её в середине работы нежелательно, так как тайминги ключевых кадров привязаны к временной шкале. Для эдитов и анимаций с быстрым движением 60 fps даёт заметно более плавную картинку, чем 30 fps, особенно на смартфонах с экранами 90–120 Гц.

Motion blur (размытие в движении) имитирует работу реальной камеры: быстрые объекты слегка смазываются, и мозг воспринимает движение как непрерывное. В Alight Motion эффект добавляется через панель эффектов слоя. Не переусердствуйте с силой размытия — умеренные значения выглядят естественнее.

ПараметрДля плавностиКомментарий
ИнтерполяцияEase In-Out / кривая БезьеУбирает резкие старты и остановки
FPS проекта60Лучше для быстрых движений
Motion BlurУмеренное значениеСкрывает рывки при быстром смещении
Ключевые кадрыМинимум необходимыхЛишние ключи ломают траекторию
Кривые на стыкахСогласованный наклонИсключает «тычки» между ключами

Продвинутые приёмы: overshoot и вторичное движение

Профессионально выглядящая анимация часто использует overshoot — лёгкий «перелёт» за целевую точку с возвратом назад. Например, при появлении текста масштаб сначала чуть превышает финальный, а затем возвращается к норме. Это имитирует упругость и делает движение живым.

Для реализации добавьте третий ключевой кадр между стартом и финишем со значением чуть больше целевого, и настройте кривые так, чтобы возврат был мягким. Некоторые пресеты кривых типа Back или Elastic, если они доступны в вашей версии приложения, дают похожий эффект автоматически.

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

Как повторить популярный «shake»-эффект плавно

Создайте анимацию позиции с несколькими ключевыми кадрами туда-обратно, уменьшая амплитуду каждого следующего колебания. Примените ко всем ключам сглаживающие кривые и добавьте умеренный motion blur — тряска получится энергичной, но не рваной.

📊 Что чаще всего мешает вам сделать плавную анимацию?
Не понимаю, как настроить графики скорости
Предпросмотр лагает на устройстве
Не хватает знаний по кривым Безье
Всё получается, нужны продвинутые приёмы

Типичные ошибки и как их исправить

Одна из распространённых ошибок — анимировать несколько параметров (позицию, масштаб, поворот) с разными кривыми. Движение распадается на несогласованные части. Решение: применяйте одинаковый тип смягчения ко всем параметрам одного действия.

Ещё одна проблема — слишком короткие интервалы между ключевыми кадрами при больших изменениях значений. Если объект должен пересечь экран, дайте ему достаточно времени или компенсируйте скорость motion blur.

  • ⚙️ Проверьте, что у всех ключевых кадров параметра одинаковый тип интерполяции
  • ⚙️ Увеличьте длительность интервала, если движение выглядит «выстрелом»
  • ⚙️ Отключите лишние эффекты на время отладки — они могут маскировать проблему
  • ⚙️ Экспортируйте тестовый фрагмент, чтобы отличить лаги предпросмотра от реальной дёрганности
⚠️ Внимание: набор пресетов кривых и доступность отдельных функций различается между версиями приложения и типом подписки. Если описанного пункта нет в вашей версии Alight Motion, проверьте обновления или официальную справку приложения.

Оптимизация проекта под плавный результат

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

Также следите за количеством слоёв и эффектов: перегруженный проект может рендериться с пропуском кадров на слабых устройствах. Если предпросмотр тормозит, временно снизьте качество предпросмотра в настройках — на финальный экспорт это не влияет.

Частые вопросы

Почему анимация плавная в предпросмотре, но дёрганная после экспорта?

Проверьте, что FPS экспорта совпадает с FPS проекта, и повысьте битрейт. Также убедитесь, что при экспорте включён motion blur, если вы использовали его в проекте.

Сколько ключевых кадров нужно для плавного движения?

Для простого перемещения достаточно двух ключевых кадров с настроенной кривой Ease In-Out. Большее количество нужно только для сложных траекторий или эффекта overshoot.

Какая частота кадров лучше для эдитов?

Для динамичных эдитов чаще выбирают 60 fps — быстрые движения выглядят заметно плавнее. Для спокойных анимаций достаточно 30 fps, что также снижает нагрузку на устройство.

Что делать, если нет нужного пресета кривой?

Переключитесь на ручной режим кривой Безье и настройте форму вручную: S-образная кривая заменяет большинство пресетов смягчения. Набор пресетов зависит от версии приложения.

Влияет ли подписка на плавность анимаций?

Сами инструменты интерполяции доступны и в бесплатной версии, однако часть эффектов и функций экспорта может быть ограничена. Плавность движения в первую очередь зависит от настройки кривых, а не от типа подписки.