Lottieを使ったアニメーションの実装

Lottieとは？

Adobe AfterEffectsで作成したアニメーションをJSONファイルで書き出し、SVGアニメーションとして実装できるJavascriptライブラリです。
Lottieで表現できるアニメーションの範疇はCSSアニメーションと大差ありませんが、イラストをパーツ単位で動かしたり、複数の動きを組み合わせたりと、より細かい動きを表現したい場合におすすめです。

Lottieの使い方

※今回はAdobe AfterEffectsでの作成方法などは割愛し、JSONファイルが用意されていることを前提として進めます。

まずはfooterでlottie.min.jsと自前のJSファイルを読み込みます。
オーソドックスな実装であればこの2ファイルのみで動かすことができます。

<!-- Lottie -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.9/lottie.min.js"></script>
<!-- 自前のJSファイル -->
<script src="./js/main.js"></script>

アニメーションを表示させるための要素を用意し、idを付与します。
ブラウザ上ではこちらの要素の中にsvgタグが入ることになります。

<div id="logo"></div>

最後にmain.jsでアニメーションを表示・制御するコードを書きます。
今回は、アニメーションを1.2倍速、自動再生、ループさせます。

/* ------------------------------------
①自動再生+ループ
------------------------------------ */
const logoAnimation = lottie.loadAnimation({
	container: document.getElementById('logo'), // アニメーションを表示する要素
	renderer: 'svg',
	loop: true, // アニメーションをループさせるかどうか
	autoplay: true, // アニメーションを自動再生するかどうか
	path: './data/data02.json', // jsonファイルのパス
});

// アニメーションのスピード（1.2倍）
logoAnimation.setSpeed(1.2);

// アニメーションスタート
logoAnimation.play();

ここまででアニメーションが表示できるかと思います。
アニメーションを停止させたり、一時停止させたい場合は以下になります。

// 一時停止
logoAnimation.pause();

// 停止
logoAnimation.stop();

以上、基本的なLottieの使用方法になります。
Javascriptで制御できるため、様々なイベントや他のライブラリと組み合わせて使うこともできそうです。