Выражения в after effects: Примеры выражений After Effects

Иллюстрация: Оля Ежак для Skillbox Media

Степан Степанов

Автор статей по дизайну. В веб-дизайн пришёл в 2013 году, осознанно начал заниматься с 2015 года. Параллельно освоил вёрстку. Время от времени публикую переводы на Habr.

У After Effects так много стандартных возможностей, что начинающие дизайнеры о них просто не подозревают и начинают искать лишние плагины. Одна из таких функций — эффект случайных колебаний Wiggle.

Рассказываем, как с его помощью самостоятельно сделать текстовый эквалайзер.

Откройте After Effects и создайте новый проект: «Файл» → «Создать» → «Создать проект». Затем создайте в нём композицию: «Создать композицию».

В окне настроек композиции частоту кадров выставьте 30, длительность — 30 кадров, цвет фона выберите #0E1621. Чтобы не путаться, назовите композицию Wiggle.

Эффект генерируется с помощью выражений, которые можно применить для разных свойств объекта. Например, для положения, масштаба или поворота.

Эффект имеет два параметра: Frequency («Частота») и Amplitude («Амплитуда»). Записывается в формате wiggle(10,20), где 10 — это частота, а 20 — амплитуда.

Теперь посмотрим на практике, куда вписывать и как работают эти параметры:

• Выберите инструмент «Прямоугольник» на основной панели инструментов или нажмите на клавиатуре клавишу Q.
• Нарисуйте прямоугольник или квадрат в рабочей области.
• Перейдите на панель слоёв и нажмите на стрелку слева от слоя, чтобы раскрыть его список свойств.
• Выберите пункт «Преобразовать» → «Положение».

• Нажмите клавишу Alt (Option) и, не отпуская, нажмите левой кнопкой мыши на иконку секундомера рядом с этим свойством, на панели «Таймлайн» откроется редактор, в котором уже будет запись transform. position.
• Перейдите в редактор, удалите запись и наберите выражение wiggle(10,20).
• Переместите курсор в любую часть рабочей области и нажмите левой кнопкой мыши, чтобы снять выделение с выражения и применить его.

Чтобы проверить результат, нажмите пробел. Должно получиться примерно так:

Теперь примените выражение wiggle(10,20) к свойствам «Масштаб» и «Поворот».

Это можно сделать отдельно для масштаба:

Отдельно для поворота:

Или для всего сразу:

Выражение wiggle(10,20) по умолчанию регулирует движение во все стороны. Но каждую ось можно регулировать отдельно, если прописать его так:
value[0],wiggle(10,20)[1].

Value — это обращение параметра к самому себе, а wiggle — колебания по вертикальной оси. Напишите это выражение для свойства «Положение».

Value 0 означает, что мы отключаем колебание по горизонтальной оси, а wiggle 1 — что включаем вертикальные колебания.

Нажмите пробел на клавиатуре и протестируйте результат:

Сначала сделайте текстовый слой:

• Удалите все слои композиции.
• Создайте новый текстовый слой, для этого нажмите правой кнопкой мыши в любом месте на панели слоёв и выберите «Создать» → «Текст».
• Нажмите левой кнопкой мыши на рабочей области и наберите букву S.
• На панели справа от рабочей области откройте вкладку «Символ». Выберите гарнитуру Montserrat Bold, размер установите 220.

Теперь попробуйте сделать анимацию для буквы S с помощью свойства «Масштаб»:

• Перейдите на панель слоёв и нажмите на стрелку слева от слоя, чтобы раскрыть список свойств слоя.
• Выберите пункт «Преобразовать» → «Масштаб», также можно нажать клавишу S на клавиатуре.
• Нажмите клавишу Alt (Option) и, не отпуская, нажмите левой кнопкой мыши на иконку секундомера рядом с этим свойством, на панели «Таймлайн» откроется редактор, в котором уже будет запись transform.position.
• Перейдите в редактор и наберите выражение
  [value[0],wiggle(10,20)[1].
• Нажмите пробел на клавиатуре и протестируйте результат.

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

• Нажмите клавишу Y на клавиатуре или выберите иконку на основной панели инструментов — «Опорная точка».
• Передвиньте опорную точку текстового слоя на линию нижней границы.
• Нажмите пробел на клавиатуре и протестируйте результат.

Теперь нужно доработать текстовый эквалайзер. Для этого необходимо продублировать слой с буквой S, заменить буквы и выровнять слои.

• Перейдите на панель слоёв и левой кнопкой мыши нажмите на слой с буквой S.
• Нажмите на клавиатуре сочетание клавиш Ctrl + D, чтобы скопировать слой.
• Перейдите в рабочую область композиции и сдвиньте слой вправо.
• Дважды кликните по нему левой кнопкой мыши и напечатайте букву K.
• Повторите результат с копированием и переименованием слоёв, пока не получите слово Skillbox.

• Перейдите на панель слоёв и с помощью клавиши Shift выделите все слои.
• На панели справа от рабочей области откройте вкладку «Выровнять» и в строке «Выровнять слои» нажмите на самую правую иконку — она выравнивает слои относительно их нижней границы.
• Затем выделите последние буквы box и во вкладке «Выровнять» в строке «Распределить слои» нажмите на вторую справа иконку — она распределит слои по горизонтали так, что между буквами будет одинаковое расстояние.
• Нажмите пробел на клавиатуре и протестируйте результат.

Чтобы сделать эквалайзер плавнее, измените значение частоты до пяти для всех слоёв, амплитуду тоже можно уменьшить до десяти. Выражение будет выглядеть так — value[0],wiggle(5,10)[1]. Для большей реалистичности можно указать разные значения для каждого слоя.

Больше об After Effects

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

Участвовать

Выбрали маскотов Олимпиады 2026 10 мар 2023

На ярмарке дизайна Collectible покажут восковой стул от российских дизайнеров 09 мар 2023

Яёи Кусама представит новую «Бесконечную зеркальную комнату» 09 мар 2023

Понравилась статья?

Да

Изучите основы выражений для связывания анимаций

Руководство пользователя Отмена

Поиск

1. Руководство пользователя After Effects
   
2. Бета-версии
   1. Обзор программы бета-тестирования
   2. Домашняя бета-версия After Effects
   3. Функции в бета-версии
      1. Панель свойств (бета-версия)
      2. Диспетчер эффектов (бета-версия)
         
      3. Запуск и восстановление в настройках (бета-версия)
         
      4. Импорт 3D-моделей (бета-версия)
3. Начало работы
   1. Начало работы с After Effects
   2. Что нового в After Effects
   3. Примечания к выпуску | После Эффекты
   4. Системные требования After Effects
   5. Сочетания клавиш в After Effects
   6. Поддерживаемые форматы файлов | После Эффекты
   7. Рекомендации по оборудованию
   8. After Effects для Apple Silicon
   9. Планирование и настройка
4. Рабочие области
   1. Общие элементы пользовательского интерфейса
   2. Знакомство с интерфейсом After Effects
   3. Рабочие процессы
   4. Рабочие пространства, панели и средства просмотра
5. Проекты и композиции
   1. Проекты
   2. Основы композиции
   3. Предварительная компоновка, вложение и предварительный рендеринг
   4. Просмотр подробной информации о производительности с помощью Composition Profiler
   5. Средство визуализации композиции CINEMA 4D
6. Импорт отснятого материала
   1. Подготовка и импорт неподвижных изображений
   2. Импорт из After Effects и Adobe Premiere Pro
   3. Импорт и интерпретация видео и аудио
   4. Подготовка и импорт файлов 3D-изображений
   5. Импорт и интерпретация элементов видеоряда
   6. Работа с элементами видеоряда
   7. Обнаружение точек редактирования с помощью обнаружения редактирования сцены
   8. Метаданные XMP
7. Текст и графика
   1. Текст
      1. Форматирование символов и панель символов
      2. Текстовые эффекты
      3. Создание и редактирование текстовых слоев
      4. Форматирование абзацев и панели «Абзац»
      5. Выдавливание текстовых и фигурных слоев
      6. Анимированный текст
      7. Примеры и ресурсы для текстовой анимации
      8. Живые текстовые шаблоны
   2. Анимационная графика
      1. Работа с шаблонами анимационного дизайна в After Effects
      2. Использование выражений для создания раскрывающихся списков в шаблонах анимационного дизайна
      3. Работа с основными свойствами для создания шаблонов анимационного дизайна
      4. Замена изображений и видео в шаблонах анимационного дизайна и основных свойствах
8. Рисование, рисование и контуры
   1. Обзор слоев фигур, контуров и векторной графики
   2. Инструменты рисования: Кисть, Штамп и Ластик
   3. Штрихи в форме конуса
   4. Атрибуты фигуры, операции рисования и операции пути для слоев формы
   5. Используйте эффект формы Offset Paths для изменения формы
   6. Создание фигур
   7. Создание масок
   8. Удаляйте объекты из видео с помощью панели «Заливка с учетом содержимого»
   9. Кисть для ротоскопии и Refine Matte
9. Слои, маркеры и камера
   1. Выбор и расположение слоев
   2. Режимы наложения и стили слоя
   3. 3D-слои
   4. Свойства слоя
   5. Создание слоев
   6. Управление слоями
   7. Маркеры слоев и маркеры композиции
   8. Камеры, источники света и достопримечательности
10. Анимация, ключевые кадры, отслеживание движения и кеинг
    1. Анимация
       1. Основы анимации
       2. Анимация с помощью инструментов Puppet
       3. Управление и анимация контуров и масок фигур
       4. Анимация фигур Sketch и Capture с помощью After Effects
       5. Различные инструменты для анимации
       6. Работа с управляемой данными анимацией
    2. Ключевой кадр
       1. Интерполяция ключевого кадра
       2. Установка, выбор и удаление ключевых кадров
       3. Редактирование, перемещение и копирование ключевых кадров
    3. Отслеживание движения
       1. Отслеживание и стабилизация движения
       2. Отслеживание лица
       3. Отслеживание маски
       4. Артикул маски
       5. Скорость
       6. Растяжение времени и перераспределение времени
       7. Временной код и единицы отображения времени
    4. Ключ
       1. Ключ
       2. Ключевые эффекты
11. Прозрачность и композитинг
    1. Обзор компоновки и прозрачности и ресурсы
    2. Альфа-каналы и маски
    3. Коврики для дорожек и коврики для путешествий
       
12. Настройка цвета
    1. Основы цвета
    2. Управление цветом
    3. Эффекты цветокоррекции
    4. Управление цветом OpenColorIO и ACES
13. Предустановки эффектов и анимации
    1. Обзор предустановок эффектов и анимации
    2. Список эффектов
    3. Эффекты моделирования
    4. Эффекты стилизации
    5. Звуковые эффекты
    6. Эффекты искажения
    7. Перспективные эффекты
    8. Канальные эффекты
    9. Создание эффектов
    10. Эффекты перехода
    11. Эффект ремонта рольставней
    12. Эффекты размытия и резкости
    13. Эффекты 3D-канала
    14. Вспомогательные эффекты
    15. Матовые эффекты
    16. Эффекты шума и зернистости
        
    17. Эффект Upscale с сохранением деталей
    18. Устаревшие эффекты
14. Выражения и автоматизация
    1. Выражения
       1. Основы выражений
       2. Понимание языка выражений
       3. Использование элементов управления выражением
       4. Различия в синтаксисе между модулями выражений JavaScript и Legacy ExtendScript
       5. Редактирование выражений
       6. Ошибки выражения
       7. Использование редактора выражений
       8. Использование выражений для редактирования и доступа к свойствам текста
       9. Ссылка на язык выражений
       10. Примеры выражений
    2. Автоматика
       1. Автоматика
       2. Скрипты
15. Иммерсивное видео, виртуальная реальность и 3D
    1. Создание сред виртуальной реальности в After Effects
    2. Применение иммерсивных видеоэффектов
    3. Инструменты для композитинга видео VR/360
    4. Отслеживание движения 3D-камеры
    5. Работа в пространстве 3D-дизайна
    6. Приспособления для трехмерного преобразования
    7. Делайте больше с 3D-анимацией
    8. Предварительный просмотр изменений в 3D-проектах в режиме реального времени с помощью 3D-движка Mercury
    9. Добавьте адаптивный дизайн к своей графике 
16. Просмотры и предварительные просмотры
    1. Предварительный просмотр
    2. Предварительный просмотр видео с помощью Mercury Transmit
    3. Изменение и использование представлений
17. Визуализация и экспорт
    1. Основы визуализации и экспорта
    2. Кодирование H. 264 в After Effects
    3. Экспорт проекта After Effects как проекта Adobe Premiere Pro
    4. Преобразование фильмов
    5. Многокадровый рендеринг
    6. Автоматический рендеринг и сетевой рендеринг
    7. Рендеринг и экспорт неподвижных изображений и последовательностей неподвижных изображений
    8. Использование кодека GoPro CineForm в After Effects
18. Работа с другими приложениями
    1. Dynamic Link и After Effects
    2. Работа с After Effects и другими приложениями
    3. Настройки синхронизации в After Effects
    4. библиотек Creative Cloud в After Effects
    5. Плагины
    6. Cinema 4D и Cineware
19. Совместная работа: Frame.io и Team Projects
    1. Совместная работа в Premiere Pro и After Effects
    2. Frame.io
       1. Установить и активировать Frame.io
       2. Использование Frame.io с Premiere Pro и After Effects
       3. Часто задаваемые вопросы
    3. Групповые проекты
       1. Начало работы с командными проектами
       2. Создать командный проект
       3. Сотрудничайте с командными проектами
20. Память, хранилище, производительность
    1. Память и хранилище
    2. Как After Effects решает проблемы с нехваткой памяти при предварительном просмотре    
    3. Повышение производительности
    4. Настройки
    5. Требования к графическому процессору и драйверу графического процессора для After Effects
21. База знаний
    1. Известные проблемы
    2. Исправлены проблемы
    3. After Effects и macOS Ventura
    4. Как After Effects решает проблемы с нехваткой памяти при предварительном просмотре

Узнайте об основах создания выражений и работы с ними.

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

В отличие от скрипта, который говорит приложению что-то сделать, выражение указывает свойству что-то делать. Например, у вас есть мяч, перемещающийся по экрану слева направо, но вы также хотите, чтобы этот мяч покачивался. Вместо того, чтобы анимировать свойство Position с помощью ключевых кадров, вы можете применить к нему выражение покачивания.

Язык выражений основан на стандартном языке JavaScript, но вам не нужно знать JavaScript, чтобы начать работу с выражениями. Вы можете создавать выражения, используя кирку или копируя простые примеры и изменяя их в соответствии с вашими потребностями. Если вы хотите узнать об этом больше, см. раздел Понимание языка выражений.

Вот простой пример цикла с выражениями:

Зачем использовать выражения?

Выражение пользовательского интерфейса

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

1. Создайте композицию и выберите «Слой» > «Создать» > «Сплошной», чтобы создать сплошной слой.

2. На панели «Таймлайн» выберите слой и нажмите S  на клавиатуре, чтобы открыть свойство масштаба. Отсюда начинается ваше путешествие с выражениями.

3. Создадим выражение. На панели временной шкалы нажмите Alt+щелчок (Win) или Opt+щелкните (Mac) секундомер рядом с Положением, чтобы добавить выражение к свойству. After Effects присваивает выражения по умолчанию всем свойствам, которые вы можете изменить позже.

4. Обратите внимание на изменения в пользовательском интерфейсе, произошедшие после создания выражения. Во-первых, значение свойства Масштаб (отображаемое как 100 100) изменяется с синего на красный. Красный цвет указывает на то, что значение имеет активное выражение.
   

5. Увидите, что слева от секундомера появилась закрутка, щелкните ее, чтобы открыть. Используйте его, чтобы раскрыть само выражение.

   • Первая кнопка выглядит как знак равенства («=») и включает и выключает выражение. Он отображается синим цветом, когда выражение включено.
   • Вторая кнопка переключает отображение значения выражения во времени в редакторе диаграмм.
   • Третья кнопка с маленькой спиралью — это кнут, который вы можете использовать для построения выражений.
   • Четвертая кнопка открывает меню языка выражений, которое можно использовать для построения выражений.

6. Наконец, справа от четырех кнопок вы можете просмотреть выражение по умолчанию transform.position. Если вы хотите изменить выражение, щелкните текст выражения на временной шкале, чтобы активировать поле редактора выражения. Оно работает так же, как любое текстовое поле; копировать, вставлять, выбирать или перетаскивать текст. Нажатие ввода создает новую строку, и вы можете изменить ее размер. Нажмите на нее и введите нужное выражение, например, wiggle(3,50). Дополнительные сведения см. в разделе Редактирование выражений.

Выражения и ключевые кадры

После добавления выражения к свойству можно продолжать добавлять или редактировать ключевые кадры для этого свойства. Выражение может принимать значение свойства, определенное его ключевыми кадрами, и использовать его в качестве входных данных для создания новых измененных значений. Например, выражение value+90 для свойства Rotation слоя добавляет 90 градусов к значению свойства Rotation в дополнение к движению по ключевым кадрам:

Некоторые методы, такие как покачивания, работают непосредственно с существующим значением свойства. . (См. Атрибуты и методы свойств (справочник по выражениям).) 

Выражение wiggle(10, 10) для свойства Position слоя сохраняет движение слоя по ключевым кадрам и заставляет его немного покачиваться.

Использование простой математики в выражениях

Значения свойства, содержащего выражение, отображаются красным или розовым шрифтом.

Хороший способ начать работу с выражениями — создать простое выражение с помощью кирки, а затем настроить поведение выражения с помощью простых математических операций, таких как перечисленные в следующей таблице:

Например, вы можете удвоить результат, набрав *2 в конце выражения; или вы можете уменьшить результат вдвое, набрав /2 в конце выражения.

Разрабатывая выражения для удобного редактирования, вы можете комбинировать эти простые операции и многое другое. Например, вы можете добавить /360*100 в конец выражения, чтобы изменить его диапазон с 0–360 на 0–100. Это изменение было бы полезно, если бы вы хотели преобразовать значения циферблата на 360 градусов в ползунок, измеряемый в процентах.

Общие выражения, которые вы можете использовать

Wiggle

Дополнительные примеры см. в разделе Примеры выражений.

Редактировать выражение вручную

1. Войдите в режим редактирования текста, щелкнув в поле выражения.

   При входе в режим редактирования текста весь выражение выбрано. Чтобы добавить к выражению, щелкните внутри выражение для размещения точки вставки; в противном случае вы замените все выражение.

2. Введите и отредактируйте текст в поле выражения, необязательно с помощью меню языка выражений.

3. Чтобы выйти из режима редактирования текста и активировать выражение, выполните одно из следующих действий:

Настройка внешнего вида выражений в редакторе выражений

Вы можете настроить внешний вид выражений в Редакторе выражений, расположенном на панели «Таймлайн», используя настройки «Сценарии и выражения». Чтобы открыть его, выберите After Effects > «Установки» > «Сценарии и выражения» (Mac) или «Приложение» > «Установки» > . Выражения (Победа). Дополнительные сведения см. в разделе Использование редактора выражений.

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

Дополнительные ресурсы по выражениям

Теперь, когда вы поняли некоторые концепции, лежащие в основе выражений, обратитесь к сообществу за некоторыми примерами из реальной жизни и поделитесь своей работой.

Вы также можете ознакомиться с отличной коллекцией примеров выражений и руководств Дэна Эббертса на его веб-сайте MotionScript.

Форум AE Enhancers также содержит множество примеров и много информации о выражениях, а также сценариях и наборах настроек анимации.

Еще

• Об анимации, ключевых кадрах и выражениях
• Редактирование выражений
• Понимание языка выражений

Войдите в свою учетную запись

Войти

Управление учетной записью

5 выражений After Effects, которые сделают вас героем

Если бы Бэтмен использовал After Effects, он бы определенно использовал выражения. (У него также была бы специальная настройка яркости пользовательского интерфейса, помеченная Really Dark , но это уже другая тема.)

Поясню.

Какой бы вариант Caped Crusader вы ни предпочли, справедливо будет сказать, что он больше всего известен изящными гаджетами, которые он использует для выполнения своей работы. Бэтмен не поднимается по ступенькам. Он цепляется за крышу. И он знает лучше, чем драться с Суперменом на кулаках. Вместо этого он появляется с криптонитовым копьем.

Так что, если вы посадите его перед After Effects, вы не увидите, как он брутфорсит кучу ключевых кадров. Он оптимизировал свой рабочий процесс анимации с помощью выражений. (Или он заставил бы Люциуса или Альфреда сделать это, но это разрушило бы мою метафору.)

Хотя эта статья не сделает вас величайшим в мире детективом-миллиардером, борющимся с преступностью, она может помочь вам стать одним из величайших моушн-дизайнеров в мире. Считайте это своей историей происхождения.

Вам просто нужны нужные инструменты на поясе.

Так что же такое выражение?

Выражения — это строки кода (JavaScript), позволяющие управлять значениями в Adobe After Effects. Возможно, они звучат не так круто, как криптонитовое копье, но в правильных руках они столь же эффективны.

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

Но вне зависимости от размера, у всех у них есть кое-что общее: они сэкономят вам массу времени. А кто не хочет , что супер сила?

Немногое имеет большое значение

Если вы новичок в этой теме, легко разочароваться, выбрав неправильную отправную точку. В конце концов, мы говорим об изучении нового языка.

Конечно, вы можете следовать пошаговому руководству и копировать/вставлять блоки текста в параметры ваших слоев. Но это не поможет вам отладить и внести изменения в выражение, чтобы получить желаемые результаты.

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

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

Итак, вот пять основных выражений After Effects, с которых вы должны начать свою историю происхождения. Они простые, мощные и помогут вам выполнить работу.

1: thisComp

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

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

Для первого шага я щелкну правой кнопкой мыши атрибут положения моего слоя с логотипом и выберу «Отдельные размеры». Это просто облегчит анимацию.