Lottie-Playerを用いてLottieの機能をweb上で実装する方法

こんにちは！さくです！

一般的にLottieの機能をweb上で実装する際【Lottie.min.js】をダウンロードし外部ファイルとして読み込む方法がセオリーとされています。

が、本記事では代替手段としてLottie-Playerを読み込みLottieの機能を実装する方法を紹介したいと思います。

Lottie-Playerを使うメリットとして
・超短文で済ませられる
・検証を行いやすい

等のメリットが得られます。

##Lottie-Playerファイルの読み込み

上記サイトの【dist/lottie-player.js】をインポートします。

Lottie-Player-import-sample.html

<script src="https://unpkg.com/@lottiefiles/lottie-player@0.3.0-rc2/dist/lottie-player.js"></script>

リンクはソースコードの通り

##LottieFilesによる.jsonファイルの読み込み

こちらのサイトにアクセスします。

LottieFilesは有志が作成したアニメーションがLottieで使えるjsonファイルで公開されているサイトです。

画像右上の「View Recent Animations」から一覧表示にできます

実装するアニメーションを見つけたら選択します。

今回はこちらのアニメーションを実装します

右下の「Lottie Animation URL」からURLを所得

再びHTMLのソースコードに戻り、先程所得したURLをタグのソースに入力します。

Lottie-Player-sample

<lottie-player src="https://assets5.lottiefiles.com/packages/lf20_H0vxmL.json"></lottie-player>

lottie-playerタグのソースに先程所得したURLを入力

##命令

自動再生やループといった命令はlottie-playerタグの中で行います

Lottie-Player-order

<lottie-player src="リンク"
               autoplay
               loop
               speed = "1"
></lottie-player>

よく使われるものは上記の通りだと思います。
autoplayやloopは入力するだけで反映されます。

##完成

Lottie-Player-comp

<script src="https://unpkg.com/@lottiefiles/lottie-player@0.3.0-rc2/dist/lottie-player.js"></script>
<lottie-player src="https://assets5.lottiefiles.com/packages/lf20_H0vxmL.json" autoplay loop speed = "1"></lottie-player>

出力結果

僅か二行でLottieによるアニメーションを実装することが出来ました。
トライアンドエラーが捗ります。

##最後に
Lottieをweb上に組み込む場合Lottie.min.jsファイルを別途ダウンロードしインポートする方法がセオリーと言われていましたが別の手段としてこういうのもあるよ、という紹介でした！

僅か２行で実装できるので是非みなさん試してみてね！

twitter→(@saku_nectaris)
フォローよろしくな！