Pototsky!
3.41K subscribers
39 photos
112 videos
6 files
139 links
Я работаю над оживлением официальных подарков, emoji и стикеров в Telegram. Пишу про After Effects, Lottie, моушн-дизайн и анимацию https://linktr.ee/pototsky
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Wave warp на уровне path в After Effects

Знали бы вы сколько раз я накидывал Wave Warp в АЕ, а потом обводил это всё руками по кадрам, чтобы заработало в Lottie 🫠

Недавно нашел скрипт Tilda (0$+, Name Your Own Price), который упрощяет эту задачу: добавляет экспрешн с контроллерами на path, после чего код можно преобразовать в ключи командой Animation - Keyframe Assistant - Convert Expression to Keyframes и зарендерить в Bodymovin/BodymovinTG

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

Обязательно посмотрите страницу скрипта, там много примеров использования!

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

Поддержать на Boosty
2🔥41🙏13
Notcoin объявили о конкурсе на стикеры, общие призовые ~12000$

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

-минимум 10 стикеров до 5 февраля
(нереальный дедлайн для качественной работы)
-12000$ на всех (т.е. будет всего 12 победителей по $1k или же призовых мест будет больше, но с меньшими призовыми, что просто смешно для ДЕСЯТИ стикеров)

Для сравнения в конкурсе телеграма 2021 года бюджет был $50000, сроки больше, 3 стикера от участника. В общем решайте сами, наверное есть смысл сделать что-то мемное с минимальной анимацией или вообще без анимации (разрешено правилами)

UPD В условиях: Featured on @sticker_bot (with revenue share) т.е. при выигрыше будет еще и процент с продаж. Но сроки всё еще нереальные

UPD2 Контест продлили до 12 февраля, добавили возможность загружать не только tgs, но и webp
🙏7👨‍💻3
This media is not supported in your browser
VIEW IN TELEGRAM
Сделал еще один пример с помощью Tilda — ну просто сказка, огонь и дым в пару кликов хоть для видео, хоть для Lottie 🔥

Для анимации огня под Lottie я всегда использовал auto-trace + покадровую по референсу или же какие-то простые шейпы с минимальным движением (если позволяет стилистика). На покадровую аккуратную обрисовку уходит невероятно много времени, а из-за моей криворукости еще и выглядит хуже, чем тильдой

Никому не рассказывайте! Оставьте для себя 🤫

Проект в комментариях
Поддержать на boosty
6🔥49💯4
This media is not supported in your browser
VIEW IN TELEGRAM
Продолжаю экспериментировать с выражениями в Аfter Еffects
Всё тоже самое, что в этом проекте, но цифры заменил на кружочки и анимировал Null с помощью Motion Sketch

Постоянно забываю про существование вкладки Motion Sketch, а ведь в связке с айпадом (он подключается к маку как второй экран или как дублирующий экран) можно быстро анимировать всякие разлетающиеся штуки
🔥38👨‍💻3
This media is not supported in your browser
VIEW IN TELEGRAM
Блики градиентами в After Effects

Подписчик в комментариях спросил как делаются подобные блики (для рендера в lottie, так что опустим тему эффектов АЕ вроде CC Light Sweep)

Я копирую шейп на котором нужно анимировать блик, добавляю градиент и ставлю на нем вплотную точки Opacity 0% и 100%, чтобы переход непрозрачности практически не был заметен, затем анимирую Start Point и End Point градиента.

Но почему бы просто не использовать несколько квадратов под маской? Дело в том, что lottie добавляет аниматору еще одну зону ответственности — максимальная оптимизация файла, а маски сильно бьют по производительности.
Вот статья о том как неоптимизированная lottie анимация повлияла на метрики сайта и как её исправили, я постараюсь раскрыть эту тему в будущих постах.

Мой пойнт заключается не в том, чтобы вообще не использовать маски, а чтобы минимизировать их использование

Если прямой блик не подходит — анимируем path блика руками и прячем за обводкой/другим шейпом

Поддержать на boosty
🔥59🙏8👨‍💻6
This media is not supported in your browser
VIEW IN TELEGRAM
Тригонометрия в After Effects
sponsored by ChatGPT

Спонтанно родилась идея реализовать вписанные и вневписанные в треугольник окружности в АЕ

1. Создаю окружность и 3 Null Layer, описываю задачу жпт
2. Получаю от жпт выражения на size и position круга
3. Соединяю 3 нуля линиями с помощью Create Nulls From Paths EXTENDED
4. Добавляю звезду в центре окружности, прошу у жпт выражения для size и position звезды
5. Текст не умеет работать с шейпами, поэтому для него создаю маску и привязываю path маски к path треугольника
6. Делаю трекинг видео с тремя лего колесами в Mocha и экспортирую значения position для каждого из нулей


Проект в комментариях бесплатно и без смс, он отлично организован и можно посмотреть весь код с комментариями

Лайкнуть Reels | Shorts
Поддержать на boosty
🔥56💯8👨‍💻6🙏2
This media is not supported in your browser
VIEW IN TELEGRAM
База по градиентам для Lottie 1/2

Несколько раз просили рассказать про градиенты в After Effects в контексте Lottie, собрал всю известную мне информацию

Коллеги, если с чем-то не согласны — пишите в комментариях

• Работают все шейповые градиенты: Gradient Fill, Gradient Stroke в режимах linear, radial;

• Для переноса шейпов без/с градиентами из Ai/Figma существует плагин Overlord, еще есть AEUX для переноса из Sketch/Figma (его не тестировал);

• Работу JSON нужно проверять во вкладке Preview плагина Bodymovin. А так же тут: Web, Web, iOS. Тестировать всегда, в особенности когда были использованы градиенты

Я собрал проект по максимуму использовав все возможности градиентов, будет в комментариях к следующему посту

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

• Анимировать Start Point и End Point градиента, перемещая его по шейпу

• Анимировать сами цвета градиентов


Поддержать на boosty
7🔥30👨‍💻5
База по градиентам для Lottie 2/2

Неподдерживаемые фичи:
Color Midpoint — контроллер в виде ромбика между цветами градиента. Можно обойтись без него добавив больше контроллеров цвета/непрозрачности

Aspect Ratio aka овальные градиенты не поддерживаются даже на уровне шейпов в Аe, не то что в Lottie. Как выкрутиться показал в этом посте


Баги/проблемы:
Вместо цветного градиента рендерится черно-белый. Сохраните проект и зарендерите еще раз

Градиенты всё равно отображаются с неверными цветами? — проверьте названия градиентов, они должны начинаться со слова Gradient, попробуйте заменить цифру в названии "Gradient Fill 1". Для автоматизации процесса переименовывания градиентов (каждому присваивается индивидуальное название) есть скрипт, скину его в комментарии

При переносе через Overlord в Аe слетают точки градиента. Решения:
-поправить точки Start Point, End Point в Аe (иногда они находятся далеко за пределами композиции)
-заново провести градиент в Ai, после чего он перенесется корректно
-плагин для Ai Astute Graphics, панель Gradiator, кнопка Reset решит проблему (боже, напишите бесплатный скрипт с этой функцией 🙏) способ обнаружил sokol.dsgn

• "Лесенки" на градиентах с непрозрачностью это особенность рендера, выглядит немного по-разному в зависимости от операционной системы


Поддержать на boosty
6🔥28🙏7
This media is not supported in your browser
VIEW IN TELEGRAM
Анимировал сет из 100 подарков для Telegram

Если пропустили — в телеграм теперь есть возможность дарить подарки и конвертировать их в NFT

Перекрашивать всё это та еще боль т.к. нормальных инструментов для массовой замены цветов в Ае не завезли. Существующие скрипты, например Colors, могут обнаруживать и менять цвета в эффектах, но не в шейповых градиентах 💀

Рисовал Миша
3🔥51👨‍💻7🙏2💯1
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4019🙏6
Pototsky!
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Сетап карусели в After Effects

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

Про камеру: если в проекте есть 3D слои или эффекты, которые работают в 3D (напр. CC Cylinder, CC Sphere) — начинает работать дефолтная камера, даже если камеру не создавали. По умолчанию она дает искажение перспективы, что неуместно во многих ситуациях, особенно когда нужно анимировать UI/текст. Добавив камеру с высоким фокусным расстоянием, например 20000 (параметр zoom) мы приблизимся к ортографической проекции

Ориентация карточек: карточки вращаются относительно Null Object, есть несколько способов сохранить их ориентацию в пространстве:
1. Код на X Rotation. Карточки игнорируют поворот родительского слоя по X, но поворачиваются с помощью дополнительного нуля
-thisComp.layer("Null 1").transform.xRotation

2. Layer - Transform - Auto-Orient - Orient Towards Camera
карточки всегда смотрят в камеру, как бы ни поворачивались родительские слои, позволяет создать интересный спиральный скролл

Исчезновение дальних плашек: работает за счет выражения на opacity (смотреть в проекте), которое увеличивает значение в зависимости от приближения к камере

Поддержать на boosty
Please open Telegram to view this post
VIEW IN TELEGRAM
5🔥57🙏8👨‍💻44
This media is not supported in your browser
VIEW IN TELEGRAM
Автоматизированный Text Box в After Effects

Никогда такого не было, и вот опять: в очередной раз поиск решения самой, казалось бы, примитивной задачи в After Effects 📱 превращается в увлекательное приключение в глубины интернета

Запрос в гугле Auto-Resize Text Box After Effects выдает сотни туториалов: вот статья от motion array, видео на 150к просмотров про text box на экспрешнах, еще одно видео про text box, но уже помощью эффектов.

Спасибо, конечно, но есть нюанс: эти решения меняют высоту бокса при анимации букв, да и без анимации боксы будут разных размеров в зависимости от того есть ли в словах буквы с выносными элементами или нет. В некоторых обучалках сознательно используют прописные буквы, чтобы скрыть этот недостаток ⚰️

К вашему счастью нашелся энтузиаст, который написал код для бокса, расчеты которого основаны на размере текста без учета выносных элементов, а не просто height и width текстового слоя, да еще и с удобными контроллерами.
Статья с бесплатным проектом и видео (у него почти нет просмотров) или просто ссылка на проект
Чекайте и другие статьи, пишет про автоматизацию, выражения в АЕ (англ. яз)

UPD Подписчик написал, что в АЕ2025 добавили пресет, который работает корректно

Поддержать меня на boosty
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥47👨‍💻147
This media is not supported in your browser
VIEW IN TELEGRAM
Автоматизированные Text Animators в After Effects

Выбор отображаемого слова/предложения слайдером:
Менять слова ключами на source text — это непередаваемая боль: расставлять кейфреймы долго, весь текст целиком не просмотреть, при изменении стиля одного слова другие не изменятся

Предлагаю заменять слова добавив слайдер и следующий код:

t=thisComp.layer("text").text.sourceText;
word=t.split(" "); n = Math.floor(effect("Slider Control")("Slider"));
word[n]

split(" ") — это разделитель. С ним слова будут отделяться по одному, если нужна группировка нескольких слов, можно использовать разделитель split("|"), для разделения по предложениям — точку split(".") думаю логика ясна

Автоматизация Text Animators при изменении значения слайдера:
Например хочется добавить анимацию при каждой смене слова. Конечно, можно сделать руками, но зачем бы я тогда писал этот пост, да? Выбираю текстовый аниматор opacity, ставлю 2 ключа: от 0 до 100% и добавляю выражение:

txt=effect("Slider Control")("Slider");
nk=txt.nearestKey(time);
nki = nk.time>time ? nk.index-1 : nk.index;
valueAtTime(time - txt.key(nki).time)

теперь каждый раз, когда на таймлайне встречается ключ слайдера — анимация opacity будет воспроизводиться от 0 до 100%
в примере добавил еще несколько аниматоров

UPD Подписчик и автор канала AE2 | Extension After Effects дополнил пост своей версией с заменой текста на основе маркеров (удобно управлять текстом прямо на таймлайне)

Проект 📱 в комментариях к посту
Поддержать на boosty
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥318🙏3
This media is not supported in your browser
VIEW IN TELEGRAM
Новый подарок для Telegram и 3D в Lottie

Павел Дуров рассказал о девяти новых подарках ко дню святого Валентина, а уже спустя несколько часов их раскупили. Я не успел купить ничего, но поучаствовал в создании одного из них — анимировал кулон в форме сердца. А нарисовал его Миша

Один из самых популярных вопросов касаемо Lottie: как делается псевдо-3D? Как и всё остальное — шейпами, а если ответить более детально, есть несколько подходов:

1. Умение рисовать и понимать построение формы
Тут всё понятно, аниматор с подобными скиллами может самостоятельно отрисовать необходимые ключевые кадры. Я поворачиваю простые симметричные элементы просто дорисовывая и перемещая шейпы, хоть и не обладаю хорошими навыками иллюстратора/художника

2. 3D референс
Ключ для кулона сделал в Cinema4D, футаж с анимацией импортировал в АЕ и воссоздал ключ шейпами. Иногда приходится ставить ключи на path в каждом кадре — это нормально (в момент поворота ключа). А вот для наклона ключа в самом начале проставил кейфреймы только для начальной и конечной позы.
В старом посте рассказывал как для анимации emoji пользовался референсом, который сгенерировала нейросеть

3. Генерация 3D модели
Подходит для простых геометричных моделей
3D шейпы с помощью Null From Paths
• Плагин Extrudalizer
Главный минус — анимацию придется запекать, а потом чистить от ненужных кейфреймов. Теоретически я мог сделать ключ именно так, но не факт, что влез бы в рамки 64кб.

Поддержать на boosty
27🔥6210🙏5👨‍💻4
This media is not supported in your browser
VIEW IN TELEGRAM
Echo + Transform в After Effects

Идея пришла, когда писал пост про Time Blend FX
Постараюсь описать кратко: эффект echo оставляет за собой копии, но для этого нужно передвинуть объект, а я хотел двигать копии оставляя объект на месте. Решение такое:
1. Перемещаем шейп по Y на 500px вверх, к примеру
2. Добавляем эффект Transform, ключ на position по Y, сдвигаем на 500px вниз. Тайминг и спейсинг ключей должен совпадать
3. Добавляем эффект echo


Таким образом копии echo улетают наверх за счет передвижения футажа вниз, но он остается на месте т.к. мы компенсируем движение с помощью position

Раскрасил композицию с помощью ключей на Fill+Stroke, накинул Fast Blur в режиме Vertical и сверху Simple Chocker, можно посмотреть в проекте 📱, скину в комментариях там другой футаж, но суть та же

Поддержать на boosty
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥338💯6🙏3👨‍💻3
This media is not supported in your browser
VIEW IN TELEGRAM
Лимитированная анимация в After Effects

Самая резкая анимация между двумя ключами в After Effects, когда outgoing velocity influence 1%, а incoming velocity influence 100% — на самом деле вообще не резкая

Для действительно резкого движения, придется добавить еще один ключ — холд или линейный вплотную к предыдущему

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

Вот пример от seven_playstudy — одна сцена, плавнейшие движения сменяются резкими и отрывистыми.
Пример из мира персонажки от deekaymotion
обратите внимание на руки, плавная анимация чередуется с максимально резкой (в один кадр)

В моем примере нет правильного и неправильного варианта: всё зависит от контекста применения
Проект 📱 с примером из поста можно найти в комментариях

Поддержать на boosty
Please open Telegram to view this post
VIEW IN TELEGRAM
3🔥5511🙏5💯2👨‍💻1
This media is not supported in your browser
VIEW IN TELEGRAM
Code Buddy — органайзер для выражений в After Effects

Свою коллекцию экспрешнов внутри 📱 можно собрать через панели Kbar3 (40$) и MoBar (0$+), но они у меня так и не прижились вероятно из-за лени кастомизировать под себя

Но есть альтернативный вариант — Code Buddy (0$+)
Добавляем выражения и применяем/убираем легким нажатием ЛКМ. Жить стало проще!
Please open Telegram to view this post
VIEW IN TELEGRAM
320🔥14🙏4💯2
This media is not supported in your browser
VIEW IN TELEGRAM
Очередная полезная находка на reddit с исходниками проекта 📱 на github

Это карта Сеульского метро, анимация которой автоматизированна с помощью контроллеров, выражений и таблицы CSV

А это туториал на youtube по созданию графика с помощью шейпа на основе данных из CSV файла
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥40🙏66💯1👨‍💻1