Туториал по созданию анимации с помощью After Effects, Bodymovin и Lottie

Данный туториал поможет сэкономить время при первом знакомстве с After Effects, Bodymovin и Lottie.

Bodymovin - это плагин для After Effects (далее - AE), который экспортирует все анимации в json.

Lottie - это движок от Airbnb, который позволяет проигрывать анимации на основе json, созданного с помощью Bodymovin. Кроме веб-плеера есть также плееры для React-native, ios и android.

Примеры с Codepen, чтобы было понятно, о чем речь.

Установка

Инструкция по установке Bodymovin.

Инструкция по установке веб-версии Lottie.

Общая схема работы и подводные камни

Общая схема такая:

1. подготовить SVG в Illustrator
2. импортировать в AE
3. заанимировать там же
4. экспортировать в json через Bodymovin
5. воспроизвести на сайте с помощью Lottie

Очень многое зависит от этапов 1 и 3. Список ограничений для этих этапов довольно большой https://docs.google.com/document/d/1sY1O3xICO91N6jQ20ulU_AKW-JLXNOha2uN549w7t9A/edit

На этапе анимирования и экспорта в json получившийся json может содержать encoded expressions, из-за которых ничего не заработает (issue). По этой причине Animation Composer не совместим с Bodymovin (генерирует "плохой" json).

Содержание

1. Описание кейса и план работ
2. Подготовка в Illustrator
3. Импорт и настройка композиции в After Effects
4. Создание анимаций в After Effects
5. Экспорт анимаций с помощью Bodymovin
6. Работа с Lottie

Полезные ссылки

Официальная документация.

Lottie, практики по работе и подготовке анимаций.

Видео: Как создать SVG анимацию без навыков кодинга. After Effects + Bodymovin (Lottie).