Реалізація Lottie-анімацій на сайті

Реалізація Lottie-анімацій на сайті

Lottie — формат JSON для векторних анімацій, експортованих з Adobe After Effects через плагін Bodymovin. Анімації відтворюються через JavaScript або нативні рендереди, зберігаючи якість на будь-якому DPI. Основне застосування — іконки, ілюстрації, лоадери, пусті стани (empty states).

Встановлення

# Легкий плеєр — лише SVG-рендерер, ~60 КБ gzip
npm install @lottiefiles/dotlottie-react

# Альтернатива — lottie-react (повний рендерер, ~180 КБ gzip)
npm install lottie-react

DotLottie — новіший формат (.lottie, бінарний zip), рекомендується для нових проектів: у 10 разів легший за JSON еквівалент.

Базовий компонент

// components/LottieAnimation.tsx
import { DotLottieReact } from '@lottiefiles/dotlottie-react'

interface LottieAnimationProps {
  src: string           // URL або шлях до .lottie/.json
  loop?: boolean
  autoplay?: boolean
  className?: string
  onComplete?: () => void
}

export function LottieAnimation({
  src,
  loop = true,
  autoplay = true,
  className,
  onComplete,
}: LottieAnimationProps) {
  return (
    <DotLottieReact
      src={src}
      loop={loop}
      autoplay={autoplay}
      className={className}
      onComplete={onComplete}
    />
  )
}

Керування відтворенням

// components/ControlledLottie.tsx
import { useRef, useState } from 'react'
import { DotLottieReact, DotLottie } from '@lottiefiles/dotlottie-react'

export function ControlledLottie({ src }: { src: string }) {
  const [dotLottie, setDotLottie] = useState<DotLottie | null>(null)

  const play = () => dotLottie?.play()
  const pause = () => dotLottie?.pause()
  const stop = () => dotLottie?.stop()
  const setSpeed = (speed: number) => dotLottie?.setSpeed(speed)
  const seekTo = (frame: number) => dotLottie?.setFrame(frame)

  return (
    <div>
      <DotLottieReact
        src={src}
        loop={false}
        autoplay={false}
        dotLottieRefCallback={setDotLottie}
      />
      <div className="flex gap-2 mt-4">
        <button onClick={play}>Грати</button>
        <button onClick={pause}>Пауза</button>
        <button onClick={stop}>Стоп</button>
        <button onClick={() => setSpeed(2)}>2x</button>
      </div>
    </div>
  )
}

Анімація при наведенні (інтерактивна іконка)

// components/AnimatedIcon.tsx
import { useRef, useState } from 'react'
import { DotLottieReact, DotLottie } from '@lottiefiles/dotlottie-react'

interface AnimatedIconProps {
  src: string
  size?: number
  hoverToPlay?: boolean
}

export function AnimatedIcon({ src, size = 32, hoverToPlay = true }: AnimatedIconProps) {
  const [dotLottie, setDotLottie] = useState<DotLottie | null>(null)

  const handleMouseEnter = () => {
    if (hoverToPlay && dotLottie) {
      dotLottie.stop()
      dotLottie.play()
    }
  }

  return (
    <div
      onMouseEnter={handleMouseEnter}
      style={{ width: size, height: size }}
      className="cursor-pointer"
    >
      <DotLottieReact
        src={src}
        loop={false}
        autoplay={false}
        dotLottieRefCallback={setDotLottie}
      />
    </div>
  )
}

Лоадер на Lottie

// components/LottieLoader.tsx
import { DotLottieReact } from '@lottiefiles/dotlottie-react'

export function PageLoader() {
  return (
    <div className="fixed inset-0 flex items-center justify-center bg-white z-50">
      <DotLottieReact
        src="/animations/loader.lottie"
        loop
        autoplay
        style={{ width: 120, height: 120 }}
      />
    </div>
  )
}

// Використання з Suspense/завантаженням даних
export function DataLoader({ isLoading }: { isLoading: boolean }) {
  if (!isLoading) return null
  return (
    <div className="flex justify-center py-12">
      <DotLottieReact
        src="/animations/spinner.lottie"
        loop
        autoplay
        style={{ width: 64, height: 64 }}
      />
    </div>
  )
}

Оптимізація завантаження

Lottie-файли можна попередньо завантажити та кешувати:

// lib/lottie-cache.ts
const cache = new Map<string, object>()

export async function preloadLottie(src: string): Promise<void> {
  if (cache.has(src)) return
  const res = await fetch(src)
  const data = await res.json()
  cache.set(src, data)
}

export function getCachedLottie(src: string): object | undefined {
  return cache.get(src)
}

Для JSON-формату через lottie-react можна імпортувати анімацію безпосередньо — тоді bundler включить її у chunk:

import Lottie from 'lottie-react'
import successAnimation from '@/animations/success.json'

export function SuccessAnimation() {
  return (
    <Lottie
      animationData={successAnimation}
      loop={false}
      style={{ width: 200, height: 200 }}
    />
  )
}

Для .lottie-формату використовуйте CDN або папку /public — не імпортуйте безпосередньо, бінарний файл не обробляється стандартними bundler-лоадерами без налаштування.

Типові терміни

Інтеграція готових анімацій з LottieFiles.com — 2–4 години. Повна обвязка з кешуванням, керуванням відтворенням та адаптивним розміром — 1 робочий день.