Компонент lottie-react

lottie-react представляет собой React-обёртку над движком Lottie Web, предназначенную для воспроизведения анимаций формата Lottie внутри React-приложений. Архитектура библиотеки построена вокруг декларативного управления анимацией через props и интеграции с жизненным циклом React-компонентов, что позволяет отказаться от прямого взаимодействия с imperative API lottie-web.

Lottie-экосистема базируется на формате JSON-анимаций, экспортируемых из After Effects через плагин Bodymovin, который поддерживается платформой LottieFiles. Этот JSON описывает ключевые кадры, слои, маски и эффекты в виде структурированных данных, которые затем интерпретируются рантаймом.

В классическом сценарии lottie-web требует ручного создания контейнера, вызова loadAnimation, управления экземпляром и очистки ресурсов. В React-экосистеме это приводит к проблемам синхронизации с виртуальным DOM. lottie-react решает эту задачу через компонентную абстракцию.

Ключевые принципы:

  • декларативная инициализация анимации через JSX
  • автоматическое управление жизненным циклом
  • минимизация прямого DOM-доступа
  • синхронизация состояния React и состояния анимации

Установка и подключение

Библиотека устанавливается стандартным способом через npm или yarn:

npm install lottie-react

или

yarn add lottie-react

Внутри проекта требуется наличие JSON-анимации, например:

import animationData from "./animation.json";

Базовая интеграция компонента

Основная точка входа — компонент Lottie.

import Lottie from "lottie-react";
import animationData from "./animation.json";

export default function Example() {
  return (
    <Lottie animationData={animationData} />
  );
}

В этом режиме библиотека:

  • создаёт контейнер для canvas/SVG рендеринга
  • инициализирует lottie-web
  • запускает анимацию с дефолтными параметрами

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

Компонент поддерживает набор параметров, определяющих поведение анимации.

autoplay и loop

<Lottie
  animationData={animationData}
  loop={true}
  autoplay={true}
/>
  • autoplay — автоматический запуск при монтировании
  • loop — зацикливание анимации

Внутри lottie-web это соответствует управлению play() и loop флагом инстанса анимации.

style и размеры контейнера

<Lottie
  animationData={animationData}
  style={{ width: 300, height: 300 }}
/>

Рендеринг Lottie зависит от размеров контейнера, так как масштабирование происходит относительно bounding box.

Управление через ref API

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

import { useRef } from "react";
import Lottie from "lottie-react";

export default function Controller() {
  const lottieRef = useRef();

  return (
    <>
      <Lottie
        lottieRef={lottieRef}
        animationData={animationData}
      />
      <button onCl ick={() => lottieRef.current.play()}>
        Play
      </button>
      <button onCl ick={() => lottieRef.current.pause()}>
        Pause
      </button>
    </>
  );
}

Экземпляр предоставляет методы:

  • play()
  • pause()
  • stop()
  • setSpeed(value)
  • goToAndPlay(frame)
  • goToAndStop(frame)

Управление скоростью анимации

lottieRef.current.setSpeed(2);

Изменение скорости влияет на интерполяцию временной шкалы без изменения ключевых кадров.

События жизненного цикла анимации

Хотя lottie-react абстрагирует события, они доступны через инстанс lottie-web.

Основные события:

  • complete — завершение цикла
  • loopComplete — завершение одного цикла при loop
  • enterFrame — изменение текущего кадра
  • DOMLoaded — загрузка DOM структуры анимации

Оптимизация производительности

При работе с большим количеством Lottie-анимаций ключевым становится контроль ресурсов.

Lazy mounting

Анимации не должны инициализироваться до появления в viewport:

{isVisible && (
  <Lottie animationData={animationData} />
)}

Отключение autoplay

<Lottie
  animationData={animationData}
  autoplay={false}
/>

Инициализация без запуска снижает нагрузку при массовом рендеринге.

Работа с TypeScript

Типизация в lottie-react позволяет безопасно работать с ref и props.

import Lottie from "lottie-react";
import type { LottieRefCurrentProps } from "lottie-react";

const lottieRef = useRef<LottieRefCurrentProps>(null);

Это обеспечивает контроль над методами инстанса и предотвращает вызовы undefined при SSR или раннем доступе.

Интеграция с Next.js и SSR

При использовании SSR важно учитывать отсутствие DOM на этапе серверного рендеринга.

Рекомендуемая стратегия:

import dynamic from "next/dynamic";

const Lottie = dynamic(() => import("lottie-react"), {
  ssr: false,
});

Причина:

  • lottie-web требует window
  • Canvas/SVG недоступны на сервере
  • инициализация должна происходить только в браузере

Работа с JSON-анимациями

Lottie JSON содержит:

  • слои композиции
  • ключевые кадры
  • easing-кривые
  • маски и эффекты

Структура напрямую влияет на производительность. Особенно критичны:

  • количество слоёв
  • сложные path-анимации
  • частота ключевых кадров

Динамическая замена анимаций

Компонент поддерживает смену JSON без полного размонтирования:

<Lottie animationData={currentAnimation} />

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

Контроль за размонтированием

При удалении компонента автоматически вызывается destroy() внутри lottie-web, освобождая:

  • canvas контекст
  • requestAnimationFrame циклы
  • event listeners

Это предотвращает утечки памяти при SPA-навигации.

Использование нескольких анимаций на странице

При одновременном рендеринге нескольких Lottie-компонентов важно учитывать:

  • общий FPS ограничения браузера
  • нагрузку на main thread
  • конкуренцию за requestAnimationFrame

Практика оптимизации:

  • снижение FPS через setSpeed
  • отключение вне viewport
  • использование SVG вместо canvas при лёгких анимациях

Режимы рендеринга

lottie-web поддерживает разные стратегии рендеринга:

  • SVG — высокая точность, лучше для UI-анимаций
  • Canvas — выше производительность при сложных сценах
  • HTML — редкий режим, используется для специфических кейсов

lottie-react позволяет передавать renderer через props, проксируя конфигурацию в движок.

Ограничения подхода

Несмотря на удобство интеграции, существуют ограничения:

  • невозможность сложной интерактивности без ручного управления
  • зависимость от качества экспортированного JSON
  • высокая стоимость сложных векторных сцен
  • ограниченная поддержка нестандартных AE-эффектов

Взаимодействие с системой состояний React

Lottie-инстанс не является реактивным объектом. Изменение props приводит к пересозданию или обновлению, но не к частичной мутации сцены.

Это накладывает архитектурные ограничения:

  • нельзя напрямую изменять слои через state diff
  • любые изменения требуют пересборки или API вызова
  • предпочтительна модель “state → новая анимация”

Управление кадрами и временной шкалой

Ключевой механизм — контроль timeline:

lottieRef.current.goToAndStop(120, true);

Это позволяет:

  • синхронизировать анимацию с UI состоянием
  • реализовать скролл-анимации
  • управлять интерактивными переходами

Интеграция со скроллом

Lottie часто используется для scroll-driven анимаций:

  • привязка текущего scroll position к frame
  • вычисление прогресса анимации
  • линейная интерполяция времени
const frame = progress * totalFrames;
lottieRef.current.goToAndStop(frame, true);

Поведение при ресайзе

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

Кэширование и повторное использование

JSON-анимации можно кэшировать:

  • в памяти приложения
  • через CDN
  • через service worker

Это снижает время загрузки и уменьшает парсинг JSON при повторных рендерах.

Оглавление