💱Самый примитивный поворот в Lottie

Этот способ отлично подойдёт для большого количества простых объектов и поможет легко добавить вашей анимации ощущение 3D.
🪙 Рассмотрим на примере монеты из Finance Emoji

Шаг 1
Редактируем ↔️ Path переднего слоя монеты и сужаем до одной линии — как будто поворачиваем объект в профиль.

Шаг 2
Заднюю часть монеты делим на две половинки и также сводим их к одной линии. В результате должен получиться прямоугольник, ширина которого отображает толщину монеты.

Шаг 3
Переднюю часть дублируем и анимируем её появление с другой стороны монеты. После чего все соединяем.

✨ В итоге у нас получился самый простой поворот — визуально понятный, лёгкий в исполнении и идеально подходящий для ваших Lottie анимаций.

В качестве примеров для изучения — делюсь с вами тремя вариантами анимаций монет!
(Бонусом — композиция 🪙 в проекте)

В любую из монет вы легко можете подставить свой логотип или иконку.
Для этого просто откройте композиции Logo_1 и Logo_2, и замените внутри них файл на нужный вам, меняйте цвет монеты под себя и обязательно делитесь результатами!

📂 Проект можно скачать в комментариях!

🎁 Каким мог бы быть Big Year

Как я писал ранее, этот подарок вполне мог состоять просто из перекрашенных цифр 2025, но на середине пути концепция изменилась.

Вот несколько скинов, которые не вошли в финальный релиз 🤫

А какая концепция вам больше нравится?

🔥 – Уникальные года
❤️ – Перекрашенные 2025

Релиз!

Пока все ждут новых подарков – встречайте первый в Telegram конструктор скинов!

Я поучаствовал в проекте ✨Gift Craft, в котором ты собираешь подарок из разных частей и получаешь эксклюзивные модели.

Первый подарок основан на базе 🎁Toy Bear (автор этого прекрасного подарка – zhgun nft) А количество возможных комбинаций – более 700 миллионов!

Открывай бота и протестируй новую механику. Найди свою любимую комбинацию и удиви друзей.
Не забудь поделиться своим первым дропом и впечатлением от конструктора в комментариях или чате канала!

🍓Не концепт, а реальность!

Не прошло и недели с релиза бота, а мы уже добавляем новый подарок для генераций!

🎁 Berry Box — новый подарок доступен для комбинирования скинов. Более 1 миллиарда уникальных сочетаний!
Такая модель будет только у тебя.
(Автор оригинальных скинов по этой ссылке)

Скорее открывай бота и пополняй свою коллекцию!
Давайте вместе поделимся этой прекрасной новостью с друзьями и покажем, что такое по-настоящему уникальные подарки!

🎁Отклонёнки, которые так и не выйдут.. но есть нюанс

Это действительно наброски идей для скинов, которые не прошли дальше и в анимации мы их уже не увидим. Почти
Одна из этих идей всё же получила зелёный свет — и будет ждать вас с релизом.

🎁Jolly Chimp еще не успел выйти в открытую продажу, а он уже доступен для скрещивая.

Тысячи забавных и необычных комбинаций могут получится всего за пару кликов 🤯

Большое спасибо авторам оригинальных скинов за такой красивый и разнообразный подарок! (Alexander, OLGAGLOW, @snowyjellyfish, Anna)

Эффект лупы для Lottie анимации

Если пробовали делать маску в After Effects и потом выгрузить в Lottie — то знаете: обычные маски там не работают.
Выход — использовать Track Matte. Покажу на примере лупы из этого скина 🎁

Как сделать:

1. Соберите все слои, которые должны быть «под стеклом», и закиньте их в Pre-compose

2. Создайте или отделите слой, который будет играть роль маски (в нашем случае – стекло лупы)

3. В столбце Track Matte свяжите слой-маску с содержимым

Если параметр Track Matte не отображается, включите столбец Modes над таймлайном

4. Так как это лупа, увеличьте слой под маской и анимируйте его Position в тех же ключевых кадрах, что и движение самой лупы

В конце не забудьте скопировать изинги с основного слоя, чтобы совпадала скорость анимации (скрипт EaseCopy)

В результате получится эффект увеличительного стекла — аналог маски, который будет работать в Lottie

❗️Важно: маски в Lottie сильно нагружают итоговый json/tgs. Используйте их только там, где без них ну никак

📁 Скачать проект 🎁 можно в комментариях!

🎁 В качестве примера для изучения – кнопка с логотипом.

В клавишу вы легко можете подставить свою иконку.
Для этого просто откройте композицию Icon и замените внутри нее файл на нужный вам!

📁 Проект можно скачать в комментариях!

Как импортировать стикеры в After Effects

Часто задают такие вопросы, поэтому держите короткий гайд:

1. Скачать стикер
Любой стикер/эмодзи из Telegram скачается в формате .tgs

2. Конвертировать в JSON
Разархивируйте .tgs или просто киньте его боту @IdeaAnimator_bot – вы получите готовый .json

3. Импортировать в After Effects
Откройте плагин Bodymovin (он есть в этом списке) → нажмите Import Lottie Animation → выберите свой .json

❗️ Градиенты
After Effects не умеет импортировать градиенты: они все будут ч/б. Цвета придётся восстанавливать вручную по подсказке в плагине или оригиналу

Новый бот для аниматоров!

@IdeaAnimator_bot

Есть несколько ботов, которые оптимизируют банальные вещи для аниматоров, но недавно они стали отключаться — как однажды случилось с Typogram (кто знает, тот знает). Поэтому, для экономии времени и удобства, я сделал для себя бота, который позволяет проигрывать Lottie-анимации и быстро выдергивать оттуда SVG нужного кадра. Сейчас я докрутил туда пару полезных команд и готов поделиться им с вами.

📌 Что умеет бот:

/noscript — Превью вашей анимации в 2 клика, вытаскивает SVG из стикера или json файла. Удобно, когда нужно быстро разглядеть анимацию или достать noscript нужного кадра.

/json — Конвертирует стикеры и эмодзи прямо в JSON, готовый к импорту в After Effects.

/optimize — Чистит и оптимизирует ваш JSON, убирая лишнее и облегчая вес анимации.

В итоге:
Всё работает прямо в Telegram, в одном боте, в одно нажатие!

Сохраняйте, делитесь, пользуйтесь! ❤️

Создание пиксельной анимации ч.1

Я очень люблю пиксели и у меня есть несколько наборов, которыми уже успели воспользоваться сотни миллионов раз 🦖🔥💻

Есть несколько способов реализовать пиксельную анимацию в Lottie:
– через параметр Color у пиксельной сетки;
– через перемещение каждого отдельного пикселя;
– через полную замену кадра новым слоем;
– и мой способ – через параметр Path.

Подготовка
Для начала нужно правильно настроить Illustrator и After Effects под работу с пиксельной графикой.
Самое удобное – использовать сетку.

В моём примере анимация будет создаваться в разрешении 24×24 пикселя.
В настройках сетки (Preferences → Grids) выставляем:
Gridline every: 80 px
Subdivisions: 4

Отрисовка персонажа
После настройки сетки можно переходить к отрисовке персонажа в Illustrator.
Для быстрых скетчей я использую Pixquare на планшете.
Рисуем обычными прямоугольниками и квадратами по сетке. Не забудьте включить Snap to Grid, чтобы все элементы точно стыковались между собой.

Когда крупные части персонажа готовы, объединяем их с помощью Pathfinder.
Так, например, слой головы на скриншоте — это один цельный объект, а не набор квадратов.
Это решение не только упрощает анимацию, но и уменьшает вес проекта.

Для сравнения: голова состоит из 170 пикселей. Если бы каждый был отдельным квадратом, это дало бы 680 точек, а в объединённом варианте — всего 22.

Импорт в After Effects
Когда персонаж и дополнительные позы готовы, переносим всё в After Effects с помощью плагина Overlord.
Он точно размещает персонажа в композиции размером 512×512 пикселей, после чего можно сразу переходить к анимации.

Об этом совсем скоро ⌛

Создание пиксельной анимации ч.2

Теперь, когда иллюстрация импортирована в After Effects, можно переходить к анимации.

1. Проставляем Hold Keyframes
Первым делом я выставляю на весь Path ключевые кадры в режиме Hold.
Для этого:
- в поиске над таймлайном введите Path;
- выделите все ключевые кадры;
- переключите их в режим Hold, чтобы анимация менялась резко, без плавных переходов.

2. Рисуем следующий кадр
Далее я перемещаюсь на несколько кадров вперёд (в моём случае – каждые 9 кадров) и начинаю рисовать следующий кадр, передвигая Path.

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

Если перемещать пиксели мышкой “на глаз”, вы не получите pixel perfect – линии будут наезжать друг на друга или оставлять зазоры.

Памятка по работе с Path
• Выделить все точки Path – клик по любой точке с зажатым Alt (Option)
• Выделить ребро (две соседние точки) – клик по линии между ними
• Выделить несколько точек – клики по точкам с зажатым Shift
• Выделить область точек – прямоугольное выделение нужной области

Если нужно двигать весь объект целиком, можно использовать параметр Position.
Также выставляем Hold Keyframes и сдвигаем объект стрелками для точного позиционирования.

Результат 🐶
Постепенно, выстраивая кадры один за другим, вы получите полноценную анимацию персонажа.
Если сложно придумывать движения на ходу – заранее подготовьте позы.

А если покадровая анимация Path кажется слишком сложной, можно отрисовать все позы отдельно и импортировать их в After Effects отдельными слоями, просто переключая их видимость.

📂 Для наглядности оставлю проект в комментариях, а так же несколько гифок из таймлапса работы, для визуализации всего вышесказанного