Создание анимаций в After Effects
Если что-то будет не понятно, вы всегда можете открыть и посмотреть готовые анимации в файле bacteria_blue.aep в репозитории проекта.
Анимация появления бактерии из фейда
Давайте создадим анимацию появления бактерии. Для этого поставим указатель времени на 0, мы же хотим, чтобы с самого начала наша бактерия была скрыта. Чтобы синхронизировать анимацию туловища и ног, нужно выделить обе дорожки bacteria_legs и bacteria_body с зажатым Ctrl или Shift. Далее под любой из дорожек кликнем по Преобразовать, откроется список анимаций. Нам нужен пункт Непрозрачность. Слева от пункта находится значок секундомера, а справа устанавливаемое значение. Кликаем по секундомеру, чтобы активировать анимацию и выставляем значение в 0. На дорожке соответствующей нашей анимации вы увидите, как появится маленький ромбик - это точка нашей анимации. Перемещаем указатель времени на 1 секунду и выставляем значение непрозрачности 100. На дорожке анимации появится еще одна точка. Все, анимация готова!
Анимацию можно немного улучшить, поменяв ей плавность (easing). Для этого кликнем на первую точку нашей анимации, а затем на значок Редактор диаграмм.
Вы увидите прямую, а именно линейный easing. Давайте поменяем его. Под диаграммой есть панель инструментов, найдите там Плавное замедление и кликните на него. Тоже самое проделайте со второй точкой (выходить из редактора диаграмм не обязательно, просто кликните на вторую точку прямо в нем). Прямая превратится в синусоиду и мы получим плавное изменение прозрачности!
Анимация стирания бактерии растущей спиралью
Теперь давайте попробуем анимировать стирание бактерии, когда по ней проходит спираль. Эффект должен быть похож на стирание ластиком. Часть бактерии справа от границы спирали должна быть видима, а часть слева - уже нет. Сделать эту анимацию чуть сложнее, т.к. она более комплексная и задействует сразу несколько слоев. Нам потребуется дополнительный невидимый слой-маска, который мы повесим на крайний правый завиток спирали и который будет выполнять функцию ластика. В нашей композиции есть такой слой - он называется "Кривые mask" (поскольку ранее мы выполнили преобразование слоя в кривые). Причем он потребуется нам в двух экземплярах - один для туловища и один для ног бактерии. Скопируем его (Ctrl+C => Ctrl+V). Для удобства назовем один "Кривые mask_legs", а другой "Кривые mask_body". Для обоих зададим в качестве родительского слой "Кривые spiral" и оба сделаем невидимыми.
Порядок слоев имеет ключевое значение для этой анимации, если он будет неправильный - анимация не сработает. Поэтому "Кривые mask_legs" нужно поместить строго над "bacteria_legs", а "Кривые mask_body" - строго над "bacteria_body". После этого для каждой части бактерии в колонке TrkMat нужно задать инвертированную подложку альфа-канала.
На этом подготовка слоя-ластика закончена. Переходим к анимации спирали. Для начала нужно указать опорную точку, из которой спираль начнет расти. Под элементом "Кривые spiral" кликнем по Преобразовать и в списке анимаций выберем пункт Опорная точка. Нужно добиться того, чтобы положение опорной точки совпало с началом спирали. Если начальное позиционирование всей спирали (не опорной точки) сбилось, откорректируйте его по макету с включенным слоем bg.
На 3 отрезке спираль должна вырасти из точки до размеров, достаточных для перекрытия бактерии (в нашем демо с 0% до 114%). На 4 отрезке - вырасти в 2 раза (со 114% до 228%), при этом уходя в фейд. Порядок действий точно такой же как в анимации появления из фейда, только в списке анимаций нам нужно выбрать Масштаб.
Анимация покачивания ногами
Наконец, давайте сделаем анимацию, во время которой бактерия болтает ножками в разные стороны. Порядок действий точно такой же как в анимации появления из фейда, только в списке анимаций нам нужно выбрать Поворот. Первую точку поставим на нулевой секунде и зададим поворот на 12 градусов. Вторую точку поставим на 30-ой секунде и зададим поворот 0 градусов. Поскольку бактерия должна болтать ножками непрерывно, то просто размножим наши точки до конца рабочей области.
← Импорт и настройка композиции в After Effects | Содержание | Экспорт анимаций с помощью Bodymovin →