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テストを行うことができます。
さらに、キャッシュ機能があり、例えば欲しいものリストのような頻繁に表示される部分でのアニメーションでは、毎回キャッシュされたコピーを読み込むこともできます。
また、プログレスアニメーションを表示する際にも、簡単な値を変更するだけでアニメーション操作を行うことも可能です。