Боль многих аниматоров в 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 человек, всем спасибо ❤️)

Контест от Telegram для UI/UX дизайнеров уже начался, 5 декабря стартует конкурс для художников/аниматоров

Мы с Линой давно готовили мастер класс, но по этому случаю решили запустить его в раннем доступе
Мастер-класс по созданию подарков/скинов/стикеров/emoji в 📱 и 📱 для рендера в tgs (Telegram) и json форматы, подробности тут

У себя сделаю анонс в ближайшие дни, когда добавим больше контента по анимации, на данный момент есть:
4 урока по отрисовке, 1 по анимации, полная записи работы в Ai и Ae (более 4 часов), исходники, чат, дз и фидбек

На МК показываем как сделали этого персонажа от скетча и вектора до анимации и рендера:
это не Redo и никогда им не был

Мужик анимирует emoji целый час с комментариями, смотреть платно

Записал урок, в котором можно ознакомиться с полным процессом анимации под стикер/гифт/emoji в After Effects, а это трейлер того, как выглядят уроки на мастер классе. Купить тут, инфа тут, до завтрашнего вечера -15% NOTACLOWN

Тем временем раньше обозначенных ранее сроков анонсировали конкурс на подарки в официальном канале Telegram Contests

Вкратце:
задача сделать модель/скин для подарка "фигурка Павла Дурова" 🎁 (для примера скинов смотрите уже вышедшие подарки);
можно сделать анимированный скин (📱 + tgs) или статичный под будущую анимацию (📱 + png);
дедлайн 31 декабря, общий бюджет контеста 50000$, до 500$ за одну победившую модель (можно отправлять сколько угодно).

Т.е. концепты тут не прокатят, нужна завершенная модель с исходниками
Что думаете, будете участвовать?