Визуализация прокрутки анимированного видео для Интернета с помощью Bodymovin и ScrollMagic JS

Одна из актуальных тем для создания привлекательной витрины продукта на вашем веб-сайте - это использование рендеринга с анимированной прокруткой, который вы, возможно, видели в Pixel и Apple.

В этой статье я опишу процесс, с помощью которого мне удалось преобразовать видео продукта mp4 в прокручиваемую анимированную версию, используемую для встраивания на веб-сайт.

Требуются следующие программы / плагины:

  • Adobe After Effects CC
  • Adobe Media Encoder или аналогичное программное обеспечение, которое может преобразовывать видео в последовательности изображений
  • Плагин Bodymovin (устанавливается через торговую площадку Creative Cloud или загружается с https://github.com/airbnb/lottie-web из папки build / extensions - устанавливается с помощью установщика ZXP.
  • Редактор кода, такой как Visual Studio Code, для написания необходимого javascript

Шаг 1 - Создание последовательности изображений

Преобразуйте видео в последовательность изображений с помощью Adobe Media Encoder. В рабочей области щелкните значок плюса в разделе «Очередь», чтобы добавить видеофайл. Затем в предустановленном браузере найдите «Последовательность изображений» ›PNG или JPEG (соответствующий источник) и перетащите его на видеофайл в очереди, чтобы применить предустановку. Установите путь к выходному файлу в новую папку и, наконец, нажмите зеленую кнопку воспроизведения, чтобы начать процесс кодирования. Этот процесс должен создавать кадровые снимки всего видео.

Шаг 2 - Установите плагин Bodymovin

Установите плагин bodymovin для After Effects. Вы можете установить его через плагины Creative Cloud Marketplace или загрузить и установить напрямую. В этой статье используется версия 5.3.1.

Шаг 3 - Импорт в After Effects

Откройте Adobe After Effects и создайте новый проект. Затем перетащите / импортируйте несколько файлов и все сгенерированные файлы последовательности изображений на панель ресурсов в After Effects (эта панель обычно находится в верхнем левом разделе).

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

Введите настройку, как показано на скриншоте выше. Нажмите ОК, и вы должны увидеть все изображения, упорядоченные по порядку.

Шаг 4 - Экспорт в формате JSON с помощью Bodymovin

Перейдите в Window - Extensions - Bodymovin, чтобы открыть плагин. Выберите текущую композицию, чтобы на ней был показан зеленый кружок.

Для настроек вы хотите включить Glyphs, Assets - Enable Compression (желаемое значение), включить в JSON и экспортировать в стандартном режиме.

Задайте выходной файл назначения, и вы готовы начать рендеринг.

Обратите внимание, если рендеринг завершился неудачно, исправление, которое сработало для меня, заключалось в том, чтобы перейти в раздел «Настройки» - ›Сценарии и выражения -› Сценарии приложений и включить «Разрешить сценариям записывать файлы и получать доступ к сети».

Шаг 5 - Импортируйте скрипты в HTML Head

Чтобы создать анимированный рендер прокрутки на веб-сайте, необходимо несколько библиотек - ScrollMagic и Bodymovin Lottie. Вставьте эти сценарии в заголовок HTML-файла.

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js" integrity="sha256-peenofh8a9TIqKdPKIeQE7mJvuwh+J0To7nslvpj1jI=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.3/lottie.min.js"></script>

Шаг 6 - Создание контейнера для анимации

Анимация будет внедрена на основе идентификатора элемента, созданного в файле HTML. Класс intro здесь просто изменяет контейнер на 100% ширину и 100% высоту. ID элемента lottie - это то, на что будет ссылаться javascript для инициализации файла JSON.

<section class="intro">
  <div id="lottie"></div>
</section>

Шаг 7. Инициализируйте ScrollMagic и Bodymovin

В файле javascript вам нужно инициализировать ScrollMagic и Bodymovin. Есть несколько параметров, которые вы можете настроить, например, время анимации, которое влияет на то, насколько быстро или медленно будут переключаться кадры относительно высоты прокрутки. Кроме того, вы можете добавить другую анимацию к другим элементам DOM с помощью ScrollMagic.

Шаг 8 - Оцените магию свитков

Это результат рендеринга прокрутки. Дальнейшая оптимизация времени анимации и кадров на прокрутку улучшит плавность переключения кадров.

Вышеупомянутую демонстрацию Github можно найти здесь.