Глобальные переменные и графики функций в выражениях After Effects
Статья в Notion, с ссылками на документацию. Эта статья своего рода продолжение о маркерах. Я не мог вас оставить без гибкости.
При создании анимации через выражение быстро наскучивает создавать однотипные linear и ease, а ничего другого больше то и нет. Это, пожалуй, один из главных для меня недостатков в сравнении с ключами анимации. У них всё просто, открыл график и настроил усики как заблагорассудиться — «Хочу такую же гибкость». Создавать свои функции анимации сложно и долго. Но к счастью этот вопрос уже решен так или иначе.
Нам известно, что кроме линейной и плавной функций существует также Кривая Безье (Cubic Bezier), которая не реализована по умолчанию, но её же уже кто-то до нас написал. Так вот в ожидании, когда в Adobe наконец разродятся её интеграцией для выражений мы можем уже сейчас её адаптировать для своих нужд.
Спойлер, код там большой и занимает не один десяток строк, столько кода в каждое выражение вставлять было бы полным безрассудством. Потому для этой функции мы создадим глобальную переменную а-ля ООП, ну почти, не ругайтесь. Переменную, которая будет работать по всему документу, а написана в одном месте.
💡 Если вдруг выдает ошибку, а вы все скопировали 1 к 1, то у вас в настройках проекта стоит устаревший Extender Script, нужно поменять на Java Script.
Давайте начнем.
Глобальная переменная. Создайте композицию и назовите её «Переменные». Теперь создайте текстовый слой переименовав его так как будете вызывать в других композициях, ведь вы можете это делать для любых целей, а не только для функции Кривой Безье. Я называю слой cubic-bezier_function.
Следующий код мы будем вписывать для вызова функции, соответственно в другой композиции. Функция eval() преобразует содержимое текста в данные которые будут работать из того далекого места в нужном нам месте.
С помощью метода eval() строку можно преобразовать в массив объектов sourceData, идентичный результатам атрибута sourceData, из которого к отдельным потокам данных можно обращаться как к иерархическим атрибутам данных. Footage — Footage.sourceText (docsforadobe.dev)
Кривая Безье. А вот и та громадная функция, вписываем её в тот текстовый слой, что создавали ранее прямо в текст в коне композиции. Размер, шрифт и другие атрибуты не имеют значения. Или в маркер если вызываете его.
💡 Если впишите как код для свойства «Исходный текст», выдаст ошибку.
Теперь пришло время манипуляций. Туда же где у нас вписана функция через eval() мы вписываем следующий код. Я использовал маркер для наглядных манипуляции, вы можете смело заменить его чем заблагорассудиться.
Создаем переменную newValues в которой определяем аргументы функции BezierEasing. Далее создаем переменную AniTimerange присваивая время анимации по маркеру. В переменные OutX и OutY соответственно ставим функцию анимации newValues() где время по которому идет это переменная AniTimerange, которая будет менять значения от 0 до 1 (100%), которые будут определены 4 и 5 аргументами.
Для построения графиков и получения их значений можете использовать удобный онлайн инструмент cubic-bezier.com или при наличии плагин Flow. Вписывать значения функции на 6 строке для BezierEasing(.25,0,0,1).
Вписывать свои значения для анимации можно в последних переменных OutX и OutY. 0 и 1 естественно не трогаем, так как они определяют своего рода процент выполнения, изменяйте только два последних аргумента. Время анимации задается маркером в функции AniTimerange вторым и третьим аргументом, тут его меняйте при необходимости.
Теперь вы можете анимировать выражениями по любому графику функций, не ограничиваясь лишь линейной и плавной.
Функционируйте и процветайте 🖖