Особенности при работе с Bodymovin для стикеров Телеграм

Это было для меня сюрпризом, но стикеры представляют собой довольно большой рынок, который активно растет, в том числе за счет перехода от статичных стикеров к анимированным.

Поэтому сейчас постоянная нехватка аниматоров и иллюстраторов, готовых этим заниматься. И часто их останавливают ограничения плагина Bodymovin из-за которых нельзя использовать привычные плагины, эффекты и инструменты для рига персонажей.

Все ограничения плагина можно уместить в одно предложение “Не используй ничего, кроме вкладки transform шейпов и анимации path”. И все равно есть тонкости и хитрости, упрощающие работу, которые я выработал во время работы над более чем 200-ми стикерами.

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

Скачать последнюю версию плагина для Телеграма:

https://github.com/TelegramMessenger/bodymovin-extension/releases/

Краткое описание запретов:

  • Размер 512x512
  • Длительность до 3-х секунд
  • Никаких масок
  • Никаких эффектов
  • Никаких модификаторов шейпов
  • Никаких экспрешенов
  • Лучше не заходить за границы области, но иногда можно.
  • Градиенты можно использовать, но осторожно, не всегда хорошо работают и непредсказуемо глючат.
  • 30 или 60 FPS
  • Только shape layers, никаких AI и jpeg в проекте
  • Не поддерживаются Puppit Pin Tool, Duik и подобные инструменты для рига (работает Rubber Horse с базовыми настройками, но все это не стабильно)

Стикеры должны мало весить, чтобы быстро грузиться. В этом смысл всех ограничений. Иногда можно использовать rubber horse, но риг нужно перевести в ключи, то есть запечь анимацию, что усложняет изменения и утяжеляет стикер. Некоторые экспрешены тоже можно запечь и с плагином Easy Bake это делать более-менее удобно. Но самый легкий путь это привыкнуть к ограничениям и действовать по правилам.

Полезности и советы:

1. Контролируйте количество точек и ключей.

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

2. Не используйте режимы нажатия в иллюстраторе.

Доставляет проблем и сужающийся stroke. Из-за этого линия в After effect превращается в шейп, а не в обводку. И возникает куча лишних точек, которые тяжело контролировать.

3. Используйте рассинхрон ключей.

Это делает анимацию живее. Все покачивания стебельков, хвосты, руки легче всего делать с помощью сдвига rotation и path по отношению друг к другу.

Сначала поворачиваем руку влево, тут же изгибаем ее по path тоже влево. Повторяем в другую сторону. И сдвигаем на пару кадров, ура, анимация смотрится гораздо живее.

Таким способом сделаны уши, шарф, хвост.

4. Учитывайте наклон иллюстрации.

Если на иллюстрации персонаж наклонен, перед экспортом в AE сделайте его перпендикулярным полу. Так боксы transform будут правильно расположены и scale будет корректно искажать объект.

Слева неправильно расположенный бокс, а справа правильно.

5. Анимируйте от общего к частному.

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

6. Эксперементируйте с таймингом.

Часто для резкого движения хватает 2–3 кадров. Хотя может казаться, что этого недостаточно, попробуйте и убедитесь.

Анимация открытия рта происходит в 3 кадра

7. Используйте null объекты.

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

8. При анимации path можно выделять несколько точек.

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

9. Планируйте персонажа на этапе иллюстрации.

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

10. Alpha Matte в новой версии плагина для Телеграма.

В новой версии плагина появилась поддержка Alpha Matte. Теперь наконец-то можно использовать это как маски и упрощать многие задачи.

11. Используйте размытие движения (smear).

Это называют мультяшный motion blur. Помогает сгладить резкое движение. Их можно делать по-разному. Растягивайте, искажайте, добавляйте экстра кадры. Тут нужно эксперементировать и смотреть, что выглядит гладко и приятно в каждом случае.

Тут добавлены линии по движению палочек. Сами палочки изгибаются.
Если смотреть на один кадр выглядит странно и некрасиво. Но анимацию это делает только лучше.

В будущем я буду дополнять эту статью когда открою для себя что-то новое или вспомню о другой хитрости.

Добавляйтесь в наш телеграм канал. Там мы с Аней, которая рисовала все эти прекрасные иллюстрации, рассказываем о создании стикеров:

https://t.me/onoividno

https://t.me/onoividno
https://t.me/onoividno

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade