はじめに
Lottieを使ったアニメーションをWEBサイトのローディングに使用する方法です。
今回は、デザイナーさんがLottieでローディングアニメーションを作成し、jsonファイルをAfter Effectsで書き出してくれたので、Lottieについては割愛します。
準備するもの
・After Effectsで書き出したjsonファイル
手順
1.HTML
1-1：Lottieを読み込む
lottie-webから最新のLottie.jsファイルを取得し任意の場所に置くか、CDNを使いLottieを読み込みます。
<script src="js/lottie.js" type="text/javascript"></script>または
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
1-2：ローディングを表示させる領域を用意
<body>直下がわかりやすいです。
<div id="loading">
<div id="loading-wrapper"></div>
</div>
2.JavaScript
2-1：任意の場所にjsonファイルを格納し、pathに指定します。
lottie.loadAnimation({
container: document.getElementById('loading-wrapper'),//アニメーションを表示させたい要素
renderer: 'svg',//レンダリング形式(svg / html / canvasを指定)
loop: false,//アニメーションのループをさせるか（true / false / 数値を指定）
autoplay: true,//アニメーションの自動再生をさせるか（true / falseを指定）
path: '/assets/json/loading.json'//アニメーションのjsonファイルのパス
});ここまでで組込みは完了です。組込んだアニメーションが#loading-wrapper内に表示されます。
2-2：初回アクセス時のみローディングを表示するようにする
JavaScriptの「sessionStorage」を使い、初回アクセス時のみトップページにローディングアニメーションを表示させます。ブラウザ、タブを閉じ、再度、アクセスするとローディングは表示されます。
freefuntimesさんの記事を参考にさせていただきました。
sessionStorageを使って初回だけ読み込まれるローディング画面をJavaScriptで実装してみる（備忘録）
3.CSS
3-1：画面全体の天地中央に表示させる
#loading {
position: fixed;
top: 0;
left: 0;
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
width: 100vw;
height: 100svh;
background-color: #fff;
}
3-2：微調整
実装するアニメーションによりますが、transitionを使いフェードアウトを滑らかにしたり、アニメーションのサイズを調整すれば完成です！
#loading {
transition: all 1s;
}
#loading-wrapper {
width: 30%;
}
まとめ
Lottieアニメーションをローディングに使用した記事が無く、試行錯誤の結果、簡単に実装することができました。LottieアニメーションはJavaScriptのコードと組み合わせて動的な操作や制御もできるので、ローディング以外にもUXを向上させる楽しいことができそうですね。
参考サイト
こちらのサイトを参考にさせていただきました。
