От статики к динамике: как создавать сложные 2D-анимации в веб-разработке

Веб-анимация вносит большой вклад в улучшение пользовательского опыта. Простые анимации из меняющихся картинок создать несложно. Но иногда возникают более интересные задачи — например, «оживление» персонажа.

Меня зовут Маша, я дизайнер в Selectel. В этой статье расскажу, как создать сложную анимацию с использованием Lottie и After Effects.

Как и зачем использовать 2D-анимацию

В вебе анимацию удобно использовать, чтобы создавать «живые» иконки, кнопки, стикеры в Telegram, рекламные HTML-баннеры, интерактивные элементы пользовательского интерфейса и многое другое. Все это позволяет юзеру лучше ориентироваться в контенте и вызывает у него положительные эмоции.

Мы в Selectel предпочитаем работать с After Effects (AE), поскольку это одна из самых функциональных и универсальных программ в мире моушн-дизайна. Другими словами — это база. 

Знакомимся с Lottie

Lottie — это инструмент для создания анимаций с открытым исходным кодом, разработанный Airbnb. Позволяет веб-разработчикам использовать анимацию, созданную в Adobe After Effects. 

Экспорт осуществляется в виде JSON-файлов. Эти файлы можно визуализировать в режиме реального времени в браузере с помощью проигрывателя Lottie — он представляет собой JavaScript-библиотеку.

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

Начало работы

Для экспорта анимации из Adobe After Effects вам потребуется установить плагин Bodymovin от Adobe или LottieFiles от Airbnb. 

• Bodymovin.Вы можете скачать его либо с официального сайта Adobe Exchange, либо с GitHub. 

• LottieFiles. Скачать можно бесплатно с официального сайта Lottie. 

Исходные файлы для будущей анимации можно отрисовать в Adobe Illustrator, Sketch или Figma — кому как удобно. Однако для экспорта иллюстраций из Sketch или Figma нужен специальный плагин для After Effects. Например, Overlord от Adam Plouff или AEUX от Adam Plouff и Google SUMux. Подробнее о работе этих плагинов расскажем в другой статье. 

Создание анимации в After Effects

Производим экспорт файлов для анимации. Вот что можно сделать, если вы работаете в Adobe Illustrator и у вас нет возможности использовать плагин Overload.

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

2. Импортируйте файл Adobe Illustrator как Composition в Adobe After Effects.

3. Переведите все импортированные слои в Shapes. Если этого не сделать, при экспорте JSON вы потеряете визуальную часть анимации из-за привязки к файлу Adobe Illustrator.

Три важных пункта, которые нужно учитывать при создании анимации для Lottie.

• Избегайте растровой графики. Для масштабируемости используйте как можно больше векторной графики.

• Ограничьте эффекты. Не все функции After Effects поддерживаются Lottie. Поэтому избегайте сложных эффектов: 3D-слоев, выражений или определенных фильтры.

• Проверьте свою анимацию. Перед экспортом убедитесь, что ваша анимация воспроизводится плавно и оптимизирована для веб-производительности.

Обязательно изучите таблицу от Airbnb — там представлены поддерживаемые функции JSON для определенной платформы.

Когда работа с анимацией закончена, приступаем к экспорту. 

Экспорт Lottie в Bodymovin

Плагин расположен во вкладке Window → Extensions → Bodymovin. На панели Bodymovin выберите композицию, которую хотите экспортировать. Укажите папку, в которой вы хотите сохранить JSON-файл. Нажмите кнопку Render.

Для проверки корректности анимации можно использовать Bodymovin Player или Preview Lottie animation. 

Экспорт Lottie в LottieFiles

Процесс похожий, но более муторный. Чтобы воспользоваться плагином, авторизуйтесь на сайте. Далее в After Effects перейдите в раздел Window → Extensions → LottieFiles. Поставьте галочку напротив композиции, укажите путь сохранения файла и нажмите Render. Файл экспортировался в формат Lottie.

После этого откроется предпросмотр — убедитесь, что все работает исправно. Нажмите кнопку Save to workspace, выберите рабочее пространство и кликните по Save. Далее перейдите на сайт и сохраните файл в формате JSON.

Интеграция анимации на веб-сайт

Чтобы реализовать анимацию Lottie на сайте, вам потребуется библиотека Lottie.js . Эта JavaScript-библиотека позволяет визуализировать и управлять анимацией в режиме реального времени.

Шаг 1: Подключение Lottie библиотеки

Вы можете загрузить библиотеку с GitHub Lottie или использовать ссылку CDN в вашем HTML-файле:

      <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.6/lottie.min.js"></script>

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

Создайте div или другой элемент-контейнер, в котором вы хотите отобразить анимацию.

      <div id="lottie-container"></div>

Шаг 3: Загрузка JSON-файла с анимацией

Используйте JavaScript для загрузки JSON-файла в контейнер. Вот базовая реализация: 

      var animation = lottie.loadAnimation({
  container: document.getElementById('lottie-container'), // контейнер для анимации
  renderer: 'svg', // тип рендерера (может быть 'svg', 'canvas' или 'html')
  loop: true, // зацикливание анимации
  autoplay: true, // автоматический запуск анимации
  path: 'path/to/animation.json' // путь к вашему JSON-файлу с анимацией
});

Этот код инициализирует анимацию Lottie и устанавливает ее в режим непрерывного повторения и воспроизводит сразу после загрузки страницы.

Настройки анимации

Одна из лучших особенностей Lottie — гибкость. Всего несколько строк JavaScript-кода позволяют управлять воспроизведением анимации и настраивать ее внешний вид.

Управление воспроизведением

Можно управлять запуском, остановкой или приостановкой анимации в зависимости от действий пользователя. Например, вы можете запускать анимацию при наведении курсора на кнопку:

      var animation = lottie.loadAnimation({
  container: document.getElementById('lottie-container'),
  renderer: 'svg',
  loop: false,
  autoplay: false,
  path: 'path/to/animation.json'
});

// Воспроизведение по ховеру
document.getElementById('lottie-container').addEventListener('mouseenter', function() {
  animation.play();
});

// Приостановка анимации при отведении курсора
document.getElementById('lottie-container').addEventListener('mouseleave', function() {
  animation.pause();
});

Синхронизация с прокруткой

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

      window.addEventListener('scroll', function() {
  var scrollPercentage = (window.scrollY / (document.body.scrollHeight - window.innerHeight));
  animation.goToAndStop(scrollPercentage * animation.totalFrames, true);
});

Цикл и управление скоростью

Lottie позволяет легко управлять циклом и скоростью анимации. Например, вы можете настроить скорость воспроизведения анимации:

      animation.setSpeed(2); // Установка скорости в 2 раза быстрее
animation.loop = false; // Отключить зацикливание

Подсказка 

animation.play() — запуск анимации

animation.pause() — пауза анимации

animation.stop() — остановка анимации и возврат к начальному состоянию

animation.setSpeed(speed) — установка скорости анимации

Использование Lottie с React

Lottie легко интегрируется в приложения React с помощью компонентов React Lottie. Приведу простой пример.

      
import React, { useEffect, useRef } from 'react';
import lottie from 'lottie-web';

const LottieAnimation = () => {
  const container = useRef(null);

  useEffect(() => {
    lottie.loadAnimation({
      container: container.current,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      path: 'path/to/animation.json'
    });
  }, []);

  return <div ref={container}></div>;
};

export default LottieAnimation;

Этот код настраивает простой компонент React, воспроизводящий анимацию Lottie. Используя хуки useEffect и useRef, вы можете легко управлять жизненным циклом анимации Lottie. Такой подход полезен для создания интерактивных пользовательских интерфейсов в современных веб-приложениях.

На что обратить внимание в работе с Lottie

Lottie — мощный инструмент для веб-анимации. Однако важно следовать передовым практикам, чтобы не снижать производительность и доступность.

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

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

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

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

      
@media (prefers-reduced-motion: reduce) {
  #lottie-container {
    display: none; /* Disable animations for reduced-motion users */
  }
}

Что в итоге

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