Как сделать ключевые кадры в Alight Motion: от первого ромба до кривых Bounce и Elastic

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

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

Какие свойства слоя поддаются анимации и как выглядит вставший кадр

Формулировка на сайте разработчика максимально широкая: «анимируй любое свойство». В справке по кривым перечислены конкретные примеры — положение, масштаб, поворот, цвет, прозрачность. Но список ими не заканчивается.

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

Анимируются камеры — на сайте они вынесены отдельным пунктом, с панорамой, зумом и расфокусом. Анимируется и целая пачка слоёв сразу, если повесить их на родителя: родительский слой управляет положением, поворотом и масштабом детей, а невидимый Null Object работает как ручка, которая сама в экспорт не попадает.

Есть и обратный случай — кадры, которые ты не ставил. Часть эффектов, например Oscillate и Pulse Size, создаёт собственную анимацию без единого ромба; в официальном гайде это называется неявными ключевыми кадрами. Знать об этом стоит хотя бы затем, чтобы не искать, откуда взялось дрожание, которого ты не задавал.

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

Сюда же примыкает наследование. Эффекты, помеченные тегом Layer Parenting — Bend, Oscillate, Auto-Shake, — передают свою трансформацию дочерним слоям, а отдельный Parenting Helper настраивает, насколько послушно ребёнок повторяет родителя: режимы называются Normal, Locked и Weighted. Один из тех случаев, когда одна анимация на родителе заменяет пять анимаций на детях.

Почему движение получается роботным

Между двумя ключевыми кадрами приложение по умолчанию раскладывает изменение равномерно. Каждый кадр — одинаковый шаг. В природе так не двигается ничего: мяч разгоняется, машина тормозит, рука замахивается перед броском.

Лечится это одним словом — easing, то есть управление тем, как распределяется скорость внутри интервала. Ключевые кадры отвечают на вопрос «где и когда», кривая — на вопрос «как быстро в каждый момент».

Кривая — не украшение. Она сообщает зрителю вес объекта: тяжёлое стартует неохотно и тормозит долго, лёгкое срывается мгновенно. Одна и та же траектория с разными кривыми читается то как камень, то как пёрышко.

Curve Editor: оси, ручки и крутизна наклона

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

Дальше начинается самое неинтуитивное место во всём приложении. По горизонтальной оси отложено время проекта, по вертикальной — переназначенное время анимации. Не расстояние, не скорость, а именно время. Чем круче участок кривой, тем быстрее в этот момент идёт движение; пологий участок — замедление.

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

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

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

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

И держи в голове главное свойство кривой: она принадлежит паре кадров, а не слою.

Bounce, Elastic, Steps и остальные кривые — когда какая нужна и что она делает с движением

Три базовые кривые справка объясняет через понятные образы, и лучше не придумаешь.

Ease-in — движение начинается медленно и разгоняется, «как взлетающая ракета». Логичный выбор для объекта, который уходит из кадра: он должен набирать скорость и исчезать.

Ease-out — движение плавно тормозит, «как поезд, прибывающий на станцию». Это про объект, который входит в кадр и должен в нём остановиться.

Ease-in-out — медленный старт, разгон, плавное торможение. Универсальный вариант для перемещения между двумя позициями внутри кадра.

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

Bounce имитирует движение под действием гравитации с отскоком — объект падает, ударяется, подпрыгивает всё ниже. Elastic работает как отпущенная пружина: значение проскакивает мимо цели и колеблется вокруг неё, затухая. Cyclic гоняет значение между двумя точками по кругу — готовое зацикленное покачивание без ручной расстановки десятка кадров. Random добавляет контролируемую случайность, удобную для дрожания и помех. Steps двигает дискретными интервалами, как секундная стрелка часов: не плавно, а рывками по щелчкам. Elastic Steps — те же шаги, но каждый с упругим отскоком.

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

Есть ещё один слой этой истории, о котором почти не говорят, — размытие движения. В описании приложения оно названо velocity-based motion blur: смаз считается от скорости. А скорость в каждый момент задаёт как раз кривая. Связь получается прямая — меняешь форму кривой, и меняется не только характер движения, но и то, насколько сильно объект размазывается на разгоне. Крутой участок даёт заметный смаз, пологий почти не мажет.

Вывод отсюда неочевидный. Если анимация выглядит вяло, не обязательно ускорять её целиком: иногда хватает сделать кривую резче на коротком отрезке — объект оживёт за счёт смаза, а общая длительность не изменится ни на кадр.

Как выбирать из девяти вариантов, когда глаза разбегаются? Сузь задачу до одного вопроса: что объект делает. Появляется — ease-out. Уходит — ease-in. Перемещается внутри кадра — ease-in-out. Реагирует на удар, клик, звук — Bounce или Elastic. Покачивается фоном без конца — Cyclic. Дрожит, глючит, шумит — Random. Тикает дискретно, как счётчик или старая плёнка, — Steps.

Этот короткий список закрывает почти всё, что делают в мобильном монтаже. Редактор кривых остаётся для случаев, когда движение обязано попасть в конкретный удар в треке, — и таких случаев меньше, чем кажется на старте.

Overshoot и копирование кривых

Две функции, до которых доходят не сразу, а зря.

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

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

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

Скажу как есть: Overshoot я считаю самой недооценённой галочкой в приложении. Она выключена по умолчанию, спрятана в дополнительном меню и не упоминается почти ни в одном коротком видео — при том, что включение занимает две секунды и меняет ощущение от движения сильнее, чем смена самой кривой.

Частые вопросы про ключевые кадры в Alight Motion

### Сколько кривых получается, если кадров пять?

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

### Почему кривая не открывается, хотя кадры стоят?

Скорее всего плейхед стоит не между кадрами, а точно на кадре или вне отрезка анимации. Сдвинь его в середину интервала — редактор оживёт.

Та же логика работает и в обратную сторону: если кадров всего два и они стоят вплотную, интервала между ними физически нет, и править тоже нечего.

### Можно ли анимировать параметр эффекта, а не только позицию?

Да, и это открывает половину интересного. Параметры эффектов ставятся на ключевые кадры так же, как положение слоя. Отдельно помни про эффекты вроде Oscillate и Pulse Size — они генерируют собственную анимацию без ромбов.

### Что делать, если анимация дёргается на стыке двух кадров?

Способы оплаты подписки собраны в отдельном материале — «Как оплатить Alight Motion из России в 2026 году: подписку без зарубежной карты».

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