1 概要
2 事前準備
3 手順:jsonファイルを読み込みアニメーションを再生する
- 3.1 コード
- 3.2 ファイル配置
- 3.3 解説
- 3.4 実行結果
4 手順:SMIL SVGファイルを読み込みアニメーションを再生する
- 4.1 コード
- 4.2 解説
- 4.3 ファイル配置
- 4.4 実行結果

Bodymovin で出力した LottieアニメーションをWebページで再生する - JavaScript

Bodymovin で出力した LottieアニメーションをWebページで再生する手順を紹介します。

概要

こちらの記事では、BodymovinでAfter Effectsで作成したアニメーションを出力しました。この記事では出力したアニメーションをWebページで再生する手順を紹介します。

事前準備

Bodymovinでアニメーションを出力します。手順はこちらの記事を参照してください。出力結果のdata.jsonファイル、または、SMILを利用したSVGファイルを利用します。

手順:jsonファイルを読み込みアニメーションを再生する

Bodymovinで出力したjsonファイルを利用してアニメーションを再生する方法です。

コード

以下のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title></title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.10.2/lottie.min.js" type="text/javascript"></script>
  <script type="text/javascript">
    window.onload = animation_init;

    function animation_init() {
          var animation = bodymovin.loadAnimation({
            container: document.getElementById('frame'),
            renderer: 'svg',
            loop: false,
            autoplay: true,
            path: 'data.json'
          });
    }
  </script>
  <style type="text/css">
    #frame {
      width: 180px;
    }
  </style>
</head>
<body>
  <h2>Lottieのデモ</h2>
  <div id="frame"></div>
</body>
</html>

ファイル配置

HTMLを配置したパスと同じ位置に、Bodymovinで出力したdata.jsonファイルを配置します。

解説

LottieのJavaScriptファイルを読み込みます。今回はCDNから読み込む方法を利用しています。 LottieのJavaScriptファイルへのアクセス方法についてはこちらの記事を参照して下さい。

  <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.10.2/lottie.min.js"
    type="text/javascript"></script>

以下のコードでページ読み込み時に、animation_init 関数を実行する処理を記述します。

window.onload = animation_init;

ページ表示時に以下のコードが実行されます。
bodymovin.loadAnimation()関数を実行し、アニメーションのオブジェクトを作成します。
containerプロパティにはアニメーションを再生するDOM要素を設定します。今回はdocument.getElementById()を呼び出してid="frame"の要素を設定しています。 rendererには svg を指定します。loopプロパティはfalseを設定しアニメーションのループをしない状態とします。autoplayプロパティはtrueに設定し、読み込み時に自動で再生が始まる動作とします。pathプロパティにはアニメーションデータのjsonファイルを指定します。今回は Bodymovinで出力したdata.jsonファイルを指定します。

function animation_init() {
  var animation = bodymovin.loadAnimation({
    container: document.getElementById('frame'),
    renderer: 'svg',
    loop: false,
    autoplay: true,
    path: 'data.json'
  });
}

アニメーションは、id="frame"が設定されているdivタグ部分に表示されます。divタグの幅はスタイルシートで幅180pxに設定しています。

  <div id="frame"></div>

    #frame {
      width: 180px;
    }

実行結果

上記のHTMLファイルをWebブラウザで表示します。下図の画面が表示されます。ページ表示直後からアニメーションが開始します。

図形が徐々に拡大するアニメーションが再生されます。

ループしない設定のため、図形が拡大し終えると、そのままの状態のままとなります。

手順:SMIL SVGファイルを読み込みアニメーションを再生する

SMIL (Synchronized Multimedia Integration Language)を利用したアニメーションSVGファイルを再生する手順です。

コード

以下のHTMLファイルを作成します。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
  <h2>SMIL SVGのデモ</h2>
  <div>
    <img src="data.svg" />
  </div>
</body>
</html>