Lottie-web を用いて、静的な JSON アニメーションをユーザーのタッチ・ジェスチャーに反応するインタラクティブな体験へと進化させる方法を、実践的な手順で解説します。SVG ベースの軽量レンダリングと、柔軟な JavaScript イベント連携により、滑らかなモバイル対応インタラクションが実現可能です。

ステップ1：Lottie アニメーションデータの準備

対応する JSON 形式のアセットが必要です。以下のいずれかの手段で入手できます：

• After Effects + Bodymovin プラグインでエクスポート
• Lottie Files や Lottie Community から公開済みのアセットを取得（例：animations/transition.json）
• オンラインジェネレーターで簡易アニメーションを生成

ステップ2：ライブラリの導入と初期化

プロジェクトへの統合は、パッケージマネージャーまたは CDN のどちらでも可能です。

npm 経由でのインストール：

npm install lottie-web

CDN 経由での読み込み（HTML head 内）：

<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.12.2/build/player/lottie.min.js"></script>

基本的な初期化スクリプト：

const stage = document.querySelector('#lottie-stage');
const player = lottie.loadAnimation({
  container: stage,
  path: 'animations/interactive-button.json',
  renderer: 'svg',
  loop: false,
  autoplay: false
});

ステップ3：ジェスチャー制御の実装

Lottie-web 自体はジェスチャーAPIを提供しませんが、ネイティブイベントとの連携で高精度な操作が可能です。

単一タップによる再生／一時停止切り替え：

stage.addEventListener('click', () => {
  if (player.isPaused) player.play();
  else player.pause();
});

スワイプによるフレーム位置制御（水平方向）：

let originX = 0;
let baseFrame = 0;

stage.addEventListener('touchstart', (e) => {
  originX = e.touches[0].clientX;
  baseFrame = player.currentFrame;
  player.pause();
});

stage.addEventListener('touchmove', (e) => {
  e.preventDefault();
  const x = e.touches[0].clientX;
  const delta = x - originX;
  const targetFrame = Math.round(baseFrame + delta * 0.8);
  player.goToAndStop(Math.max(0, Math.min(player.totalFrames, targetFrame)), true);
});

stage.addEventListener('touchend', () => {
  player.play();
});

状態監視イベントの活用

アニメーションライフサイクルに応じた処理を追加するには、以下のイベントハンドラが有効です：

// 読み込み完了後
player.addEventListener('DOMLoaded', () => console.log('ロード完了'));

// 各フレーム描画時（パフォーマンスに注意）
player.addEventListener('enterFrame', (e) => {
  if (e.currentTime > 2.5) player.setSpeed(0.7);
});

// 再生終了時
player.addEventListener('complete', () => player.goToAndPlay(0, true));