Expressions в After Effects: гайд та базові вирази

Вступ

Коли ви тільки починаєте свій шлях у моушн-дизайні, таймлайн здається цілком зрозумілим: ставиш перший ключ, змінюєш значення, ставиш другий — і об'єкт рухається. Але з часом проєкти стають складнішими. Уявіть, що вам потрібно змусити 50 зірок на фоні хаотично мерехтіти, або зробити так, щоб колеса автомобіля оберталися безперервно протягом усієї композиції. Робити це вручну — означає витратити години на рутину. Саме тут на допомогу приходять expressions в After Effects.

Ця стаття створена для тих, хто боїться програмування і вважає, що написання коду — це прерогатива розробників, а не дизайнерів. Ми розберемося, як працюють вирази, навчимося застосовувати найкорисніші з них і покажемо, як вони можуть зекономити вам десятки годин роботи. Після прочитання ви зможете автоматизувати прості рухи та зробити свої проєкти більш гнучкими.

Що таке Expressions в After Effects і навіщо вони потрібні

Expressions (вирази) — це короткі фрагменти коду, написані мовою JavaScript, які дозволяють керувати параметрами шарів в After Effects без використання традиційних ключових кадрів (keyframes). Замість того, щоб вказувати програмі «будь у цій точці на першій секунді і в іншій на п'ятій», ви кажете їй: «рухайся хаотично з такою-то швидкістю» або «повторюй цю дію нескінченно».

Чому варто почати їх використовувати якомога раніше:

• Економія часу. Автоматизація повторюваних дій.
• Гнучкість. Змінити швидкість обертання через код набагато простіше, ніж совати десятки ключів на таймлайні.
• Зв'язок між шарами. Ви можете змусити один об'єкт реагувати на рух іншого.
• Чистота проєкту. Менше ключів — легше орієнтуватися у композиції.

У курсі Maslo Motion ми обов'язково включаємо базову роботу з виразами, адже бачимо, що новачки застрягають не через складність самої програми, а через хаотичне використання інструментів та страх перед оптимізацією процесів.

Як додати Expression: покрокова інструкція

Додати вираз дуже просто. Вам не потрібно відкривати складні панелі розробника. Усе робиться безпосередньо на таймлайні.

1. Виділіть шар, який хочете анімувати, і натисніть відповідну гарячу клавішу для відкриття параметра (наприклад, P для Position, R для Rotation, S для Scale).
2. Затисніть клавішу Alt (на Windows) або Option (на Mac) на клавіатурі.
3. Клікніть лівою кнопкою миші по іконці секундоміра поруч із назвою параметра.
4. На таймлайні з'явиться текстове поле. Введіть туди свій код.
5. Клікніть у будь-якому порожньому місці таймлайну, щоб застосувати вираз.

Важливо: значення параметра тепер підсвічуватиметься червоним кольором. Це означає, що ним керує код, а не ключові кадри.

Топ-5 базових виразів для щоденної роботи

1. Wiggle: хаотичний рух без ключів

Це, мабуть, найпопулярніший вираз серед моушн-дизайнерів. Він створює плавний хаотичний рух або зміну параметра. Ідеально підходить для створення ефекту «живої» камери, тремтіння, плаваючих частинок у повітрі.

Синтаксис: wiggle(частота, амплітуда)

Приклад: wiggle(2, 50)

Цей код означає: змінюй значення 2 рази на секунду в межах 50 пікселів (якщо це Position) або 50 градусів (якщо це Rotation).

2. Time: безперервний рух

Вираз time прив'язаний до часу вашої композиції в секундах. Він чудово підходить для об'єктів, які повинні рівномірно обертатися або рухатися в одному напрямку протягом усього відео, наприклад, годинникова стрілка, шестерня або хмари на фоні.

Синтаксис: time * значення

Приклад: time * 90 (застосовано до Rotation).

Кожну секунду об'єкт повертатиметься на 90 градусів. За 4 секунди він зробить повний оберт на 360 градусів.

3. LoopOut: циклічна анімація

Якщо ви створили анімацію з кількох ключів (наприклад, м'яч, що стрибає) і хочете, щоб вона тривала нескінченно, не потрібно копіювати і вставляти ключі. Просто використайте loopOut.

Синтаксис: loopOut("тип_циклу")

Приклад: loopOut("pingpong")

Тип cycle (стоїть за замовчуванням) повторює анімацію з початку. Тип pingpong відтворює анімацію вперед, а потім назад, створюючи ідеальний маятник або ефект дихання.

4. Math.round: цілі числа для лічильників

Коли ви анімуєте цифри (наприклад, лічильник від 0 до 100), After Effects за замовчуванням показуватиме дробові значення з багатьма знаками після коми. Щоб зробити числа цілими, використовуйте цей математичний вираз.

Приклад застосування до Source Text: Math.round(effect("Slider Control")("Slider"))

Цей вираз округлює будь-яке число до найближчого цілого.

5. Index: каскадна анімація

Кожен шар в After Effects має свій порядковий номер (index). Використовуючи це значення у виразах, можна створювати складні системи, де кожен наступний шар поводиться трохи інакше, ніж попередній.

Приклад застосування до Rotation: index * 10

Якщо ви застосуєте це до 10 шарів, перший шар буде повернутий на 10 градусів, другий на 20, третій на 30 і так далі. Це неймовірно потужний інструмент для створення патернів.

Типові помилки новачків під час роботи з кодом

• Опечатки у регістрі букв. JavaScript чутливий до регістру. loopout("cycle") не спрацює, має бути саме loopOut("cycle") (з великою літерою O).
• Пропущені дужки або лапки. Якщо ви напишете wiggle(5, 20 без закриваючої дужки, After Effects видасть попередження про синтаксичну помилку (жовтий трикутник внизу екрана).
• Видалення шарів, до яких прив'язані вирази. Якщо вираз посилається на інший шар (наприклад, через інструмент Pick Whip), а ви видалите або перейменуєте цей шар, вираз зламається. Намагайтеся давати шарам зрозумілі назви до того, як зв'язувати їх кодом.
• Спроба застосувати одновимірний вираз до двовимірного параметра. Наприклад, Scale має два значення [X, Y]. Якщо ви напишете туди просто time * 10, After Effects не зрозуміє, до якої осі це застосувати. Потрібно використовувати масиви: [time * 10, time * 10].

Практична вправа: анімація фонового елемента

Давайте закріпимо знання і створимо просту, але ефектну анімацію плаваючих частинок для фону. Це базова техніка, яку часто використовують у рекламних креативах для додавання глибини.

1. Створіть нову композицію.
2. Намалюйте невелике коло за допомогою Ellipse Tool (Shape Layer).
3. Відкрийте параметр Position (P). Затисніть Alt і клікніть по секундоміру.
4. Введіть вираз: wiggle(0.5, 150). Тепер коло буде повільно плавати в межах 150 пікселів.
5. Відкрийте параметр Scale (S). Натисніть Alt + клік і введіть: wiggle(1, 20). Коло буде злегка пульсувати у розмірі.
6. Продублюйте цей шар (Ctrl+D або Cmd+D) 10-15 разів.

Оскільки wiggle працює на основі випадкових чисел для кожного окремого шару (seed базується на індексі шару), всі ваші кола будуть рухатися абсолютно по-різному, хоча ви написали код лише один раз. Ви щойно створили складну сцену за 2 хвилини без жодного ключового кадру!

Що робити далі

Почніть впроваджувати вирази у свої проєкти поступово. Не намагайтеся одразу писати складні скрипти на 20 рядків. Спочатку звикніть до wiggle, потім спробуйте оптимізувати циклічні рухи через loopOut. Коли ви відчуєте, наскільки це прискорює роботу, ви самі захочете вивчати більш просунуті техніки, такі як прив'язка до аудіо, використання if/else конструкцій та лінійні інтерполяції (linear).

Щоб краще розуміти логіку програми, радимо почитати інші матеріали в нашому блозі Maslo Motion, де ми розбираємо технічні аспекти професійної роботи.

Також читайте: Анімація тексту в After Effects, Graph Editor і плавна анімація, Анімація UI/UX в After Effects.

FAQ

Чи потрібно знати програмування, щоб використовувати вирази?

Ні. Для повсякденних задач моушн-дизайнеру достатньо знати близько 5-10 базових команд і розуміти їхній синтаксис. Вам не потрібно писати програми, лише короткі інструкції для конкретних параметрів.

Чому мій вираз світиться червоним і не працює?

Це означає, що After Effects виявив синтаксичну помилку. Найчастіше це пропущена дужка, кома, неправильний регістр літер (наприклад, Wiggle замість wiggle) або посилання на шар, якого не існує.

Чи гальмують expressions рендер?

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

Чи можна комбінувати ключові кадри та expressions?

Так. Наприклад, ви можете анімувати рух об'єкта ключами, а потім додати до нього вираз wiggle, щоб об'єкт тремтів під час руху. Також можна використовувати вираз loopOut(), який власне і базується на вже створених вами ключах.

Якщо хочеш вивчати After Effects не хаотично, а по системі з практикою, прикладами й фідбеком, подивись курс Maslo Motion. Він створений для тих, хто хоче не просто повторювати туторіали з YouTube, а поступово зібрати надійну технічну базу для реальної роботи в моушн-дизайні.