Как создать анимацию LottieFiles в After Effects

LottieFiles создала быстрый, масштабируемый, редактируемый тип файлов с пост-рендерингом, и вам легко принять участие и создать анимацию в этом формате. Используя Adobe After Effects и некоторые плагины, вы можете стать частью новейшего ажиотажа в отношении типов файлов: Lottie.

Что такое Лотти?

Lottie, или dotLottie, — это тип файлов, который берет штурмом веб-разработчиков. Возможно, вы создали анимацию для включения в свой дизайн, будь то для социальных сетей, веб-дизайна или дизайна UX и пользовательского интерфейса. И вы, вероятно, сохраняете свои анимации в виде файлов GIF, SVG или PNG. Файл Lottie — это все хорошие части этих типов файлов, но он меньше, быстрее и его легче редактировать после рендеринга.

LottieFiles — это огромная база данных готовых анимаций, сохраненных в форматах Lottie или JSON. Эти анимации отображаются в режиме реального времени, что позволяет быстрее добавлять их в ваши проекты. Нет необходимости ждать загрузки этих файлов; они появятся, как только откроется страница.

Чтобы узнать больше о LottieFiles, посетите наш знакомство с Лотти.

Начиная

Мы собираемся создать Lottie, используя Адобе Афтер Эффекты, но есть и другое программное обеспечение, которое вы можете использовать для создания анимации Lottie. Вы можете использовать Adobe Animate с подключаемым модулем LottieFiles для создания Lottie. Вы также можете преобразовать анимацию формата SVG в Lottie, если вы уже сделали анимацию в этом формате.

Однако After Effects — наш лучший выбор, учитывая, что LottieFiles изначально создавался для использования в After Effects. Давайте начнем.

1. Создайте свою анимацию

Анимационный аспект вашего Lottie такой же, как и для любого другого формата. Мы создали иллюстрацию нашей анимации с помощью Adobe Illustrator. Это сохраняет слои отдельными и готовыми к импорту в After Effects. После того, как ваша иллюстрация будет импортирована, вы можете адаптировать слои вашей композиции для финальной анимации.

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

2. Загрузите плагины

Есть два плагина, которые вы можете использовать для создания файла Lottie: плагин LottieFiles или плагин Bodymovin. Оба доступны для After Effects, но плагин LottieFiles также можно найти в другом программном обеспечении. Каждый из них делает немного разные вещи, но сейчас мы сосредоточимся на плагине LottieFiles.

Чтобы загрузить плагин LottieFiles, перейдите на Страница плагина LottieFiles After Effects. Вы найдете два варианта загрузки.

Вариант справа требует Extension Manager от Анастасий который работает как с Mac, так и с Windows. После загрузки Extension Manager загрузите подключаемый модуль ZXP со страницы LottieFiles.

После загрузки плагина ZXP откройте менеджер расширений Anastasiy, нажмите Постэффекты, выберите плагин LottieFiles из списка и нажмите Установить.

Вернувшись на страницу подключаемого модуля LottieFiles, загрузите также подключаемый модуль Adobe Exchange; откройте приложение Creative Cloud для настольных ПК и установите подключаемый модуль. Вернитесь к своему завершенному анимация в After Effects.

У некоторых людей возникает ошибка разрешения при использовании этих плагинов. Чтобы избежать этой проблемы, перейдите к Постэффекты > Настройки > Скрипты и выражения > Скрипты приложений и поставьте галочку для Разрешить скриптам записывать файлы и получать доступ к сети.

Как только это будет сделано, всплывающее окно для LottieFiles попросит вас войти в систему. Если у вас еще нет учетной записи LottieFiles, сейчас самое время ее создать.

3. Экспортируйте свою лотерею

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

Через несколько секунд ваша анимация появится во всплывающем окне. Анимация будет воспроизводиться в режиме реального времени в цикле. Здесь вы можете сохранить свою анимацию или загрузить ее в библиотеку LottieFiles.

Щелчок Сохранить как предоставит вам два варианта экспорта: Lottie JSON (*.json) или dotLottie (*.lottie). Файл dotLottie представляет собой заархивированный файл, содержащий метаданные, которые нам не нужны для экспорта. Мы пошли с Лотти JSON.

Ваш экспортируемый файл будет текстовым, а не файлом визуальной анимации; так работают файлы JSON. Но что, если вы хотите, чтобы анимация была готова к работе? Давайте посмотрим, как вы можете получить к нему доступ.

Как вы можете использовать свою анимацию Lottie

Чтобы загрузить Lottie в библиотеку LottieFiles, нажмите Загрузить. Это будет отображаться в течение нескольких секунд. Затем нажмите кнопку с изображением земного шара. Откроется веб-сайт LottieFiles, где вы можете отправить свою анимацию Lottie в библиотеку LottieFiles. Назовите свой файл и нажмите Передавать.

После того, как ваша анимация будет одобрена в библиотеке LottieFiles, вы можете использовать плагин LottieFiles в таких программах, как Adobe XD, Figma или Sketch, чтобы добавить анимацию в свой дизайн.

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

В окне Handoff вы можете загрузить свою анимацию в виде Файл JSON для реализации в веб-разработке и дизайн, или вы можете преобразовать его в GIF для более обычного использования. Вы также можете встроить свою анимацию с помощью HTML-кода для встраивания, а также есть варианты для iOS и Android, поэтому вы можете добавить анимацию в свой веб-дизайн.

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

Скачав приложение LottieFiles на свой телефон, вы сможете отсканировать QR-код анимации, чтобы просмотреть анимацию в приложении. Вы также можете использовать клавиатуру LottieFiles и оставлять свою точкуLottie в качестве комментария к определенным сообщениям.

Создайте лотерею в After Effects

Хотя это все еще может показаться нетрадиционным типом файла, поскольку вы не можете просто загрузить свою анимацию прямо в социальные сети, такие как вы можете с GIF или PNG, Lottie имеет много преимуществ для веб-разработчиков и дизайнеров, которые используют плагины или встраивают коды в свои конструкции.

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

Как создать анимацию движения с помощью Procreate

Создать анимацию движения в Procreate очень просто, и эта статья покажет вам, как это сделать.

Читать далее

Об авторе