Выберите слой в композиции.
Скачать пример проекта
Загрузите этот .aep файл, чтобы начать работать со следующими примерами выражений.
Случайное покачивание
Покачивание — одно из самых распространенных выражений After Effects. Оно виляет объектом на основе случайных значений. С помощью этого выражения можно сделать сцену более естественной. Это выражение добавляется в свойство слоя Положение.
Нажмите P для отображения свойства Положение на панели Временная шкала.
Щелкните секундомер слева от названия свойства, удерживая клавишу Alt (Windows) или Option (macOS).
Введите следующий фрагмент кода в поле выражения:
wiggle(2,30)
В этом примере: покачивание (частота, величина), где первое значение — это количество колебаний в секунду, а второе — величина покачивания. Следовательно, при использовании wiggle(2,30) слой будет покачиваться 2 раза в секунду, не больше чем на 30 пикселей в любом направлении.
Управление покачиванием с помощью ползунков
Выражения можно сделать с ключевыми кадрами, заменив значения ссылками на элементы управления выражениями, такими как Ползунок. Заменив второй аргумент выражения wiggle() ссылкой на Ползунок, можно создать ключевой кадр этого поведения, чтобы оно запускалось и выключалось в определенное время.
Добавьте эффект элемента управления Ползунок к любому слою и назовите его «Wiggle Amount».
Примените следующее выражение к свойству Положение того же слоя:
// Использует инструмент связывания для создания «effect(...)»со Слоем ползунка
var wiggleAmount = effect("Wiggle Amount")("Slider");
// Колебание 4 раза в секунду на величину, заданную ползунком
wiggle( 4, wiggleAmount );
Слой вращается по кругу
Можно создать выражение без использования свойств из других слоев. Например, можно заставить слой вращаться вокруг центра композиции.
Выберите слой в композиции.
Нажмите P для отображения свойства Положение на панели Временная шкала.
Щелкните секундомер слева от названия свойства, удерживая клавишу Alt (Windows) или Option (macOS).
Введите следующий фрагмент кода в поле выражения:
var centerOfComp = [ ( thisComp.width / 2 ), ( thisComp.height / 2) ];
var circleOverTime = [ Math.sin( time ) * 50, -Math.cos( time ) * 50 ];
centerOfComp + circleOverTime;
Перелет
Также называемое отскоком по инерции, это выражение использует анимацию ключевых кадров слоя для создания естественно выглядящего перелета. Оно создает отскок любого параметра между ключевыми кадрами на основе его скорости. Отскок происходит в том направлении, в котором движется объект. Для достижения этой анимации:
Создайте или импортируйте графические элементы в After Effects.
Добавьте ключевые кадры в свойство Положение слоя, к которому необходимо добавить анимацию.
Добавьте следующее выражение в свойство Положение слоя:
// Устанавливает значения для контроля превышения.
// Свяжите их с элементами управления выражений ползунка для быстрого предварительного просмотра различных настроек.
var amp = 40;
var freq = 30;
var decay = 50;
// Находит ближайший ключевой кадр
var nK = nearestKey(time);
var n = (nK.time <= time) ? nK.index : --nK.index;
var t = (n === 0) ? 0 : time - key(n).time;
// Если текущее время позже ключевого кадра, вычислить превышение.
// Если нет, использовать исходное Значение.
if ( n > 0 && t < 1 ) {
var v = velocityAtTime( key( n ).time - thisComp.frameDuration /10 );
value + v * amp * .001 * Math.sin(freq * .1 * t * 2 * Math.PI) / Math.exp(decay * .1 * t);
} else {
value;
}
Вращение со временем
При необходимости инструмент «Лассо» может связывать значения поворота между слоями для анимации объектов. Принцип работы часов. Представьте, что эти три круга — стрелки часов. Часовая стрелка движется между часами, а минутная делает полный круг по циферблату.
Импортируйте или создайте три слоя с кругами сплошного цвета. Предположим, что один из них работает как часовая стрелка, другой как минутная стрелка, а третий как секундная.
Разместите опорные точки на концах слоев.
Переместите слои так, чтобы опорные точки находились в центре композиции.
Задание ключевых кадров «Поворот» для часовой стрелки. Выберите свойство Поворот для минутной стрелки, а затем пункт Анимация > Добавить выражение.
Перетащите инструмент «Лассо» к свойству Поворот для самого большого круга. Появится следующее выражение:
thisCompayer(“circle”)otation
Чтобы второй круг поворачивался в 12 раз быстрее первого, добавьте *12 в конце выражения следующим образом:
thisCompayer(“circle”)otation*12
Повторите то же самое с третьим кругом, добавив в конце выражения *24:
thisCompayer(“circle”)otation*24
Цикл
Выражения можно использовать для циклического воспроизведения и расширения анимации без добавления дополнительных ключевых кадров. Например, можно создать несколько фигур, которые будут вращаться на протяжении всей композиции. Для этого добавьте один ключевой кадр к свойству Поворот для начала вращения, а затем добавьте второй с концом вращения. Применение метода loopOut() к свойству Поворот с ключевым кадром позволит слою продолжить вращение после последнего ключевого кадра.
Параметры, используемые в примере loopOut(), приведенном ниже, указывают тип цикла и количество ключевых кадров, включенных в него.
//loopOut настроен на цикл всех ключевых кадров
loopOut("cycle", 0);
Первый параметр — "cycle", один из четырех доступных режимов цикла для метода loopOut. Тремя другими режимами являются "continue", "offset"и "ping-pong". "cycle" начинает циклическое повторение в последнем ключевом кадре, начиная со значений первого ключевого кадра в диапазоне, определенном вторым параметром.
Второй параметр — это число ключевых кадров, включаемых в цикл, которое отсчитывается в обратном порядке от последнего ключевого кадра. Если второй параметр не задан или для него установлено значение 0, все анимации ключевого кадра свойства будут циклически повторяться после последнего ключевого кадра. Если для параметра установлено значение 1, анимация будет зацикливаться между последним и предыдущим ключевым кадром. Если установлено значение 2, анимация будет зацикливаться находиться между последним ключевым кадром и двумя предшествующими ему ключевыми кадрами и т. д.
Получение истинного положения дочернего слоя
Если у слоя есть родительский слой, значение, отображаемое в его свойстве Положение, отображает не его «истинное» местоположения в Композиции, а местоположение относительно его родительского слоя. Чтобы найти истинное местоположение дочернего слоя, необходимо использовать выражение для преобразования координатного пространства родительского слоя в координатное пространство композиции. Примените следующее выражение к Положению слоя без родительского слоя, чтобы связать его с расположением дочернего слоя:
// Определяет родительский слой
var targetLayer = thisComp.layer("Parented Layer");
// Находит опорную точку родительского слоя в композиции
targetLayer.toComp( targetLayer.anchorPoint );
Задержка положения слоя относительно его родителя
Задержка и смещение — отличные способы сделать анимацию более динамичной и естественной. Чтобы создать смещения и управлять ими, необходимо добавить несколько дочерних слоев к одному родительскому слою, а затем применить выражение к Положению каждого из дочерних слоев, создавая задержку движений, унаследованных от родителя.
Обратите внимание, что этот метод работает только с дочерними слоями.
// Устанавливает величину задержки в кадрах
var delay = 5;
// Смещает позицию слоя во времени на основе задержки
parent.fromComp( toComp( anchorPoint, time - framesToTime( delay ) ) );
Также можно установить величину задержки на основе индекса дочернего слоя относительно родительского слоя. Это позволяет легко изменить порядок анимаций дочерних слоев, размещая их на Временной шкале под родительским слоем (или над ним при необходимости их появления перед родительским слоем):
// Устанавливает величину задержки в кадрах
var delay = 5;
// Умножает задержку в зависимости от индекса этого слоя относительно его родителя
var multiplyDelay = delay * ( index - parent.index )
// Смещает позицию слоя во времени на основе задержки
parent.fromComp( toComp( anchorPoint, time - framesToTime( multiplyDelay ) ) );
Пример выражения: запуск или остановка покачивания в заданное время
Добавьте следующее выражение к свойству Положение элемента для запуска эффекта покачивания, начинающегося со 2-й секунды анимации:
var timeToStart = 2;
if (time > timeToStart) {
wiggle(3,25);
} else {
value;
}
Добавьте следующее выражение к свойству Положение элемента, чтобы запустить эффект покачивания в начале анимации и остановить его через 4 секунды:
var timeToStop = 4;
if ( time > timeToStop ) {
value;
} else {
wiggle( 3, 25 );
}
Добавьте следующее выражение к свойству Положение элемента, чтобы запустить эффект покачивания с началом через 2 секунды после начала анимации и остановить его через 4 секунды:
var timeToStart = 2;
var timeToStop = 4;
if ( ( time > timeToStart ) && ( time < timeToStop ) ) {
wiggle(3,25);
} else {
value;
}
Пример выражения: размещение одного слоя между двумя другими слоями
С помощью этого выражения можно разместить и сохранить расположение одного слоя на равном расстоянии между двумя другими слоями.
Начните с создания трех слоев.
Анимируйте положения первых двух слоев на панели Временная шкала.
Узнайте о работе с функцией Пути движения.
( thisComp.layer(1).position + thisComp.layer(2).position ) / 2
Создание следа изображений
Это выражение позволяет настроить расположение слоя таким образом, чтобы слой находился в той же точке, что и следующий верхний слой на панели «Временная шкала», но имел определенную временную задержку (в этом случае 0,5 секунды). Подобные выражения можно задать другим геометрическим свойствам.
Начните со слоя формы, масштабированного примерно до 30% размера композиции.
Откройте свойство Положение и добавьте ключевые кадры. Выберите слой. Нажмите клавишу P, чтобы открыть свойство Положение. Щелкните кнопку секундомера слева от названия свойства, удерживая клавишу ALT (Windows) или (macOS).
Введите следующее выражение в поле выражения:
thisComp.layer(thisLayer, -1).position.valueAtTime(time - .5)
Продублируйте последний слой пять раз, выделив его и пять раз нажав комбинацию клавиш Ctrl+D (Windows) или Command+D (macOS). Все слои повторяют один и тот же путь, а каждый из них отстает от предыдущего на 0,5 секунды.
Пример выражения: создание купола между двумя слоями
Это выражение позволяет синхронизировать аргумент Центр купола эффекта Купол в одном слое с положением другого слоя. Например, можно создать эффект, который будет выглядеть, как увеличительное стекло, перемещаемое по слою, а содержание области охвата стекла будет выпуклым во время движения линзы (то есть вышележащего слоя). Это выражение использует метод fromWorld, обеспечивающий правильную работу выражения независимо от того, что именно движется: слой увеличительного стекла или нижележащий слой. Нижележащий слой можно повернуть или изменить его масштаб, при этом выражение не изменится.
С этим выражением можно также использовать другие эффекты, например, Рябь.
Начните с создание двух слоев. Сделайте один слой увеличительным стеклом или подобным объектом с отверстием в середине и назовите его Увеличитель.
Анимируйте положение слоя увеличительного стекла.
Примените эффект «Купол» к другому слою.
fromWorld(thisCompayer(“Magnifier”)osition)
Пример выражения: затухание непрозрачности 3D-слоя на основании расстояния от камеры
Примените следующее выражение к свойству 3D-слоя Непрозрачность:
var startFade = 500; // Начать исчезновение в 500 пикселях от камеры.
var endFade = 1500; // Завершить исчезновение в 1500 пикселях от камеры.
try {
// Проверить, есть ли камера
var C = thisComp.activeCamera.toWorld([0,0,0]);
} catch ( err ) {
// Нет камеры, поэтому принять 50mm
var w = thisComp.width * thisComp.pixelAspect;
var z = (w/2)/Math.tan(degreesToRadians(19.799));
var C = [0,0,-z];
}
var P = toWorld( anchorPoint );
var d = length( C, P );
linear( d, startFade, endFade, 100, 0 );
Затухание начинается на расстоянии 500 пикселей от камеры и завершается на расстоянии 1500 пикселей от камеры. Метод линейной интерполяции используется для сопоставления значений расстояния со значениями непрозрачности.
Пример выражения: добавление к 3D-слою невидимости, если он направлен в противоположную от камеры сторону
Примените следующее выражение к свойству 3D-слоя Непрозрачность:
if ( toCompVec([0, 0, 1])[2] > 0 ) {
value;
} else {
0;
}
Пример выражения: горизонтальное отражение слоя, если он направлен в противоположную от камеры сторону
Примените следующее выражение к свойству 3D-слоя Масштаб:
if ( toCompVec([0, 0, 1])[2] > 0 ) {
value;
} else {
[ -value[0], value[1], value[2] ];
}
Пример выражения: анимация масштаба в каждом маркере слоя
Примените следующее выражение к свойству Масштаб, чтобы добавить колебания слоя в каждом маркере:
var n = 0;
var t = 0;
if (marker.numKeys > 0){
n = marker.nearestKey(time).index;
if (marker.key(n).time > time) n--;
}
if (n > 0) t = time - marker.key(n).time;
var amp = 15;
var freq = 5;
var decay = 3.0;
var angle = freq * 2 * Math.PI * t;
var scaleFact = (100 + amp * Math.sin(angle) / Math.exp(decay * t)) / 100;
[value[0] * scaleFact, value[1] / scaleFact];
Чтобы добавить маркер, выберите Слой > Маркеры > Создать маркер.
Вместо используемого здесь выражения wiggle для запуска или остановки воздействия любого выражения в указанном времени можно использовать любое выражение.
Пример выражения: сопоставление фокальной плоскости камеры с другим слоем
Примените следующее выражение к свойству слоя камеры Фокусное расстояние, чтобы сопоставить ее фокусное расстояние с расстоянием до опорной точки слоя с именем 'Target':
var target = thisComp.layer("target");
var V1 = target.toWorld( target.anchorPoint ) - toWorld( [ 0, 0, 0 ] );
var V2 = toWorldVec( [ 0, 0, 1 ] );
dot( V1, V2 );
Дополнительные ресурсы о выражениях
Итак, вы изучили основные принципы выражений. На сайте сообщества вы найдете наглядные примеры и сможете показать свои работы.
Связанные материалы
Создавайте потрясающие 3D-анимации в After Effects
Анимируйте персонажей и иллюстрации, добавляйте анимацию в текст и многое другое.