Lottieアニメーション備忘録

Lottie（ロッティー）は、After Effectsなどのデザインツールで作ったアニメーションを「JSON」という軽いデータ形式で書き出したもの。「プレイヤー（JavaScript ）」をつかってWEBサイトにできます。

※Lottieの世界は日々進化しており、新しいファイル形式（.lottie）や、より高速に動かすための技術（WASMなど）が登場するたびに、それに最適化された新しいプレイヤーが作られています。

Lottieに魅力

Webで何かを動かそうとすると、

• GIFアニメ: 手軽だけど、拡大するとボケるし、色が汚い。
• 動画（mp4）: 綺麗だけど、ファイルが重すぎて読み込みが遅い。
• SVGアニメ: 綺麗だけど、複雑な動きをコードで書くのは修行レベル。

という、状態を解決したのがLottie（ロッティー）、🌟 Lottieが「最強」と言われる3つの理由

1. 拡大してもずっと綺麗（ベクター形式）
2. 軽い！10分の1以下になることもある。
3. ベジェ曲線ツールでパスを1本ずつ引かなくても、LottieFilesなどの「誰かが作ったカッコいい素材」を持ってきて、そのままWebに貼り付けるだけで動く。

基本的なコード

プレイヤータグと、そのプレイヤータグを利用するためのスクリプトの読み込みがセットです。
例：lottie-playerタグをつかってWEBサイトに表示

<!--lottie-playerタグを利用するためのスクリプトを読み込む-->
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<lottie-player 
  src="ここにJSONファイルのパスを貼る" 
  background="transparent" 
  speed="1" 
  style="width: 300px; height: 300px;" 
  loop 
  autoplay>
</lottie-player>

Lottieプレイヤーの種類

Lottieアニメーションを再生するための「プレイヤー」は主に3種類あります。基本的には「ファイルの形式（.json、.lottie）」と「やりたいこと（ホバーなど）」に合わせて選びます。

• .json 形式の古い素材をそのまま使いたい ➡ lottie-player
• .lottie 形式（軽量版）をとりあえず使ってみたい ➡ dotlottie-player
• 表示速度を極限まで速くしたい、最新の標準に合わせたい ➡ dotlottie-wc

※「開発環境（ReactやVue）」や「制御の細かさ」に応じて、他にもプレイヤーやライブラリが存在します。

Lottieプレイヤー：スクリプトとタグの対応一覧

アニメーションを制御するための「属性（Attribute）」は、使用するプレイヤーの種類やバージョンによって異なりますが、参考までに標準的なLottie Web Player（lottie-player）でアニメーションの挙動を制御するための属性をまとめました。

LottieFiles：アニメーションの「宝箱」

LottieFilesは、アニメーションを探し、加工し、公開するまでのすべてが揃ったサイト。

素材のダウンロード（JSON/GIF）、色などのカスタマイズ、自分の作品の保存。これらはすべてアカウント（無料）が必要です。

「無料素材」探す方法とライセンスについて

LottieFilesには有料（マーケットプレイス）と無料（コミュニティ）が混ざっています。オレンジ色の王冠マークは「有料会員限定」のサービスです。

無料のものだけを探す手順

1. 検索フィルターを活用する
   LottieFilesのトップページの検索窓にキーワード（例：heart loading：英語で検索するのが圧倒的に有利）を入れて、フィルターを 「Free」 に切り替えて検索。
2. 個別の素材ページを開き、右側や下の方にライセンス情報を確認。
   ほとんどの無料素材は 「LottieFiles Simple License」 または 「Creative Commons (CC BY 4.0)」。

クレジット表記（CC BY 4.0）の具体的な書き方案

• 方法A：記事の最後にひっそり書く
  「Animation by [作者名] on LottieFiles」
• 方法B：画像キャプションに入れる
  Lottieのすぐ下に小さく「Source: LottieFiles / Author: ○○」と添える。

選んだ素材を利用する方法

気に入った素材を利用するには、まず自分のワークスペースにコピーを作る必要がある。
自分のスペースに保存しておくことで、後から色を変えたり編集ができる。

「ダウンロード」と「Handoff（CDN）」の違い
LottieFilesで選んだ素材を自分のサイトで使うには、大きく分けて2つの方法があります。

用途に合わせて使い分ける2つのエディタ

LottieFilesには、既存の素材を調整するための「Editor」と、ゼロから作成するための「Creator」の2つのツールが用意されています。

LottieFilesの.lottieファイルでインタラクションの実装

⚠️LottieFilesで提供されていうデフォルトのコードdotlottie-wcプレイヤーでは、制御ができなかったので、dotlottie-playerに変更しました。
これでマウスがのった時だけアニメーションされます。

<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

<dotlottie-player 
  src="https://lottie.host/e4659e27-82ba-463e-b30d-3ec24ee8de9a/LLdu3kxfnl.lottie" 
  background="transparent" 
  speed="1" 
  style="width: 300px; height: 300px; cursor: pointer;" 
  loop 
  hover>
</dotlottie-player>

クリックで制御する場合、

<script src="https://unpkg.com/@dotlottie/player-component@latest/dist/dotlottie-player.mjs" type="module"></script>

<dotlottie-player 
  id="dotLottieToggle" 
  src="https://lottie.host/e4659e27-82ba-463e-b30d-3ec24ee8de9a/LLdu3kxfnl.lottie" 
  style="width: 300px; height: 300px; cursor: pointer;" 
  loop>
</dotlottie-player>

<script>
  const player = document.getElementById('dotLottieToggle');
  
  // 自分で状態を管理するフラグ（最初は止まっているので false）
  let isPlaying = false;

  player.addEventListener('click', () => {
    if (isPlaying) {
      player.pause(); // 再生中なら一時停止
      isPlaying = false;
    } else {
      player.play();  // 停止中なら再生
      isPlaying = true;
    }
  });
</script>