Основной прием тут — это вращение угловых градиентов. Но угловых градиентов из коробки в After Effects нет оказывается есть в эффектах слоя
Решение простое: создаем обычный линейный градиент и кидаем сверху Polar Coordinates в режиме Rect to Polar

Сделал тестовый проект для демонстрации, также в нем использовал экспрешн для изменения значения параметра с определенным шагом:

step=20
Math.round(value/step)*step

step определяет величину шага, например при анимации вращения от 0° до 360° мы получим 0°, 20°, 40°, 60° и т.д. без промежуточных значений

#expressions

200+ мегабайт вышло, но я не хочу пережимать (в инсте выглядит ужасно 💀)

Игрушку Порш сделал, когда учился моделировать несколько лет назад

https://github.com/madjin/awesome-cc0
Полезная подборка СС0 ассетов: текстуры, модели, звуки

И мое вчерашнее неоновое стекло на скульптуре из Кливлендского музея

Если у вас по тем или иным причинам вылезли неприятные лесенки на картинке в After Effects — можно исправить ситуацию бесплатным плагином FXAA https://aescripts.com/fxaa

Для увеличения сглаживания дублируем эффект N-ное количество раз (в моем примере 10 FXAA)

Вообще для вашего понимания что тут вообще происходит, зачем и почему, рассказываю вкратце: мне нравится моушн-дизайн, да и диджтл арт в целом, в данный момент я увлечен этим на уровне подростка, который первый раз увидел Dota 2

Но весь карьерный путь сложился так, что у всех, кто меня знает — я ассоциируюсь со стикерами и emoji в телеграм. В целом этим все еще интересно заниматься, но часто становится очень грустно от того, что из всего многообразия программ, техник, стилистик, плагинов в работе используется 0.0001% возможностей. Буквально, будто тебе подарили самый крутой на свете синтезатор, но всё что ты можешь с ним делать — это нажимать на одну клавишу, да и то в одной октаве

Чтобы исправить ситуацию — я воскресил свою инсту, создал этот канал и каждый день помимо основной работы пробую что-нибудь новое. Может быть это к чему-то приведет, а может и нет

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

Оказывается шейпы из АЕ можно экспортировать в C4D (File-Export-Cinema4D exporter)
Пока придумал одно полезное применение — перенести анимацию path для дальнейших экспериментов в трех пространствах, вместо того, чтобы мучиться со сплайнами

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