Time Remap на уровне кейфреймов в After Effects

FoxRetimer — платный плагин (40$), который не нужен в повседневной работе, но однажды спасет проект
Эффект Time Remap в 📱 позволяет изменять скорость и порядок воспроизведения кадров у прекомпоза. Можно ускорять или замедлять видео, менять длительность, создавать эффекты реверса, стоп-кадра или слоу-мо, управляя движением через ключевые кадры
FoxRetimer в свою очередь преобразует полученный эффект в реальные кейфреймы и удаляет time remap

Простыми словами вместо того чтобы двигать ключи руками — могу управлять ими через time remap.
В легкой анимации, где кейфреймы стоят в один ряд, я изменяю тайминг без скриптов, растягивая ключи с зажатым Alt'ом или просто их перемещая. FoxRetimer же спасал несколько раз, когда в уже готовой комплексной анимации нужно было быстро поменять тайминги и экспортировать в TGS

Поддержать на Boosty (доступ в закрытый чат)

New Gifts Released 🎁 1000⭐— 100k gifts

Сколько раз я тут рассказывал про Create Nulls from Paths в 📱? — Много.
-список альтернатив Create Nulls from Paths, которые работают без багов
-пример с проектом

А сколько было примеров реального использования? — ноль, но теперь удалось исправить ситуацию: для нового подарка в Telegram я не только сделал черновую анимацию этим методом, но и использовал полученный "каркас" в финальной анимации, преобразовав скрипт Create Nulls from Paths в ключи с помощью запекания

Анимация заняла 3 полных рабочих дня, на каркас я потратил несколько часов, всё остальное время я перетаскивал шейпы вдоль этого каркаса 💀
Как бы я не любил свою работу, двигать такое количество деталей в псевдо 3D — это каждый раз больно и очень долго.

Рисовали кукурлик и Berry on the cake, анимировал Pototsky!
С Днем знаний! 🧠

Поддержать на Boosty (доступ в закрытый чат, отвечаю на вопросы, показываю чуть больше, чем тут)

Трассировка изображения обводкой в Adobe Illustrator

Сделал 3 скина для кнопки из свежего релиза от Telegram и еще один для пака ohuenko ✨
Реализовать отпечаток мне помог ChatGPT, и даже отдал svg. Но какой смысл в этом svg, если все строуки он выдает в виде шейпа с заливкой?

Ладно, уже было смирился с мыслью, что придется это всё обводить, но вспомнил, что иллюстратор в отличии от Auto-Orient в 📱 умеет делать траcсировку строуками!
Самые важные параметры в Image Trace для подобного результата:

Mode: Black and White
Create: Strokes
Stroke: значение должно быть выше, чем ширина обводки на картинке, измерить её можно любым шейпом/линейкой
Options: Ignore white

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

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

Скин N - Ninja нарисовал Миша

Поддержать на Boosty (доступ в закрытый чат, отвечаю на вопросы, показываю чуть больше, чем тут)

Боль многих аниматоров в Telegram?

Сегодня хочу поговорить о важной теме для всех, кто работает с TGS анимацией в Telegram: оптимизации. Не частая, но давящая проблема уместить анимацию в 64 кб встречается у многих в последнее время. Собственно я не стал исключением.

Эту же тему затрагивали ребята из студии "Оно и видно" в своем недавнем посте. К нему я и обратился когда встал вопрос оптимизации и немного усовершенствовал 🧑‍💻

Глобально когда вы экспортируете Lottie-анимацию из After Effects, на выходе получаете JSON-файл. Этот JSON-файл содержит всю информацию об анимации:

- Координаты
- Цвета
- Тайминги
и многое другое

Затем этот JSON-файл сжимается GZIP и получает расширение .tgs

Теперь перейдем к самому интересному — как уменьшить размер JSON-файла?

▪️Удаление лишних слоев и свойств: Каждый лишний элемент — это байты. Убирайте все, что не влияет на конечную анимацию.

▪️Минимизация ключевых кадров: Используйте как можно меньше ключевых кадров.

▪️Онлайн-компрессоры JSON: Например, lottiemizer или другие аналогичные сервисы.

▪️Ограничение точности: Уменьшение количества знаков после запятой для координат и других числовых значений.

Если вы выполнили первые три шага, и ваш файл все еще великоват, то для ограничения точности после запятой вы можете использовать скрипт форматирования JSON.
Файлик будет ниже в комментариях.

Применяя описанные методы, вы сможете значительно уменьшить размер ваших файлов, улучшить производительность. Надеюсь, этот пост был полезен!

Как я начал сотрудничать с Telegram

Спросила Виктория — отвечу всем. Тут никакого секрета нет. Со мной начали сотрудничество 14 июня 2019 года, тогда я занял призовое место в конкурсе на анимированные стикеры. Про контест узнал из канала Telegram Designers

Стикерпак, который занял призовое место: The Foods
Нарисовал и анимировал его сам. Позже я перестал рисовать и сконцентрировался на анимации, но всё же раз в год моя палка стреляет и я берусь за отрисовку какого-нибудь скина/гифта 💪
Старые стикерпаки теперь вызывают лишь испанский стыд — с тех пор уровень заметно вырос

Поддержать на Boosty (доступ в закрытый чат. отвечаю на вопросы про анимацию и after effects)

Lottie в интерфейсах: как мы оживляем 2ГИС с помощью анимаций
https://habr.com/ru/companies/2gis/articles/935296/

Саша Гончаров, моушн-дизайнер из 2ГИС, совместно с разработчиками написали статью на хабре про внедрение lottie в приложение, фреймворки, анимацию элементов интерфейса, чекайте.

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

Поддержать на Boosty (закрытый чат lottie энтузиастов 💅)

Fake 3D с помощью Scale

Эту технику я применял в скинах для кирпичей 🧱🧱, которые делали с Линой, а также в книжке 🎁 про которую рассказывал выше

Сделал для вас пример с кубом, порядок действий такой:

1. Создал анимацию куба с помощью скрипта Nulls from Paths
2. Запёк 🧑🏿‍🍳 скрипт в кейфреймы
3. Подготовил прекомпоз со стороной куба
4. Для каждого прекомпоза добавил 2 нуля: Null 1 и Null 2 повернутый на 45 градусов, затем последовательно привязал их друг к другу. "Сторона > Null 1 > Null 2"
5. Параметр Scale у Null 1 теперь отвечает за размер стороны, а Scale у Null 2 за искажение со скосом
6. Анимировал параметры нулей так, чтобы стороны совпадали с гранями куба. Делаю это на глаз, стараясь использовать как можно меньше кейфреймов

Таким образом можно изобразить псевдо 3д анимацию и зарендерить в BodymovinTG. А для обычного Bodymovin можно использовать параметр scew вместо одного из нулей. Идейный Аниматор показал как похожим способом вращать шейпы под наклоном

В комментариях будет проект, в котором сохранены композиции со всеми этапами работы

Поддержать на Boosty (закрытый чат after-effects - bodymovin - lottie энтузиастов 💅)

Поучаствовал в моушн-челлендже от Леши, задачей было как-нибудь задвигать иллюстрацию за авторством David Mascha

↔️ Для начала я попробовал использовать Create Nulls from Paths, но этот скрипт создает крайне неудобные контроллеры для кривых.
Альтернатива есть — это бесплатный shapeRig от Ordinary Folk

🖋 Скрипт создаёт всё тот же path, контролируемый нулями, но теперь кривизна регулируется скейлом нуля! (объяснить сложно, попробуйте сами) И работает всё это очень быстро

🗂 Для того чтобы размножить линию по горизонтали использовал бесплатный плагин Repeater

Сергей собрал эту иллюстрацию в Rive, а Вальд записал видео-туториал по своему варианту

Приложу исходные файлы в комментариях к посту
Поддержать на Boosty (закрытый чат after-effects - bodymovin - lottie энтузиастов 💅)

Новые модели для подарка Mousse Cake

Наш с Линой вклад в недавний релиз — работа над скинами тортиков
Когда смотрел на YouTube обзор обновления от LEAN HUSTLE, порадовался, что он обратил внимание на то, как торт меняет перспективу, наклоняясь вперёд, а также отметил необычную супрематическую модель. Мне, как амбассадору кругов и квадратов без градиентов было очень приятно над ней работать

В этом подарке явно избыточным было делать псевдо-3D модель, но как говорится "У самурая нет цели, у самурая есть только Nulls", так что всё-таки решил эти самые нули расчехлить, чтобы "цилиндр" вел себя физически корректно. Изменение перспективы сделано ключами на параметре Zoom камеры в 📱

Поддержать на Boosty (закрытый чат, записываю мини-туториалы, отвечаю на вопросы. нас уже 15 человек, спасибо)

Фокусное расстояние для шейпов в After Effects

Камера 📱 влияет на то, как отображаются 3D слои, в том числе на нули созданные Nulls from Paths для контролирования точек шейпа. Даже если не добавить — работает камера по умолчанию.

Дефолтная камера дает искажение перспективы, если нужна плоская/изометрическая/ортогональная проекция — обязательно добавляйте камеру с параметром Zoom 10000+ или измените настройки дефолтной камеры композиции

Изменяя параметр Zoom одновременно с Position можно добиться эффекта Dolly Zoom 📹

«Долли-зум» (dolly zoom) — это приём в кинематографе, когда камера одновременно движется (долли) вперёд или назад, а объектив (зум) приближает или отдаляет изображение в противоположном направлении. Этот эффект создаёт сюрреалистическое ощущение, при котором объект остаётся прежнего размера, а фон искажается, будто растягивается или сжимается.

Для того чтобы позиция подстраивалась автоматически под зум использую код

x = value[0];
y = value[1];
z = -thisComp.layer("Camera 1").cameraOption.zoom;
[x, y, z]

В комментарии скину проект 📱 в котором будет: тестовая композиция с примером из поста, сетап для торта Mousse Cake, запеченный финальный шаблон Mousse Cake

Поддержать на Boosty (закрытый чат, записываю мини-туториалы, отвечаю на вопросы)

🤟 Я большой любитель залетать на проекты не по своему основному профилю, к примеру работал в геймдеве (пришлось за неделю изучить Spine), делал 3D стикеры (Cinema4D+Redshift), изучал симуляции в синеме для конкурса от Notcoin, в этом году вообще поработал арт-диром на 2D-моушн проекте

Теперь же выпала возможность спасибо Вике сделать промо-ролики на медиафасадах/ситибордах для Лучше
Я работал один, без студии, с иллюстрациями и идеями помогали только ребята из команды eLama

🔣 В видео ничего экстраординарного: анимация нескольких слайдов по брендбуку/стилшотам/референсам, хочу рассказать именно о специфике работы с дистрибьюторами рекламы на экранах

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

2. Разрешения
при расчете стоимости за работу обязательно учитывайте количество разрешений на выходе, делать 40 разных разрешений на 40 разных экранов — занимает кратно больше времени, чем один ролик. (изначально так не показалось) При разработке заранее продумывайте как будете переделывать анимацию под другое разрешение. Я делал сразу размер всех элементов с запасом и уменьшал композиции по необходимости

3. Дисклеймеры
Дисклеймеры — это больно. Они должны быть видны на любом кадре (я добавил темные подложки для белых букв), быть не меньше определенного размера. А если в дисклеймере забыли что-то дописать, придется рендерить все форматы по новой

4. Рендер
У каждого экрана свои требования по формату, кодеку, расширению, битрейту, размеру файла. Я бы не вывез без AfterCodecs и HandBrake. Media Encoder плох во всём: в скорости работы, в пережатии, в опциях. Я не использую Media Encoder ни в каких задачах

Думаю пока что с меня достаточно экспериментов, сейчас я сфокусирован над анимацией подарков для Telegram 💪

Поддержать на Boosty (закрытый чат, записываю мини-туториалы, отвечаю на вопросы)

Риггинг шейпов с shapeRig

После знакомства со скриптом shapeRig не отпускала мысль попробовать его в каком-нибудь риге с изгибающимися путями, ведь в отличии от Create Nulls from Paths, с которым сделать подобное стало бы нетривиальной задачей, кривизна определяется не тремя контроллерами, а одним, благодаря тому, что длина направляющих изменяются параметром Scale

🪄 Базовый риг работает на привязках нулей: верхние нули ленты стоят статично, а нижние привязаны к основанию медальки
🪄 Сжатие и изгиб сделаны на выражениях, построенных по одному и тому же принципу: в зависимости от перемещения круглого основания по оси Y — нули сдвигаются по X position / меняется параметр Scale, отвечающий за кривизну, например:

// Сдвиг левого верхнего зеленого Null, смещающий его по оси X, для создания сужения ленты при "натягивании" медали
// Слой, от которого зависит движение
ctrl = thisComp.layer("MAIN");

// Берём значение Y из позиции того слоя (в пространстве композиции)
y = ctrl.toComp(ctrl.anchorPoint)[1];

// Определяем диапазон изменения Y (например, от 0 до 512)
yMin = 330;
yMax = 512;

// Определяем диапазон для X (куда будет мапиться)
xMin = 157; // минимальное положение X
xMax = 177; // максимальное положение X

// Текущее положение слоя
p = value;

// Преобразуем Y → X
mappedX = linear(y, yMin, yMax, xMin, xMax);

// Возвращаем итоговую позицию (X изменяется, Y остаётся как был)
[mappedX, p[1]]

Можно использовать в моушне, а можно запечь и зарендерить в json/lottie;

Риггинг имеет смысл, если нужна математическая точность в движениях или планируется большая серия анимаций одного и того же изображения, во всех остальных случаях проще сделать методом NA GLAZOK, RUCHKAMI

Скачать ShapeRig, бесплатно
Туторил по ShapeRig на YouTube (англ. яз)
Исходники *.aep в комментариях к этому посту, бесплатно и без СМС

Поддержать на Boosty (закрытый чат: разбираемся в нюансах работы в 📱 для создания стикеров/подарков/emoji, да и просто ТРЕЩИМ. Нас уже 17 человек, всем спасибо ❤️)