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
Блики градиентами в 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
This media is not supported in your browser
VIEW IN TELEGRAM
Анимировал подарок и 5 скинов для свежего релиза в Telegram

Наверное это первый раз, когда я анимировал пиксель арт в 📱 (я про экраны тамагочи)
В восторге от отсылок на game and watch и portal, нарисовала Лина

Пишите в комментах, если есть какие-то вопросы по реализации подобной анимации в связке After Effects + Lottie
Please open Telegram to view this post
VIEW IN TELEGRAM
55🔥6312👨‍💻3
Bodymovin-TG с поддержкой Gradient Strokes

Под базой по градиентам в Lottie возник вопрос об ошибке рендера обводки с градиентами в Bodymovin-TG (Bodymovin для Telegram стикеров/emoji)

На github в данный момент можно найти только старую версию, в которой эта фича не поддерживается

В комментариях скину обновленную версию с поддержкой Gradient Strokes, насколько я знаю в публичном доступе её еще не было
Обновление на github тоже будет но я не знаю когда, так что это временный эксклюзив

Поддержать на boosty
150🔥31🙏75
This media is not supported in your browser
VIEW IN TELEGRAM
Поток из линий в After Effects 📱

Делал подобный шот на проекте с prand.tv, использовался как метафора передачи/обработки большого объема данных в моем примере получилось больше похоже на изображение хорошей проходимости кишечника, но если вы делаете графику для научпопа, то это даже к лучшему

Основные моменты:
1. Для движения линий создал 8 Adjustment'ов шириной с полоску, сверху эффект Offset c выражением:
yOffset = time * -800;
[value[0], value[1] + yOffset]

у слоев разные множители time, чтобы крайние двигались медленнее, чем центральные

2. Искажение потока — эффект Bulge снизу вверх в цикле
loopOut();

3. Наклон линии — эффект Corner Pin

На реальном проекте я использовал плагин RE:Flex, он позволяет искажать изображение по маске, получается в тысячи раз удобнее, чем проприетарные Distort эффекты.
А на youtube есть туториал с созданием искривленной композиции из 3D слоев

Проект в комментариях
Поддержать на boosty
Please open Telegram to view this post
VIEW IN TELEGRAM
3🔥4610🙏6💯3
This media is not supported in your browser
VIEW IN TELEGRAM
Наверняка вы встречали профили Mat Voyce, Pixrate, которые полностью посвещены анимации типографики — в них можно встретить работы с буквами, боковые части которых покрашены в несколько цветов (в основном это делается для создания теней)

Я задался вопросом как этого добиться в After Effects 📱, ведь эффектор side-color позволяет только перекрасить боковины 3D объектов полностью и в один цвет

Вариант 1: создать цветные источники света, чекайте туториал

Вариант 2: меня осенило, что можно просто добавить stroke и обрезать trim path, в своем примере я продублировал такую обводку 3 раза и привязал к одному offset

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

Поддержать на boosty | 🖤Reels
Please open Telegram to view this post
VIEW IN TELEGRAM
6🔥5510🙏7💯2