Lottie Playerを使って、JSONファイルのアニメーションを簡単にWebサイトに表示する方法を紹介します。

Lottie Playerとは

JSON形式のアニメーションデータさえあれば、簡単にWebサイトに表示できるJavaScriptライブラリです。(GitHub)

数行のコードだけで、アニメーションの再生やコントロールも実装可能です。

前提

• After Effectsなどで作成したアニメーションをJSON形式(.json)で書き出す
• コードエディタはVisual Studio Codeを使用。拡張機能「Live Server」をインストールして有効化する

実装方法

1. headタグにCDNを読み込む

   <script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

2. lottie-playerタグをbodyの該当箇所に貼る

   <lottie-player src="./json/animation.json" autoplay controls loop speed="1"></lottie-player>

   • src：読み込みたいJSONファイルを指定
   • autoplay：自動再生
   • controls：再生コントロールUI（再生・一時停止ボタンなど）を表示
   • loop：無限ループ再生
   • speed：再生速度
     1 → デフォルト、通常の速さ
     2 → 2倍速（早送り）
     0.5 → 0.5倍速（スロー再生）
3. Live Serverで起動する
   Visual Studio Codeの右下にある「Go Live」をクリックします。
   ※Lottie Playerは、フォルダからHTMLファイルを直接開いても表示されません。
   「Live Server」を利用することで、VSCodeがローカルに簡易的な HTTPサーバーを立ち上げ、ローカルでもWebサーバーと同じように動作させることができます。

   もちろん、ファイルをサーバーにアップすれば公開環境でも表示できます。

上記の方法で、ローカルでLottie Playerを使ってアニメーションを表示することができます。