Несколько слов о Webflow
Webflow - это веб-инструмент перетаскивания для быстрого создания адаптивных веб-сайтов. Я обнаружил это, когда работал в Bannerman. Это действительно просто в использовании, и это хороший способ улучшить свои навыки интеграции. Вы можете (почти) делать все, что вам нужно, прямо из коробки!
Несколько слов о Лотти
С сайта Lottie:
Lottie - это мобильная библиотека для Android и iOS, которая анализирует анимацию Adobe After Effects, экспортированную как json с помощью Bodymovin, и отображает их на мобильных устройствах и в Интернете!
Короче говоря, цель состоит в том, чтобы:
- Создайте анимацию с Adobe After Effects
- Экспортируйте его как JSON с помощью плагина Bodymovin.
- Запустите его с помощью проигрывателя 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>
- Нажмите Сохранить и опубликовать.
Пример: https://www.joliefamily.fr/
Я надеюсь, что эта статья поможет вам в вашем творчестве, и не стесняйтесь делиться своими работами в разделе комментариев.
Клэр Паолетти
Дизайнер продуктов в joliefamily
Следите за мной в LinkedIn, Dribbble и Twitter