Lottie 完全ガイド - After EffectsアニメーションをWebで再生

npm install lottie-web

<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.12.2/lottie.min.js"></script>

npm install @lottiefiles/dotlottie-react

import lottie from 'lottie-web';
 
const animation = lottie.loadAnimation({
  container: document.getElementById('animation'), // DOM要素
  renderer: 'svg',     // 'svg' | 'canvas' | 'html'
  loop: true,          // ループ再生
  autoplay: true,      // 自動再生
  path: 'animation.json'  // JSONファイルのパス
});

const anim = lottie.loadAnimation({...});
 
// 再生制御
anim.play();           // 再生
anim.pause();          // 一時停止
anim.stop();           // 停止（最初のフレームに戻る）
 
// 速度制御
anim.setSpeed(2);      // 2倍速
anim.setSpeed(0.5);    // 0.5倍速
 
// 方向制御
anim.setDirection(1);  // 順方向
anim.setDirection(-1); // 逆方向
 
// フレーム移動
anim.goToAndStop(30, true);  // 30フレーム目で停止
anim.goToAndPlay(0, true);   // 最初から再生
 
// 情報取得
const frames = anim.totalFrames;      // 総フレーム数
const duration = anim.getDuration(false); // 秒単位の長さ
const current = anim.currentFrame;    // 現在のフレーム

// 単一セグメント：フレーム10〜30を再生
anim.playSegments([10, 30], true);
 
// 複数セグメント：順番に再生
anim.playSegments([[0, 15], [30, 45]], false);

const buttonAnim = lottie.loadAnimation({...});
 
// 通常状態: 0-15フレーム
// ホバー状態: 15-30フレーム
// クリック状態: 30-45フレーム
 
button.addEventListener('mouseenter', () => {
  buttonAnim.playSegments([15, 30], true);
});
 
button.addEventListener('mouseleave', () => {
  buttonAnim.playSegments([0, 15], true);
});
 
button.addEventListener('click', () => {
  buttonAnim.playSegments([30, 45], true);
});

const anim = lottie.loadAnimation({
  ...options,
  autoplay: false
});
 
element.addEventListener('mousemove', (e) => {
  const rect = element.getBoundingClientRect();
  const x = e.clientX - rect.left;
  const progress = x / rect.width;
  const frame = progress * anim.totalFrames;
  anim.goToAndStop(frame, true);
});

let isActive = false;
 
button.addEventListener('click', () => {
  if (isActive) {
    anim.setDirection(-1);
  } else {
    anim.setDirection(1);
  }
  anim.play();
  isActive = !isActive;
});

const anim = lottie.loadAnimation({
  ...options,
  autoplay: false
});
 
const container = document.querySelector('.scroll-container');
 
container.addEventListener('scroll', () => {
  const scrollTop = container.scrollTop;
  const scrollHeight = container.scrollHeight - container.clientHeight;
  const progress = scrollTop / scrollHeight;
  const frame = progress * anim.totalFrames;
  anim.goToAndStop(frame, true);
});

let ticking = false;
 
container.addEventListener('scroll', () => {
  if (!ticking) {
    requestAnimationFrame(() => {
      const progress = container.scrollTop / 
        (container.scrollHeight - container.clientHeight);
      const frame = progress * anim.totalFrames;
      anim.goToAndStop(frame, true);
      ticking = false;
    });
    ticking = true;
  }
});

// スクロール位置を0〜1の範囲に正規化
const progress = scrollTop / (scrollHeight - clientHeight);
// 総フレーム数に掛けてフレーム番号を算出
const frame = progress * anim.totalFrames;
anim.goToAndStop(frame, true);

const anim = lottie.loadAnimation({...});
 
// アニメーション完了時
anim.addEventListener('complete', () => {
  console.log('アニメーション完了');
});
 
// 各フレーム描画時
anim.addEventListener('enterFrame', (e) => {
  console.log('現在のフレーム:', e.currentTime);
});
 
// ロード完了時
anim.addEventListener('DOMLoaded', () => {
  console.log('アニメーションがロードされました');
  console.log('総フレーム数:', anim.totalFrames);
});
 
// イベントリスナーの削除
anim.removeEventListener('complete', handler);

// すべてのアニメーションを制御
lottie.play();        // すべて再生
lottie.pause();       // すべて一時停止
lottie.stop();        // すべて停止
lottie.setSpeed(2);   // すべての速度を変更
 
// 特定のアニメーションを名前で制御
lottie.play('myAnimation');
lottie.stop('myAnimation');

const animations = [];
 
containers.forEach((container, index) => {
  const anim = lottie.loadAnimation({
    container,
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: paths[index],
    name: `anim-${index}`
  });
  animations.push(anim);
});
 
// 一括操作
animations.forEach(anim => anim.pause());
 
// 特定のアニメーションを操作
animations[2].play();

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    const anim = animations.find(a => a.wrapper === entry.target);
    if (anim) {
      if (entry.isIntersecting) {
        anim.play();
      } else {
        anim.pause();
      }
    }
  });
}, { threshold: 0.1 });
 
containers.forEach(container => observer.observe(container));

'use client';
 
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
import { useRef } from 'react';
 
export function LottieComponent() {
  const dotLottieRef = useRef(null);
 
  return (
    <DotLottieReact
      src="https://lottie.host/xxx.lottie"
      loop
      autoplay
      dotLottieRefCallback={(dotLottie) => {
        dotLottieRef.current = dotLottie;
      }}
    />
  );
}

'use client';
 
import { DotLottieReact } from '@lottiefiles/dotlottie-react';
import { useRef, useState } from 'react';
 
export function ControlledLottie() {
  const dotLottieRef = useRef(null);
  const [isPlaying, setIsPlaying] = useState(true);
 
  const handleToggle = () => {
    if (isPlaying) {
      dotLottieRef.current?.pause();
    } else {
      dotLottieRef.current?.play();
    }
    setIsPlaying(!isPlaying);
  };
 
  return (
    <div>
      <DotLottieReact
        src="/animations/my-animation.lottie"
        loop
        autoplay
        dotLottieRefCallback={(dotLottie) => {
          dotLottieRef.current = dotLottie;
        }}
      />
      <button onClick={handleToggle}>
        {isPlaying ? 'Pause' : 'Play'}
      </button>
    </div>
  );
}

'use client';
 
import { useEffect, useRef } from 'react';
import lottie, { AnimationItem } from 'lottie-web';
 
export function LottieDirect() {
  const containerRef = useRef<HTMLDivElement>(null);
  const animationRef = useRef<AnimationItem | null>(null);
 
  useEffect(() => {
    if (!containerRef.current) return;
 
    animationRef.current = lottie.loadAnimation({
      container: containerRef.current,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      path: '/animations/my-animation.json',
    });
 
    return () => {
      animationRef.current?.destroy();
    };
  }, []);
 
  return <div ref={containerRef} />;
}

// Canvas レンダラーを使用（複雑なアニメーションに有効）
lottie.loadAnimation({
  container: element,
  renderer: 'canvas',
  rendererSettings: {
    clearCanvas: true,
    progressiveLoad: true,
    hideOnTransparent: true,
  }
});

// 不要になったアニメーションは必ず破棄
animation.destroy();
 
// React/Vue のクリーンアップ
useEffect(() => {
  const anim = lottie.loadAnimation({...});
  return () => anim.destroy();
}, []);

// Intersection Observer でビューポート内に入った時のみロード
const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      lottie.loadAnimation({
        container: entry.target,
        ...
      });
      observer.unobserve(entry.target);
    }
  });
});

// DotLottie の読み込み
import { DotLottie } from '@lottiefiles/dotlottie-web';
 
const dotLottie = new DotLottie({
  canvas: document.getElementById('canvas'),
  src: 'animation.lottie',
  autoplay: true,
  loop: true,
});