ドラゴンクエスト12の発売日(未定、なんなら対応機種も未定)が待ち遠しいカリタです。

正直昔は全然ドラクエというかRPGが好きではありませんでした。RPGよりもアクションかアクションRPGの方が好きたったのですが、不思議なことに今はRPGの方が好きです。

さて、本題に入ります。

Lottieとはjson形式で出力されたアニメーションファイルを再生するためのライブラリです。

Lottie

昔APIをたたく勉強したときに使ってみました。

サンプルはiOSアプリですがLottieはiOS,Android,Webで使うことができます。

web

• CDNの読み込み

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

• jsを書く

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

これで簡単にアニメーションができます。

また、jsonファイルはLottie Filesからダウンロードできるほか、Adobeのツールでjson出力で保存すればアニメーションの自作ができます。