Ключевые кадры в Alight Motion ставятся через иконку в виде ромба — она появляется рядом с параметром (позиция, масштаб, поворот) после того, как вы переместили ползунок на шкале времени. Если анимация «не работает», в большинстве случаев причина одна: пользователь изменил значение параметра, но не поставил второй ключевой кадр, поэтому приложению не между чем интерполировать движение. Без двух точек на таймлайне — начальной и конечной — никакой анимации не будет.
В этой статье разберём, как правильно добавлять ключевые кадры, настраивать плавность через кривые, исправлять типичные ошибки и ускорять работу с проектом. Интерфейс приложения может немного отличаться в зависимости от версии Alight Motion и платформы (Android или iOS), поэтому если какого-то элемента нет на экране — обновите приложение до актуальной версии.
Что такое ключевой кадр и как он работает
Ключевой кадр (keyframe) — это метка на таймлайне, в которой зафиксировано значение параметра: положение объекта, его размер, прозрачность, угол поворота и так далее. Когда вы ставите два ключевых кадра с разными значениями, Alight Motion автоматически вычисляет все промежуточные состояния — это называется интерполяция.
Простой пример: в первом ключевом кадре картинка находится слева экрана, во втором — справа. Приложение само «дорисует» движение между этими точками. Чем больше расстояние между кадрами по времени, тем медленнее движение.
- 🔹 Один ключевой кадр — анимации нет, значение просто зафиксировано.
- 🔹 Два ключевых кадра — простейшая анимация между двумя состояниями.
- 🔹 Три и более — сложное движение с промежуточными точками и изменением траектории.
Как добавить первый ключевой кадр: пошагово
Откройте проект, выберите слой (текст, изображение или фигуру) и перейдите в раздел Перемещение и преобразование (Move & Transform). Именно здесь находятся основные анимируемые параметры: позиция, масштаб, поворот.
Порядок действий следующий:
- 📍 Передвиньте курсор воспроизведения на таймлайне в ту точку, где должна начаться анимация.
- 📍 Нажмите на иконку ромба рядом с нужным параметром — появится первый ключевой кадр.
- 📍 Сдвиньте курсор дальше по времени, измените значение параметра (например, перетащите объект) — второй ключевой кадр добавится автоматически или через повторное нажатие ромба.
- 📍 Нажмите Play и проверьте результат.
☑️ Проверка перед созданием анимации
Если после изменения параметра ромб не подсвечивается и кадр не создаётся — скорее всего, вы не нажали на иконку в первый раз, и приложение просто меняет статичное значение. Удалите изменение, вернитесь к начальной точке и начните с явного нажатия на ромб.
Анимация прозрачности и других параметров
Помимо движения, ключевые кадры работают почти со всеми настройками слоя. Чтобы сделать плавное появление объекта, откройте раздел Цвет и заливка или параметр Непрозрачность (Opacity), поставьте первый кадр со значением 0% и второй — со 100%.
Таким же способом анимируются эффекты: блюр, свечение, искажение. Добавьте эффект на слой, откройте его настройки — у большинства параметров будет тот же ромб. Это позволяет, например, плавно «нарастить» размытие в нужный момент видео.
Настройка плавности: кривые и easing
Линейная интерполяция выглядит механически: объект движется с постоянной скоростью и резко останавливается. Чтобы движение стало «живым», выделите ключевой кадр на таймлайне и откройте настройки кривой движения (график скорости). В Alight Motion доступны готовые пресеты easing и ручная настройка кривой Безье.
Классические варианты: ease in — медленный старт с ускорением, ease out — плавное торможение в конце, ease in-out — мягкие старт и финиш. Для «подпрыгивающих» анимаций используют кривые с перелётом за конечную точку.
| Тип кривой | Характер движения | Где применять |
|---|---|---|
| Linear | Постоянная скорость | Бегущая строка, фон |
| Ease In | Медленный старт | Улетающие объекты |
| Ease Out | Плавная остановка | Появление текста |
| Ease In-Out | Мягкие старт и финиш | Камера, зум, переходы |
⚠️ Внимание: слишком резкие кривые с сильным «перелётом» могут выглядеть хорошо на коротких анимациях, но на длинных интервалах создают эффект дёрганности. Всегда проверяйте результат на предпросмотре перед экспортом.
Как скопировать анимацию на другой слой
Выделите слой с готовыми ключевыми кадрами, используйте функцию копирования эффектов/анимации (в актуальных версиях — через меню слоя), затем вставьте на целевой слой. Точное название пункта зависит от версии приложения — проверьте меню слоя в вашей сборке.
Типичные ошибки при работе с ключевыми кадрами
Новички чаще всего сталкиваются с тремя проблемами. Первая — анимация происходит «не там»: ключевой кадр случайно поставлен не на том слое или не на том параметре. Решение — развернуть слой и проверить, у какого именно свойства стоят метки-ромбы на таймлайне.
Вторая ошибка — лишние ключевые кадры. При активной работе легко наставить десяток случайных точек, и объект начинает дёргаться. Удаляйте ненужные кадры долгим нажатием или через выделение на таймлайне. Третья проблема — слишком маленький интервал между кадрами: анимация проскакивает за долю секунды и кажется отсутствующей.
⚠️ Внимание: при большом количестве анимированных слоёв и эффектов предпросмотр может тормозить — это ограничение производительности устройства, а не ошибка проекта. Снижайте качество предпросмотра в настройках проигрывателя, если такая опция доступна в вашей версии.
Полезные приёмы для ускорения работы
Опытные пользователи Alight Motion редко анимируют каждый слой с нуля. Вместо этого создают один «эталонный» слой с анимацией и дублируют его, меняя только содержимое. Также удобно группировать слои и анимировать всю группу целиком — например, для общего зума композиции.
Ещё один приём — использование родительских связей (parenting), если функция доступна в вашей версии: дочерний слой повторяет трансформации родительского, но при этом может иметь собственную анимацию. Это основа сложных движений вроде вращающегося объекта, который одновременно летит по экрану.
Часто задаваемые вопросы
Почему ключевой кадр не ставится — иконка ромба неактивна?
Проверьте, выбран ли слой и открыт ли раздел с анимируемым параметром. Если кнопка всё равно недоступна, возможно, вы пытаетесь анимировать параметр, который не поддерживает ключевые кадры, либо версия приложения устарела — обновите Alight Motion через магазин приложений.
Можно ли переместить ключевой кадр по таймлайну?
Да. Выделите ключевой кадр (тап по ромбику на шкале параметра) и перетащите его в нужную точку времени. Так вы измените скорость анимации, не трогая сами значения.
Как удалить все ключевые кадры параметра сразу?
Обычно достаточно открыть настройки параметра и сбросить анимацию, либо выделить все метки на таймлайне и удалить их. Точный способ зависит от версии приложения — ищите опцию сброса в меню параметра.
Доступны ли ключевые кадры в бесплатной версии?
Базовая анимация ключевыми кадрами доступна бесплатно, однако часть продвинутых функций (некоторые эффекты, экспорт без водяного знака) может требовать подписки. Актуальный список ограничений смотрите в описании приложения в вашем магазине.
Почему анимация дёргается при предпросмотре?
Возможные причины: слишком много эффектов и слоёв для вашего устройства, лишние случайные ключевые кадры или слишком короткий интервал между точками. Проверьте таймлайн на предмет лишних меток и понизьте качество предпросмотра.