Lottieで作成されたアニメーションの制御を試してみる

以前にLottieで作成したアニメーションをサイトに組み込む記事を投稿しましたが、今回は組み込んだアニメーションをJavaScriptで制御する方法を試してみます。

サンプルコード

まずは以前の記事でも試した、基本的な埋め込みです。
CDNでプラグインを読み込みます。

<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>

アニメーションを埋め込む要素を追加します。

<div id="sample"></div>

要素のサイズを設定します。

#sample {
	width: 200px;
}

最後に、JavaScriptで埋め込みの設定を行います。

const demo = lottie.loadAnimation({
  container: document.getElementById('sample'), // アニメーションを追加する要素
  renderer: 'svg', // レンダリングのタイプ
  loop: false, // アニメーションをループさせるかどうか
  autoplay: false, // アニメーションを自動再生するかどうか
  path: 'data.json' // アニメーションのjsonファイルのパス
});

これでLottieの埋め込みができましたが、設定のloopやautoplayをfalseにしているので、この時点ではアニメーションは開始されません。
Lottieを埋め込むデモページ

埋め込んだLottieのファイルをJavaScriptで制御してみます。
詳しくはドキュメントをご確認ください。

まずはメソッドを試してみます。

<button id="play">play()</button>
<button id="stop">stop()</button>
<button id="pause">pause()</button>
<button id="setSpeed">setSpeed(0.5)</button>
<button id="goToAndStop">goToAndStop(400)</button>
<button id="goToAndPlay">goToAndPlay(200)</button>
<button id="setDirection">setDirection(-1)</button>
<button id="destroy">destroy()</button>
<button id="getDuration">getDuration()</button>
<button id="getDurationTrue">getDuration(true)</button>

document.getElementById('play').addEventListener('click', function() {
  demo.play();
});
document.getElementById('stop').addEventListener('click', function() {
  demo.stop();
});
document.getElementById('pause').addEventListener('click', function() {
  demo.pause();
});
document.getElementById('setSpeed').addEventListener('click', function() {
  demo.setSpeed(0.5);
});
document.getElementById('goToAndStop').addEventListener('click', function() {
  demo.goToAndStop(400);
});
document.getElementById('goToAndPlay').addEventListener('click', function() {
  demo.goToAndPlay(200);
});
document.getElementById('setDirection').addEventListener('click', function() {
  demo.setDirection(-1);
});
document.getElementById('destroy').addEventListener('click', function() {
  demo.destroy();
});
document.getElementById('getDuration').addEventListener('click', function() {
  console.log(demo.getDuration());
});
document.getElementById('getDuration').addEventListener('click', function() {
  console.log(demo.getDuration(true));
});

Lottieのメソッドのデモページ

次にイベントです。