Lottieの使い方

lottie-frame.png

それでは、Lottieの使い方を見ていくことにしましょう。

1. Bodymovinのインストール

Lottieは先述の通りAfter Effectsの拡張プラグインであるBodymovinに依存しています。
このBodymovinを使うことで、LottieでJSONデータを読み込んでアニメーションを表示する準備が整います。
Bodymovinの使い方の詳細やダウンロードに関してはGitHubをご覧ください。

2. Lottieを読み込み

同じJSONデータをiOS、Android、React Nativeと、あらゆるプラットフォームで使うことができます。

Lottieのデモを確認したい場合

android.png

現在のところAndroid版のみですが、アニメーションのデモを確認することのできるアプリがGoogle Play ストアにて配布されています。
アニメーションのJSONファイルを読み込んで、プレイヤーで再生したり一時停止したりすることができます。

まとめ

これまで複雑なアニメーションを作成するためには、いくつものライブラリを読み込んで、うんざりするほどのコードを書かなければいけませんでした。
ところが、Lottieを使うことによって、モバイルアプリケーションでユーザーを引きつけるアニメーションを簡単に実装することができるようになります。
とりわけ、いままでAndroidでこのような高度なアニメーションを表示するライブラリは少なかったので、世界中のエンジニアがLottieの今後に期待しているようです。

実際には、まだ登場したばかりのライブラリではあるのでサンプルコードが少ないです。
しかし、ある程度マニュアルを読むことができる方は、Lottieでのアニメーションを使ったモバイルアプリの作成にぜひ挑戦してみてください。

参考：
意外と簡単！HTML5とJavaScriptを使ってスマホアプリを作ろう
jQuery学習者にReactも学習してほしい3つの理由と学習方法まとめ