Туториал по созданию анимации с помощью 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).

encoded-expressions

Содержание

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

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

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

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

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

results matching ""

    No results matching ""