05.09.2025 12:12
zloylemon 0 1000 Источник

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

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

В статье речь идет именно о сложных анимациях. Более простые варианты можно делать без использования Adobe After Effects и Lottie.

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

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

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

Пример анимации рекламного баннера.
Пример анимации рекламного баннера.

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

Сейчас, когда Adobe перестал продлевать лицензии, стало сложнее. Можно воспользоваться альтернативами — о них расскажу в следующей статье. Следите за блогом!

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

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

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

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

Lottie конвертирует анимацию After Effects в JSON-данные с помощью плагина Bodymovin. Получившийся JSON-файл можно загрузить и воспроизвести в браузере благодаря библиотеке Lottie.js.

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

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

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

Рекомендую использовать Overload и при экспорте из Adobe Illustrator. Это позволяет быстро перемещать векторные формы между программами без импорта и организации файлов.

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

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

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

Разбиваем изображение на слои.
Разбиваем изображение на слои.

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

Импорт файла в After Effects.
Импорт файла в After Effects.

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

Конвертация Ai-файла в Shapes.
Конвертация Ai-файла в Shapes.

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

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

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

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

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

Совет. Не забывайте про привязку к родительским слоям. Это позволит не плодить PreCompose и упростит работу.

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

Экспорт Lottie в Bodymovin

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

Расположение плагинов в АЕ.
Расположение плагинов в АЕ.
Экспорт Lottie с помощью плагина Bodymovin.
Экспорт Lottie с помощью плагина Bodymovin.

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

Экспорт Lottie в LottieFiles

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

Экспорт LottieFiles.
Экспорт LottieFiles.

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

Проверка на сайте и экспорт JSON.
Проверка на сайте и экспорт 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 и устанавливает ее в режим непрерывного повторения и воспроизводит сразу после загрузки страницы.

Бесплатный базовый курс по JS

Рассказываем, как работать с переменными, типами данных, функциями и многом другом!

Начать изучение →

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

Одна из лучших особенностей 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 вы можете свободно экспериментировать с интерактивной и сложной анимацией, которая масштабируется, адаптивна и легко интегрируется в любой веб-проект. Удачи в создании творческих проектов!

Комментарии (0)