Идейный Аниматор
2.05K subscribers
1 photo
8 links
Создаю Lottie-анимации (Стикеры, Emoji, Подарки, NFT)

Чат для идей – @ChatofIdea
Download Telegram
👋 Всем привет!
Я уже больше 5 лет плотно занимаюсь Lottie анимацией – стикеры, эмоджи, реакции и, конечно же, ваши любимые скины 🎁🎁🎁

🔑 За это время накопилось много интересных находок и Lottie-Friendly эффектов, которыми я решил начать делиться.

🔎 Будем разбирать ваши любимые скины, эмоджи и стикеры, чтобы понять, как они устроены и как добиться такого же крутого уровня в своих работах!
Please open Telegram to view this post
VIEW IN TELEGRAM
👍98🔥7
This media is not supported in your browser
VIEW IN TELEGRAM
❗️Начнём с чего-то попроще — например, с лёгкого электрического взрыва.
Но для начала нужно разобраться, как сделать те самые разлетающиеся частицы.

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

Шаг 2
С помощью Trim Paths анимируем движение частицы. (чтобы получить такую же частицу, достаточно уменьшить параметр End до 1%)

Готово! Мы получили самый простой вариант разлета искры.

📈 Как это можно улучшить?

Во втором примере мы добавим анимацию параметра Stroke Width, чтобы частица плавно появлялась и исчезала.
Также мы настроим скорость полёта через Graph Editor, чтобы в верхней точке траектории частица замедлялась.

В третьем примере мы добавим анимацию Opacity для создания эффекта мерцания. Используем Hold Keyframes и значения 100 и 0 — просто ставьте их друг за другом с небольшим промежутком.

📁 Проект с частицей — в комментариях
Please open Telegram to view this post
VIEW IN TELEGRAM
10🔥64👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Теперь, когда разлёт частиц готов, мы можем создать небольшой взрыв с множеством элементов!
Для разнообразия рекомендую использовать разную 🖍толщину и 🎨цвет линий.

Комбинировать элементы можно бесконечно, но для примера мы добавим:

🔣Овальный градиент под взрывом — для имитации пульсации удара.
Дополнительные взрывы без обводок — для разнообразия эффекта.

В итоге получаем эффектные и динамичные взрывы, которые отлично подойдут для ваших работ!

📁 Проект с эффектом — в комментариях
Please open Telegram to view this post
VIEW IN TELEGRAM
8🔥64👍1
🎁
Please open Telegram to view this post
VIEW IN TELEGRAM
3👍3🔥2
🎁 Big Year — история набора, конечно, уникальна.
Изначально он задумывался как обычный сет с цифрами 2025 в разных стилях и с разными спецэффектами.
Но на середине пути @ohuenko предложил сделать каждый год уникальным, отражающим какое-то важное событие в истории.

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

Поскольку все отсылки и смыслы этого набора уже давно разобрали (хотя и там остались малозаметные пасхалки), лучше разберем эффект 🎁 «удара / нажатия», который часто используется в той или иной форме во многих анимациях.
Please open Telegram to view this post
VIEW IN TELEGRAM
7🔥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
159🔥7👍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
20🔥9👍5
Fun Fact
✍️ При создании этого эмоджи была использована моя подпись.

Всегда смотрите что вы подписываете! 😁
Please open Telegram to view this post
VIEW IN TELEGRAM
5😁165🔥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
2169🔥71
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
4157🔥5
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
1523🔥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🔥7213😍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
5116🔥6😍51
Конечно, это пока лишь эксперимент – обкатка новой системы, которая демонстрирует безумие возможных комбинаций и необычных сочетаний в формате бота.

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

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

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

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

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

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

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

📁 Скачать проект можно в комментариях!
1🔥35167
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🔥1810😍3😁2
🎁Отклонёнки, которые так и не выйдут.. но есть нюанс

Это действительно наброски идей для скинов, которые не прошли дальше и в анимации мы их уже не увидим. Почти
Одна из этих идей всё же получила зелёный свет — и будет ждать вас с релизом.
Please open Telegram to view this post
VIEW IN TELEGRAM
74🔥6528😍223
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
115🔥8😁5😍3