Идейный Аниматор – Telegram
Идейный Аниматор
3.02K subscribers
24 photos
3 videos
3 files
22 links
Создаю Lottie-анимации (Стикеры, Emoji, Подарки, NFT)

Чат для идей – @ChatofIdea
Для заказов – сообщение каналу
Download Telegram
🎁 Big Year — история набора, конечно, уникальна.
Изначально он задумывался как обычный сет с цифрами 2025 в разных стилях и с разными спецэффектами.
Но на середине пути @ohuenko предложил сделать каждый год уникальным, отражающим какое-то важное событие в истории.

🎁 Так появились 50 уникальных подарков на разные темы — от знаковых людей и компаний до открытий и премьер.
Оставшиеся 5 скинов — это старые наработки, которые, по большей части, отправились в 🗑

Поскольку все отсылки и смыслы этого набора уже давно разобрали (хотя и там остались малозаметные пасхалки), лучше разберем эффект 🎁 «удара / нажатия», который часто используется в той или иной форме во многих анимациях.
Please open Telegram to view this post
VIEW IN TELEGRAM
8🔥5👍31
This media is not supported in your browser
VIEW IN TELEGRAM
Разберём этот эффект на примере удара сердца!

Уровень 1

Начнем с анимации параметра Scale у сердца.
Важно понимать, что для придания движению реалистичности, у основного действия (в данном случае удара) есть ещё две фазы:
подготовка и последствие. Обе стоит учитывать, чтобы анимация выглядела живой и естественной.

Уровень 2

Добавляем анимацию ↔️Position для большей динамики.
Плюс — анимируем ↔️Path у сердца, чтобы передать его эластичность.
Тут важно учитывать характер элемента: в некоторых случаях такая деформация может быть неуместной.

Уровень 3

Можно было остановиться на втором уровне, но хочется добавить красочности и выразительности.

🎨Добавляем резкую смену цвета в ключевой момент удара.
Чтобы белое сердце не выглядело одиноко в пиковом моменте — добавим уходящую белую обводку.
Для этого используем анимацию ↔️Path (увеличиваем форму) и 🖍Stroke Width (для плавного исчезновения).
И в завершение — разлетающиеся сердечки, поворот которых реализован простым изменением ↔️Path.

❤️ Наш эффект удара сердца готов!

📁 Проект с эффектом — в комментариях
Please open Telegram to view this post
VIEW IN TELEGRAM
1710🔥8👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Мой Finance Emoji набрал 3 миллиарда использований!

Он, кажется, был первым официальный набором про финансы и криптовалюту.
🚀 Меньше чем за год, он улетел куда-то в космос по статистике, хотя еще только недавно отмечал 1.7 миллиарда использований. Он стремительно стал популярным и востребованным среди тематических каналов и чатов.
❤️Особенно приятно видеть, как набор используют для кастомов и переделок – теперь у множества каналов есть свои версии emoji 🎁🪙
Please open Telegram to view this post
VIEW IN TELEGRAM
22🔥10👍6
Fun Fact
✍️ При создании этого эмоджи была использована моя подпись.

Всегда смотрите что вы подписываете! 😁
Please open Telegram to view this post
VIEW IN TELEGRAM
5😁175🔥4
This media is not supported in your browser
VIEW IN TELEGRAM
🔖 Начинаем наш небольшой блок приёмов из Finance Emoji набора!

🗺 Первым будет — анимация следа пути объекта.
Немногие знают, как быстро и точно повторить траекторию движения объекта. Сейчас покажу, как это сделать шаг за шагом.

Шаг 1
Создаём анимацию ↔️Position у нужного объекта.

Шаг 2
Создаём линию, которая будет использоваться как след. В этом примере — обычный пунктир.

Шаг 3!
Чтобы повторить движение объекта и «превратить» его в линию:
– Выделите все ключевые кадры параметра Position у объекта. Скопируйте их.
– Выберите параметр Path у вашей линии.
– Нажмите Ctrl + V, чтобы вставить путь.

Линия может быть немного смещена — это нормально. Просто подвиньте её, чтобы она совпадала с объектом.

Шаг 4
Добавляем эффект Trim Path к линии. Уменьшаем длину следа (End/Start).
Анимируем параметр Offset, чтобы пунктир аккуратно следовал за движением объекта.

Шаг 5
Для более динамичной анимации — можно также анимировать длину следа (End/Start).

Готово! У вас получился простой и наглядный след движения.

📂 Хотите посмотреть, как это выглядит на практике? Проект можно скачать в комментариях!
Please open Telegram to view this post
VIEW IN TELEGRAM
21710🔥81
This media is not supported in your browser
VIEW IN TELEGRAM
💱Самый примитивный поворот в Lottie

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

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

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

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

В итоге у нас получился самый простой поворот — визуально понятный, лёгкий в исполнении и идеально подходящий для ваших Lottie анимаций.
Please open Telegram to view this post
VIEW IN TELEGRAM
4177🔥6
This media is not supported in your browser
VIEW IN TELEGRAM
В качестве примеров для изучения — делюсь с вами тремя вариантами анимаций монет!
(Бонусом — композиция 🪙 в проекте)

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

📂 Проект можно скачать в комментариях!
Please open Telegram to view this post
VIEW IN TELEGRAM
1524🔥136
This media is not supported in your browser
VIEW IN TELEGRAM
🎁 Каким мог бы быть Big Year

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

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

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

🔥 – Уникальные года
❤️ – Перекрашенные 2025
Please open Telegram to view this post
VIEW IN TELEGRAM
101🔥9016😍8
This media is not supported in your browser
VIEW IN TELEGRAM
Релиз!

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

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

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

Открывай бота и протестируй новую механику. Найди свою любимую комбинацию и удиви друзей.
Не забудь поделиться своим первым дропом и впечатлением от конструктора в комментариях или чате канала!
Please open Telegram to view this post
VIEW IN TELEGRAM
5117🔥6😍51
Конечно, это пока лишь эксперимент – обкатка новой системы, которая демонстрирует безумие возможных комбинаций и необычных сочетаний в формате бота.

Но что, если бы такую механику применили к самому процессу выпадения подарков?

🔥 – Было бы супер!
🫠 – Слишком сложно
3🔥66189😍3
This media is not supported in your browser
VIEW IN TELEGRAM
Добавим немного блеска?

Пока Gift Craft набирает обороты и готовит новые обновления, хочу поделиться простым приёмом, который поможет добавить вашей анимации немного сияния

Если вы анимируете металлические предметы, гламурные детали или что-то магическое — без блеска не обойтись.

Один из самых быстрых способов создать анимацию звезды – сочетание Path и Scale:
— Увеличиваем звезду с помощью Scale;
— Параллельно уменьшаем её толщину через Path до полного исчезновения.
Скорость исчезновения подстраивайте под общую динамику вашей сцены.

Для усиления эффекта можно также анимировать Rotation или добавить лёгкий градиент позади звезды.

В качестве примера — делюсь с вами четырьмя вариантами анимации.
Вы можете просто скопировать понравившуюся композицию в свой проект — и анимация засияет новыми красками!

📁 Скачать проект можно в комментариях!
2🔥38198
This media is not supported in your browser
VIEW IN TELEGRAM
🍓Не концепт, а реальность!

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

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

Скорее открывай бота и пополняй свою коллекцию!
Давайте вместе поделимся этой прекрасной новостью с друзьями и покажем, что такое по-настоящему уникальные подарки!
Please open Telegram to view this post
VIEW IN TELEGRAM
6🔥1910😍3😁2
🎁Отклонёнки, которые так и не выйдут.. но есть нюанс

Это действительно наброски идей для скинов, которые не прошли дальше и в анимации мы их уже не увидим. Почти
Одна из этих идей всё же получила зелёный свет — и будет ждать вас с релизом.
Please open Telegram to view this post
VIEW IN TELEGRAM
74🔥7031😍243
This media is not supported in your browser
VIEW IN TELEGRAM
🎁Jolly Chimp еще не успел выйти в открытую продажу, а он уже доступен для скрещивая.

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

Большое спасибо авторам оригинальных скинов за такой красивый и разнообразный подарок! (Alexander, OLGAGLOW, @snowyjellyfish, Anna)
Please open Telegram to view this post
VIEW IN TELEGRAM
120🔥13😁6😍4
База плагинов для Lottie-аниматора

Часто спрашивают, какие плагины нужны для комфортной работы с Lottie-анимацией, с чего начать. Некоторые коллеги уже делились, но я решил собрать воедино самые важные и актуальные инструменты, без которых трудно представить рабочий процесс:

Overlord — плагин для быстрой передачи слоёв из Illustrator в After Effects (для Figma есть Overlord 2, а также AEUX).
Motion Tool — мощный комбайн с десятками полезных функций. В последних версиях он объединил в себе почти всё необходимое. Настоятельно советую покопаться в каждом доступном скрипте!
Bodymovin — незаменимый плагин для экспорта/импорта JSON-анимаций.
Bodymovin for Telegram — версия плагина, заточенная под рендер в формате .tgs для Telegram-стикеров.
EaseCopy — копирование и вставка изингов и значений ключевых кадров. Да, похожая функция есть в Motion Tool, но здесь она сделана максимально удобно и понятно.

Без этих плагинов сложно представить работу над стикерами или подарками. Конечно, существует множество узкоспециализированных скриптов, но этот список — про базу, которая нужна каждому, кто хочет начать анимировать.

🗂️ Чтобы упростить жизнь, делюсь архивом в комментариях: можно установить всё нужное в пару кликов.
4662414🔥112
Официальный бот @Stickers наконец-то получил Mini App

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

Из интересного:
• наглядный список всех ваших наборов
• удобное и быстрое создание нового набора
• статистика использования по периодам
• количество использований для каждого конкретного эмодзи
• быстрое редактирование привязанных эмодзи
• добавление обложки у набора эмодзи

Жаль только, что это обновление появилось тогда, когда стикеры и эмодзи для Telegram мы делаем куда реже
112🔥6😍4
This media is not supported in your browser
VIEW IN TELEGRAM
Эффект лупы для Lottie анимации

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

Как сделать:

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

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

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

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

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

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

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

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

📁 Скачать проект 🎁 можно в комментариях!
Please open Telegram to view this post
VIEW IN TELEGRAM
216🔥1412
This media is not supported in your browser
VIEW IN TELEGRAM
Наклон в Lottie анимации

В After Effects у слоя есть параметр Skew (наклон/искажение). Однако при экспорте через Bodymovin этот параметр не поддерживается, и слой остаётся без искажения.

Всё дело в том, что Lottie использует упрощённый набор трансформаций (position, rotation, scale, opacity), а более сложные искажения, вроде skew - он просто не поддерживает.

Но решение есть!

Как имитировать Skew в Lottie

1. Создайте Null Object и привяжите к нему ваш слой (через Parent).

2. У Null измените параметр Scale, слегка «сжав» или «растянув» его по одной из осей.

3. Теперь, поворачивая слой, вы получите искажение, визуально похожее на перспективу/skew.

💡 Это простой приём, который позволяет наклонить объект под нужным углом с помощью комбинации Rotation + Scale.
62116🔥9
This media is not supported in your browser
VIEW IN TELEGRAM
🎁 В качестве примера для изучения – кнопка с логотипом.

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

📁 Проект можно скачать в комментариях!
Please open Telegram to view this post
VIEW IN TELEGRAM
651🔥119😍3
Как импортировать стикеры в After Effects

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

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

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

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

❗️ Градиенты
After Effects не умеет импортировать градиенты: они все будут ч/б. Цвета придётся восстанавливать вручную по подсказке в плагине или оригиналу
Please open Telegram to view this post
VIEW IN TELEGRAM
9🔥1377😍1