Несколько слов о Webflow

Webflow - это веб-инструмент перетаскивания для быстрого создания адаптивных веб-сайтов. Я обнаружил это, когда работал в Bannerman. Это действительно просто в использовании, и это хороший способ улучшить свои навыки интеграции. Вы можете (почти) делать все, что вам нужно, прямо из коробки!

Несколько слов о Лотти

С сайта Lottie:

Lottie - это мобильная библиотека для Android и iOS, которая анализирует анимацию Adobe After Effects, экспортированную как json с помощью Bodymovin, и отображает их на мобильных устройствах и в Интернете!

Короче говоря, цель состоит в том, чтобы:

  1. Создайте анимацию с Adobe After Effects
  2. Экспортируйте его как JSON с помощью плагина Bodymovin.
  3. Запустите его с помощью проигрывателя Lottie Javascript в Webflow

Перед запуском любой реализации вы должны проверить поддерживаемые функции для Bodymovin.

1. Создайте анимацию с помощью Adobe After Effects.

  • В After Effects добавьте плагин Bodymovin
  • Отобразите окно Bodymovin на панели расширений After Effects
  • Выберите композицию, которую вы хотите экспортировать, и целевой файл (который должен быть файлом JSON). Сделайте это.

2. Разместите файл JSON для Webflow.

В моем примере я создал ссылку Dropbox, но вы можете разместить файл где угодно.

  • Поместите файл в папку Dropbox и выберите Создать ссылку Dropbox. Это должно создать ссылку, которая выглядит так:

https: // www.dropbox .com / s / xxx / name.json ? dl = 0

Теперь созданная ссылка на самом деле представляет собой полную веб-страницу; нам нужны только данные JSON.

  • Замените www.dropbox на dl.dropboxusercontent и удалите ненужный параметр ? Dl = 0. Пример :

https: // dl.dropboxusercontent.com /s/xxx/name.json

После открытия ссылки вы должны увидеть необработанный файл JSON без какого-либо форматирования.

3. Запустите его с помощью проигрывателя Lottie Javascript в Webflow.

  • Создайте компонент в Webflow, который будет содержать анимацию, и назначьте ему уникальный селектор. Например, вы можете:
<div id="lotie-animation"></div>
  • Если вы хотите добавить собственный код в Webflow, вы должны включить его в настройки страницы. В нашем случае нам нужны 2 вещи: проигрыватель Lottie Javascript и рендеринг анимации.

Загрузка Javascript Lottie Player

  • В настройках страницы добавьте в тег ‹head› следующий код:
<script>
src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.2/lottie.min.js" type="text/javascript"></script>

Визуализация анимации

  • В настройках страницы добавьте перед тегом ‹body› следующий код:
<script> 
lottie.loadAnimation({
// The unique selector we chose
 container: document.getElementById('lottie-animation'),
// The rendering method
 renderer: 'svg',
// The Dropbox link
path: 'https://dl.dropboxusercontent.com/s/xxx/name.json',
// Others settings
 loop: true,
 autoplay: true,
 });
</script>

Я надеюсь, что эта статья поможет вам в вашем творчестве, и не стесняйтесь делиться своими работами в разделе комментариев.

Клэр Паолетти
Дизайнер продуктов в joliefamily
Следите за мной в LinkedIn, Dribbble и Twitter