Особенности при работе с 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 кадров. Хотя может казаться, что этого недостаточно, попробуйте и убедитесь.






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


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


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


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


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




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

