txtBox = thisLayer.sourceRectAtTime();

xLeft = txtBox.left;
yTop = txtBox.top;
yHeight = txtBox.height / 2;
xWidth = txtBox.width / 2;
x = xWidth + xLeft;
y = yHeight + yTop;
z = geometryOption.extrusionDepth * .5;

[x, y, z]

Экспрешн для Anchor Point, который автоматически перемещает якорную точку в центр по трем осям.
Без него очень тяжко — приходится вручную высчитывать и менять значение по оси z, если решил изменить выдавливание

#expressions

Сегодня поговорим о счетчиках. Предположим мы столкнулись с задачей: анимировать число от 1 000 000 до 5 000 000, шрифт Aeroport Medium. Казалось бы тривиальная задача, но на деле не все так просто.

Автоматические счетчики не рассматриваю, потому что хочу контролировать изинги/тайминги кейфреймами. Первое, что приходит на ум — создать Slider/Point Control (у слайдера лимит 1 000 000, поэтому в данном случае выбрал Point) и вставить в Text Source экспрешн:

Value = effect("Point Control")("Point")[0];
Math.round(Value)

Вроде получилось, но есть две проблемы:
1. цифры не стоят на месте, а гуляют т.к. у нас не моноширинный шрифт
2. нет разделителей разрядов, вместо 5 000 000 мы видим 5000000

Окей гуглChatGPT, давай мне экспрешн с разделителями:

Value = effect("Point Control")("Point")[0];
new Intl.NumberFormat('ru', { maximumFractionDigits:0 }).format(Value)

"ru" определяет формат числа в русском языке, именно у нас принято разделять разряды пробелами. Если нужны точки, то ставим "de", запятые — "en"
maximumFractionDigits — количество символов после запятой

Осталось что-то придумать с моношириной, нашел такой плагин:
https://aescripts.com/monospacer он превращает любой шрифт в моношрифт.
Кидаю эффект на текст и... понимаю, что он убирает мои разделители. Меняю формат в экспрешене с "ru" на "de" b закрываю точки масками.

Вот такое не очень элегантное, но работающее решение, если есть идеи как можно было сделать проще — пишите в комментариях

А теперь попробуем использовать Cavalry вместо AE: добавляем текст, генерируем число, ставим галку Force Monospacing, готово

Никакого кода, плагинов, делается за минуту, контролируется легко, разделитель можно вставить какой угодно

50% сложности в работе моушн-дизайнера — это борьба с After Effects

fun fact: в русскоязычном ютубе 0 (ноль) видеороликов о Cavalry

Друзья, мой канал по своей инициативе порекомендовал великий Артем Отвод, за что я ему безмерно благодарен, в ближайшие дни я планирую что-нибудь написать об анимации emoji и стикеров, возможно закончу свою статью для DTF

А вообще я пишу тут обо всем подряд, от процедурной анимации до рендера в C4D (это моя самая слабая сторона)

Вкратце обо мне: 10 лет в моушне, 5 лет на videohive, мобильный геймдев, персонажная и не только анимация в AE под Lottie (Telegram в том числе), сотрудничество со студиями как 2D моушн-дизайнер. Также я активно учу Cavalry и Rive, и считаю, что эта сторона моушна очень слабо освещена в ру сегменте, что я хочу хотя бы немного исправить.

https://linktr.ee/pototsky

Анимация собрана в нормальном After Effects Cavalry без единого кейфрейма
Пробовали уже этот софт?

Пока прихожу в себя от внезапного буста, вчера у меня было 36 подписчиков, а сейчас — сами видите
Но меня впечатлила не цифра: заглянул во вкладку с подписчиками и понял, что минимум 10% людей я уже давно знаю (а они меня нет, потому что раньше особо не отсвечивал)
Это авторы с videohive, создатели многих обучающих материалов, всем известные крутаны, олды из паблика After Effects и далее по списку

Пользуясь случаем хочу сказать спасибо всем, кто все эти годы что-то создавал для ру-комунити модиза

▎Краткая база по Lottie и Rive для моушн-дизайнеров перед тем, как поговорить о стикерах и эмодзи

Lottie — это библиотека, позволяющая использовать векторные изображения с анимацией в формате JSON. Создаются в After Effects и экспортируются с помощью плагина Bodymovin

Раньше над анимацией иконок / иллюстраций для приложений и сайтов чаще всего работали ui-дизайнеры и фронтендеры, а анимация в After Effects развивалась параллельно под растровые форматы. С появлением Lottie мир Ae столкнулся с миром Ui и появилась возможность создавать сложные работы в привычной для моушн-дизайнера / аниматора среде, а потом отдавать JSON программистам для встраивания

По сути, мы выгружаем шейпы в программный код. Видео, GIF, APNG и WebM не подходят для приложений и сайтов так как:
• Изображение в этих форматах растровое и соответственно не масштабируется
• Очень большой размер файлов, особенно с альфа-каналом

Все, что может использовать аниматор в After Effects перед экспортом в Lottie, — это ✨Shape Layers✨, прекомпозы, маски и некоторые режимы наложения. Полный список поддерживаемых фич здесь

Стикеры и эмодзи в Telegram работают на форке Bodymovin — Bodymovin TG. У него есть свои ограничения. Например, длительность до 3 секунд и размер только 512x512)
Скачать Bodymovin TG можно здесь

У Lottie есть пачка недостатков:
• Изображение часто выглядит не так, как задумывал иллюстратор, особенно если использовалось много градиентов
• На разных операционных системах изображение рендерится по-разному — цвета могут "гулять", а использованные в АЕ приемы не поддерживаться на конкретной ОС
• Многие фичи из Adobe Illustrator и Figma некорректно экспортируются в After Effects, даже при использовании плагина Overlord

В целом, это своего рода "костыль" с множеством подводных камней на каждом этапе пайплайна.

Rive — это решение All-in-One, альтернатива Lottie с собственным редактором и единым рендерингом на всех платформах. В отличие от Lottie, в Rive есть функционал для создания интерактивных взаимодействий, которые аниматор может реализовать своими силами, на нем можно даже собрать полноценный интерфейс для игры

Примеры работ в Lottie: здесь
Примеры работ в Rive: здесь

Выше есть ролик, в котором я использовал CC Cylinder на тексте, немного проапгрейдил ту версию
Сделано так:
-анимация шейпов по path
-wave warp на шейпах в момент вращения цилиндра
-cc cylinder, в котором передняя и задняя части поворачиваются отдельно и с небольшим оффсетом
-экспрешн на баунс

Если всё еще непонятно — качайте проект бесплатно и без смс с GoogleDrive или из первого комментария к этому посту

Камера влияет не только на 3D слои, но и на некоторые эффекты
Если в этот проект не добавить камеру с параметром Zoom 10000+, то появятся искажения перспективы, которые мне тут видеть не хотелось

Кстати, если хотите, чтобы ваше видео в Telegram отображалось без таймкода, как GIF — нужно при рендере отключить звук, даже если его нет в проекте, а размер файла должен быть до 10 мегабайт (handbrake в помощь)

▎Рубрика "Чиним After Effects силами комьюнити"

Скрипт Create Nulls from Paths, который устанавливается вместе с АЕ криво работает (и судя по постам на reddit я такой не один), да и в целом обладает ограниченным функционалом

К счастью существуют народные версии, которые исправляют проблему и/или расширяют возможности:

1. Create Nulls From Paths
Скачать | Автор: Pablo Cuello всегда читаю его имя как Пауло Коэльо 🤡

Исправляет баги, допущенные командой профессионалов из Adobe. Добавляет опцию, при котором нули будут поворачиваться за точками в режиме Nulls Follow Paths.

2. G_Create Nulls from Paths
Скачать | Автор: Gareso

За основу взяли 1 и прикрутили слайдер Point Index к каждому нулю, чтобы можно было добавлять точки с нулем уже после применения скрипта.

3. Create Nulls From Paths Points and Tangents
Скачать | Автор: Nick Hill

Багфикса с некорректно встающими нулями нет 💀 добавляет кнопку, для того чтобы создать нули не только для точек, но и для их handles направляющих.

4. Create Nulls From Paths EXTENDED
Скачать | Автор: Crunchycreatives

Тоже самое, что и 3, но есть возможность добавить управлять не квадратными нулями, а гайдами в виде направляющих — это выглядит так, будто мы редактируем обычный path, хотя на самом деле рулим нулями

Примеры использование нулей с тангентами в работах Buck и Ordinary Folk: раз, два

Если хотите покрутить линию из гифки — проект *.aep в первом комментарии к этому посту

Adobe just doing half of their job
#AfterEffects

Моя анимация из 2018 года для челленджа Pose-to-Pose от Ross Plaskow. Кстати, сейчас он рассказывает про Rive

Тогда осознал, что персонажей намного легче и интересней анимировать в 12fps, а еще это придаёт им особый шарм и убирает "шейповость". Мое мнение на этот счет никто не разделял, так что с тех пор ни одного проекта в таком низком фреймрейте не делал. Сейчас я деградирую утратил свой огонь к этим Rubberhose / DUIK (или че там сейчас в моде) ригам и делаю персонажей только под lottie, да и тренд на эксплейнеры с персонажами прошел, и вернулся тренд на шейпы, но уже с градиентами ✨

Если нет идеи для персонального проекта — загляните на https://easyease.co
Это сайт с челленджами от американской студии Ravie, специализирующейся на 2D моушн-дизайне

SFX Challenge выглядит наиболее привлекательным: есть заглавная тема и готовая аудиодорожка с SFX (как правило до 5 секунд), больше никаких рамок нет — можно использовать любой софт и стилистику

Самое крутое, что они кратко разбирают каждую анимацию на стриме т.е. есть возможность получить фидбек от профи из индустрии бесплатно

Я так понял, что монетизировать easyease будут через спонсорские конкурсы, победителю которых предлагается сотрудничество. Как crowdspring.com, но для моушн-дизайнеров

Дружеское напоминание о том, что ChatGPT можно использовать для написания скриптов и экспрешнов выражений в After Effects. Плагин Klutz GPT позволяет это делать прямо в интерфейсе AE. Он бесплатный, но попросит ключ OpenAI

В гифке к посту вся анимация сделана экспрешнами из ChatGPT

Я использую телеграм бот, подключенный к GPT. Например, пишу запрос:

напиши скрипт для After Effects который из прямого шейпа сделает анимированную синусоиду. но так, чтобы с одной стороны амплитуда была меньше, чем с другой

В его ответе была подробная инструкция и этот код:

// Параметры синусоиды
var minAmplitude = 20; // Минимальная амплитуда (в пикселях)
var maxAmplitude = 100; // Максимальная амплитуда (в пикселях)
var frequency = 2;      // Частота движения (количество колебаний в секунду)
var speed = 2;          // Скорость движения

// Создаем массив точек для синусоиды
var points = [];
var numPoints = 100;    // Количество точек в синусоиде
var width = thisLayer.width; // Ширина слоя

for (var i = 0; i <= numPoints; i++) {
    var x = (i / numPoints) * width; // Распределяем точки по ширине
    
    // Вычисляем амплитуду для текущей точки
    var amplitude = linear(x, 0, width, minAmplitude, maxAmplitude);
    
    // Вычисляем y с помощью синусоиды с изменяющейся амплитудой
    var y = amplitude * Math.sin(frequency * (x / width) * 2 * Math.PI + time * speed * 2 * Math.PI);
    
    points.push([x, y]);
}

// Создаем новый путь с вычисленными точками
createPath(points, [], [], false);

Рисую шейп из двух точек — обычную прямую, кидаю экспрешн на path и всё работает. Далее я добавил два слайдера для значений minAmplitude и maxAmplitude, для слайдера тоже попросил написать скрипт, который будет менять значение туда-обратно с определенным циклом

Скопировал шейп, поменял значение frequency на 3, просто чтобы гифка не была слишком скучной

Весь код вставлять сюда не буду, а то и так душно
*.aep файл в первом комментарии

#AfterEffects
#Нейросети

Продолжаем ностальгировать по эпохе плоских персонажей

Этот риг был собран мной примерно 6 лет назад для коммерческого проекта — типичный эксплейнер про какой-то там давно закрывшийся банк.

Риг в After Effects имеет смысл, когда персонаж появляется много раз в кадре, иначе проще всё сделать ключами. Реализован с помощью плагина Joysticks-n-Sliders: выставил крайние положения для анимации — смотрит вверх / вниз / влево / вправо, сгенерировал контроллеры и приступил к анимации. Звучит просто, но на самом деле долго добивался того, чтобы правильно работали волосы — приходилось откатываться много раз назад, пробовать что-то поменять в позах, и вроде даже использовать маски.

Джойстики можно использовать не только для персонажей, в комментариях к этому посту накидаю примеров использования J'n'S