Webサイトだけでなく、モバイルアプリケーションの分野においても、アニメーションの重要性は日増しに高まってきています。
ページが読み込まれたあとはずっと静止しているホームページより、何か少しでも動きがあるだけで、ユーザーに驚きや感動を与え、結果的にホームページへのエンゲージメント率が高まるからです。

しかし、以前は、Android やiOS、React Nativeアプリの複雑なアニメーションを作成することは、それ自体が難しくて敷居が高く、時間がかかりました。
画面サイズごとに大量の画像ファイルを追加したり、数千行単位で保守しにくいコードを書いたりする必要があったのです。
このため、ほとんどのモバイルアプリケーションでは、複雑なアニメーションを取り入れるどころか、全くアニメーションを取り入れないことも日常茶飯事でした。

しかし、Airbnbから画期的なアニメーションライブラリが登場しました。
それが*「Lottie(ロッティー)」*です。

今回は、新登場の素晴らしい動きをするモバイルアプリケーション用のアニメーションライブラリ「Lottie」の魅力や簡単な使い方をご紹介します。
何百万ものゲストやホストをサポートするAirbnbだからこそ開発できた、柔軟で効率的なソリューションを覗いてみることにしましょう。

Lottieとは？

lottie.png

*Lottie(ロッティー)*は、Airbnbから登場したiOS、Android、React Native対応のアニメーションライブラリです。
Adobe After Effectsで表示できるアニメーションをリアルタイムでレンダリングし、ネイティブアプリで静的なコンテンツを作るのと同じくらい簡単に面白い動きをするアニメーションを作成することができます。

Lottieは、Bodymovinというオープンソースライブラリを使います。
After Effectsの拡張機能からJSONファイルとして書き出されたアニメーションデータを読み込むのに使用します。
拡張機能は、Web上でアニメーションをレンダリングできるJavaScriptプレーヤーに同梱されています。

Lottieを使用すると、フロントエンドエンジニアやWebデザイナーは、書き直しに苦労することなく、より豊かなアニメーションを作成できます。
フレームワークを参照したり、手動でベジェ曲線を作成したり、GIFだけでアニメーションを作成したりすることは過去のことです。
エンジニアは、設計者が意図した通りのアニメーションを実装することができます。
アプリ内のプッシュ通知、フルフレームのアニメーション、レビュー評価などを、さまざまなサイズの画面で使えるようになっています。

ほかのアニメーションライブラリと何が違うの？

movie.jpeg

実際のところ、After Effectsをサポートしているライブラリはすでに存在しています。
Marcus EckertのSquallやFacebookのKeyframesなどです。

Facebookのライブラリでは、主にユーザーのリアクションに焦点を当てていたため、After Effectsの機能の中からいくつかピックアップしてサポートしています。
一方Lottieでは、今のところシェイプレイヤー・トリムパス・ダッシュパターン・マスクなどに対応していますが、最終的には可能な限りほとんどすべての機能をサポートしていく予定です。

また、LottieではAPIの機能も組み込まれています。
例えば、JSONファイルをネットワーク経由で読み込むことで、A/Bテストを行うことができます。
さらに、キャッシュ機能があり、例えば欲しいものリストのような頻繁に表示される部分でのアニメーションでは、毎回キャッシュされたコピーを読み込むこともできます。
また、プログレスアニメーションを表示する際にも、簡単な値を変更するだけでアニメーション操作を行うことも可能です。

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つの理由と学習方法まとめ