Lottie(ロッティー) は、Airbnb 社が開発したアニメーションライブラリで、2017年2月頃に発表されたものです。
これがとても面白かったので、メモとして残します。
Lottie の特徴
- Lottie で使用するデータは、Bodymovin というオープンソースライブラリで作成します。
- 作成したアニメーションデータを Adobe After Effects で json 形式に変換し、javascript 内で指定の形式で記述すれば、そのアニメーションを表示できます。
- 通常の html, css, javascript でプログラミングした場合よりも、デザイナーの方が考えたアニメーションを再現できます。
Lottie を使用するメリット
アニメーションデータが json 形式なので、画像や動画などの多数の、容量が大きなデータを保持する必要がなくなります。
なので、システム上のディスク使用率をかなり節約できます。
Lottie を使用するデメリット
Lottie の Web サイトのサポート機能一覧にあるように、現状実現できない動作はあるようです。
Lottie でできないこと
事前に作成したアニメーションデータを json 形式に変換しているので、実行速度を可変にすることはできないようです。
環境の構成方法
Adobe After Effects を導入します。
ZXP Installter をダウンロードします。
Bodymovin をダウンロードし、ZXP Installter を使用してインストールします。
アニメーションデータ作成方法
アニメーションの元となる素材を作成します。
Adobe After Effects でアニメーションを作成します。
Adobe After Effects で Bodymovin プラグインを立ち上げます。
2 で作成したデータを json 形式のデータに変換します。
実装方法
使用するファイルは次の 3 つです。
- index.html
- main.js
- animation.json
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.5.9/lottie.js" type="text/javascript"></script>
</head>
<body>
<div id="lottie"></div>
<script src="main.js" type="text/javascript"></script>
</body>
</html>
lottie の js ファイルの URLを参考に、lottie.js を読み込んでいます。
ちなみに、Github にファイルもあります。
var ani = lottie.loadAnimation({
container: document.getElementById("lottie"),
renderer: "svg",
loop: true,
autoplay: true,
path: "animation.json"
});
animation.json については、多数のサンプルがある LottieFiles からお借りしました。
注意事項
Chrome ではローカルのファイル読み込みでエラーが出力されますので、Chrome のアイコンを右クリック->プロパティから、リンク先に記載のプログラム名の後に以下を記載するとローカルで読み込み可能になります。
--user-data-dir="<ファイルが配置されているフォルダ(フルパス)>" --disable-web-security
所感
アニメーションが小容量のデータで実現できるので、PWA (Progressive Web Apps) との親和性もあると思いました。
オフラインでも問題なく実行できそうな気がします。
参考
Lottie の使い方等について、参考にさせていただきました。