Bodymovin after effects не работает

Создание анимированных стикеров

Telegram поддерживает анимированные стикеры начиная с версии 5.9. Любой пользователь может создать и управлять своим набором анимированных стикеров.

Telegram использует Lottie — свободный формат для создания анимаций. Ознакомиться с документацией и описанием формата можно тут.

Чтобы создать свой набор, вам понадобится:

• Приложение Adobe After Effects
• Любой графический редактор, который позволяет экспортировать векторные объекты в Adobe After Effects
• Плагин Bodymovin-TG — форк Bodymovin для Adobe After Effects, который позволит экспортировать анимацию в .TGS — специальный формат для Telegram.

Технические требования

• Стикер/холст должен быть размером 512х512 пикселей
• Изображение на стикере не должно выходить за края холста
• Анимация должна длиться не дольше 3 секунд
• Анимация должна быть зацикленной
• Стикер должен весить не более 64 кб
• У всех стикеров в наборе должен быть одинаковый FPS (30 или 60)
• В анимации нельзя использовать выражения (Expressions) и эффекты (Effects). В частности: Masks, Mattes, Layer Effects, Images, Solids, Texts, 3D Layers, Merge Paths, Star Shapes, Gradient Strokes, Repeaters, Time Stretching, Time Remapping, Auto-Oriented Layers. Использование этих инструментов не позволит вам сохранить стикер в нужном формате .TGS.

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

Загрузка стикеров

Как только ваши стикеры будут готовы, отправьте боту @stickers команду /newanimated , затем отправляйте ему файлы в формате .TGS.

Ещё вашему набору можно добавить иконку. Она должна быть 100х100 пикселей, с зацикленной анимацией длиной не более 3 секунд.

Установка плагина Bodymovin-TG

1. Закройте After Effects, если он открыт
2. Установите программу ZXP Installer
3. Скачайте последнюю версию bodymovin-TG (bodymovin-tg.zxp)
4. Откройте ZXP Installer и перетащите туда расширение bodymovin-tg
5. В After Effects перейдите в меню Правка (Edit) >Настройки (Preferences) >Сценарии и выражения (Scripting & Expressions) и установите флажок «Разрешить сценариям выполнять запись файлов и осуществлять доступ к сети» (Allow Scripts to Write Files and Access Network).

1. В меню Window > Extensions вы увидите Bodymovin for Telegram Stickers. Готово!

Сайт про Telegram на русском (неофициальный).

Здесь собраны приложения на базе MTProto, переведена некоторая документация с официального сайта, а также работает Webogram.

Источник

Bodymovin not rendering gradients correct #1495

Comments

Avagart commented Feb 10, 2019

Hi I have a problem with bodymovin.

I created an animation in After Effects using gradients with color and transparency.
But when I export it, the .json and the demo file just show them black and white and without transparency.

Thanks for your help

The text was updated successfully, but these errors were encountered:

bodymovin commented Feb 10, 2019

Hi, have you saved the project before exporting?

Avagart commented Feb 10, 2019

Yes I did. I also set the language on english. didn’t fixed anything..

bodymovin commented Feb 10, 2019

can you share the .aep?

Avagart commented Feb 10, 2019

bodymovin commented Feb 10, 2019

what’s the layer and gradient that isn’t working?

Avagart commented Feb 10, 2019

every gradient isn’t working. they’re all black and white after exporting

bodymovin commented Feb 10, 2019

I just tried it and it seems to work fine.
What language is your OS?

Avagart commented Feb 10, 2019

bodymovin commented Feb 10, 2019

it might be related to that.
can you try on layer «Radar» > «Contents» > «Verlaufsfüllung 1» rename it to «GradientRadar» to see if it fixes that one?

Avagart commented Feb 10, 2019

still no difference. looks still like this:

bodymovin commented Feb 10, 2019

render.zip
this is how I see it

Avagart commented Feb 10, 2019

can you send me a demo file too?

Avagart commented Feb 10, 2019

your .json seems ok.
so what can I do?

Avagart commented Feb 10, 2019

Any Idea what I can do to solve the problem?

bodymovin commented Feb 10, 2019

there are some issues addressing this problem, perhaps they can help.

VeiZhang commented Feb 25, 2019

@Avagart Is the gradients solved? It also happend in my project.

VeiZhang commented Feb 25, 2019

@Avagart #1201 is good job! You can try it

nomisum commented Jan 27, 2020

@bodymovin i had the same problem (german AE) and renaming to GradientRadar fixed it for me. Thanks a lot.

loewin1 commented Apr 13, 2020

Hey @nomisum which object directly did you change? 🙃

d-korolkov commented Apr 22, 2020

The solution is to rename all gradients «Gradients Fill 1» into Gradient Fill_1, Gradient Fill_2,Gradient Fill_3. AND ALSO what had closed all still remaining problems after that is to rename all sublayerd Groups from Group 1, Group 2, Group 3 where gradients are presented to Group_1, Group_2, Group_3. This closed my problems.

Wifesteal3r commented Apr 24, 2020

@d-korolkov Thanks a lot, it solved my problem.

loewin1 commented Apr 24, 2020

so unfortunately the renaming didn’t work from my side, but it looks like for me it’s working to simply change the language of AE to English. I’m working on a German Macbook.

You can’t perform that action at this time.

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.

Источник

How to install Bodymovin

Install and use the Bodymovin extension to export After Effects compositions as JSON files.

Bodymovin is a free extension that lets you export After Effects compositions as JSON files to embed in websites and add to apps. Let’s take a look at how to install the Bodymovin extension.

We’ll do this in 4 steps:

1. Install the Bodymovin extension

Head to Adobe Exchange and install the free Bodymovin extension.

Note: If you have multiple creative cloud subscriptions, make sure you’re logged into the right one before you add the extension so you can easily find it in the next step.

2. Verify After Effects preferences

Open After Effects and look for Bodymovin, listed under Window > Extensions.В

If Bodymovin isn’t there, try quitting and restarting After Effects.В

To make sure your file permissions are set up properly, click After Effects > Preferences > Scripting & Expressions (Edit > Preferences > Scripting & Expressions on Windows).

Look for Allow Script to Write Files and Access Network and make sure it’s checked.В

3. Render an animation

Now we’ll export a composition using Bodymovin.В

Open your animation in After Effects and to export it choose Window > Extensions > Bodymovin. Select your animation and any other compositions you want to render.В

Note: If you have any rasterized images in your composition, make sure you Enable compression in the Settings menu.В

Check the destination folder and while you’re there, name the JSON file you’re about to export, hit Save, and click Render.

Once that renders, you should now have a JSON file in the destination folder. And now we’ll place the animation on the site.В

4. Place the animation in a site

We’ll use Webflow for this step, but the concept is the same hand coding or using another platform.В

From the Assets panel on the left, drag the animation into your layout.В

That’s it! When you publish, export, or preview, your animation should play automatically.В

If you haven’t already, check out our full After Effects & Lottie in Webflow course.В

See Airbnb’s Lottie site for a list of their currently supported After Effects features.

Источник

Анимация в мобильных приложениях: тестируем Lottie

О библиотеке LottieFiles многие знают, но пробовать на практике не спешат. Статей на эту тему мало, поэтому я решила поделиться своим опытом создания анимации для мобильных приложений с помощью Lottie.

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

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

1. микровзаимодействия — визуальные отклики на действия пользователя, анимация конкретных элементов интерфейса на экране, например, кнопки или иконки;
2. независимую графическую анимацию в пределах экрана, например, анимированная иллюстрация в онбординге или сплеш-скрине;
3. переходы — анимация, связывающая между собой два экрана.

Давайте проясним, для каких типов взаимодействия подходит Lottie.

Разбираемся в нюансах

LottieFiles это библиотека для iOS, Android, Web и Windows. В этой статье расскажу про особенности только для iOS и Android, так как специализируюсь на мобильных интерфейсах.

Маленький ликбез — библиотека состоит из файлов json, в которых закодирована анимация из Adobe After Effect. Плагин, который участвует в создании таких файлов, называется Bodymovin. Он имеет JavaScript движок и рендерит анимацию в режиме реального времени.

Вы можете воспользоваться пробной версией Adobe After Effect, если не работали с этой программой раньше. За неделю использования успеете протестировать и решить, нужна ли она вам.

Я проанализировала таблицу от Airbnb и выделила функции Adobe After Effect, которые поддерживаются и на iOS, и на Android. При создании анимации их нужно учитывать, чтобы получить на выходе json, который будет корректно отображаться на обеих платформах.

Сводная таблица с поддерживаемыми функциями для iOS и Android

Создаем Lottie-файлы

Дизайнер создает анимацию в Adobe After Effect, учитывая ограничения, затем экспортирует ее в json с помощью плагина Bodymovin. После этого нужно сделать тест файла в превью-сервисах — Bodymovin Player или Lottie Preview.

Продумайте анимацию заранее с учетом слоев. Ее можно создать с нуля в Adobe After Effect, а можно сначала отрисовать исходный файл в Adobe Illustrator или Sketch. Импорт в Adobe After Effect в этом случае могут упростить плагины:

• Overlord (от Adam Plouff) для интеграции Adobe After Effect и Adobe Illustrator — для быстрого перемещения векторных форм между программами без импорта и организации файлов;
• AEUX (от Adam Plouff и Google SUMux) — для интеграции Adobe After Effect и Sketch, аналогичен Overlord. Скоро будет доступен для Figma!

Если возможности приобрести плагины нет, то просто импортируйте файл Adobe Illustrator как Composition в Adobe After Effect. До начала работы создайте Shapes из импортированных слоев. Если этого не сделать, то при экспорте json вы потеряете визуальную часть анимации из-за привязки к файлу Adobe Illustrator.

Создание Shapes на основе векторных слоев файла Adobe Illustrator

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

Анимация в онбординге (источник изображений — Flaticon)

Анимация кнопки и анимация для перехода между двумя экранами

Подключаем библиотеку

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

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

Подключение Lottie на iOS

Что новенького

Недавно Maxime Robinet совместно с Psycle Research запустили эксперимент Figma(love)Lottie, в котором попробовали использовать API Figma для демонстрации json на макетах.

Чтобы воспользоваться сервисом, проведите предварительные манипуляции с макетом в Figma. Разместите на нем группу слоев: контейнер для отображения анимации, параметры анимации в текстовых блоках (скорость и цикличность воспроизведения). Подробная инструкция тут.

Для демонстрации понадобятся json, персональный токен для доступа (можно получить в настройках аккаунта) и ссылка на макет экрана в Figma. Нужный мокап устройства добавится автоматически под разрешение макета. В итоге у вас получится ссылка, которой можно поделиться. Она будет работать около двух месяцев.

Figma(love)Lottie поможет вам демонстрировать json непосредственно в интерфейсе и производить настройку параметров анимации без помощи разработчика. Lottie Preview и Bodymovin Player лишены этих возможностей.

На практике?

Lottie может ускорить процесс разработки приложения. Время, затраченное на анимацию в проекте, контролируется дизайнером. Он создает, тестирует, настраивает анимацию и передает разработчикам. Функциональные спецификации здесь не требуются. Однако, по разным причинам, не для каждого мобильного приложения уместно подключать LottieFiles. Также команды разработки часто отказываются от этой библиотеки ввиду налаженных внутренних процессов, выходить за рамки которых обычно затруднительно. Хотелось бы попробовать LottieFiles в реальном проекте.

Тут можно скачать созданные мной json-ы и посмотреть их в Lottie Preview.

Само приложение Lottie Preview — iOS и Android

Источник