Lottieアニメーションの再生、一時停止、停止 - JavaScript

Lottieアニメーションの再生、一時停止、停止をJavaScriptで制御するコードを紹介します。

概要

こちらの記事では、 Bodymovin で出力した LottieアニメーションをWebページで再生するHTMLを紹介しました。紹介した方法ではページを読み込むと自動でアニメーションの再生が始まりますが、利用用途によっては、アクションが発生したタイミングでアニメーションを再生したい場合があります。この記事では、LottieアニメーションをJavaScriptで再生、一時停止、停止するコードを紹介します。

アニメーションの再生

Lottieアニメーションを再生する場合は、Animationオブジェクトインスタンスの play() メソッドを利用します。書式は次の通りです。

(Animationオブジェクトインスタンス).play();

アニメーションの一時停止

アニメーションを一時停止する場合は、Animationインスタンスの pause()メソッドを利用します。

(Animationオブジェクトインスタンス).pause();

アニメーションの停止

アニメーションを停止する場合は、Animationインスタンスの stop()メソッドを利用します。

(Animationオブジェクトインスタンス).stop();

実装例

コード

以下の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;
    var animation;

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

    function animation_start() {
      animation.play();
    }
    function animation_pause() {
      animation.pause();
    }
    function animation_stop() {
      animation.stop();
    }
  </script>
  <style type="text/css">
    #frame {
      width: 180px;
    }
  </style>
</head>
<body>
  <h2>Lottie アニメーションの開始と停止</h2>
  <button onclick="animation_start();">Play</button>
  <button onclick="animation_pause();">Pause</button>
  <button onclick="animation_stop();">Stop</button>
  <hr />
  <div id="frame"></div>
</body>
</html>

解説

以下のコードでAnimationオブジェクトのインスタンスを作成しています。
今回はアクションでアニメーションを再生するため、loopプロパティをtrueに設定し、autoplayプロパティをfalseに設定し、アニメーションが自動で開始しない状態に設定します。

window.onload = animation_init;
var animation;

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

以下はアニメーションを制御する関数です。 Animationインスタンスのplay, pause, stopメソッドを呼び出す関数を実装しています。

    function animation_start() {
      animation.play();
    }
    function animation_pause() {
      animation.pause();
    }
    function animation_stop() {
      animation.stop();
    }

HTMLページにはアニメーションを再生する枠(id="frame"のdivタグ)と、アニメーションを制御するボタンを配置しています。ボタンをクリックすると、アニメーションを制御する関数を呼び出します。

  <h2>Lottie アニメーションの開始と停止</h2>
  <button onclick="animation_start();">Play</button>
  <button onclick="animation_pause();">Pause</button>
  <button onclick="animation_stop();">Stop</button>
  <hr />
  <div id="frame"></div>