After Effectsで作成したアニメーションをネイティブアプリで再生するAirbnb製のライブラリを使ってみた【前編】

Pocket
LINEで送る

先日、アプリにリッチなアニメーションを取り入れるための方法の一つとして、PNG画像を複数枚書き出し、画像切り替えのプログラムを書いてもらうという方法を提案しました。( デザイナー向け – iOSアプリ用に豊かなUIアニメーションを作る方法 | Tondemo Design Blog )

2017年2月1日に、Airbnbがアニメーションを, iOS, android, React Nativeに取り入れるためのライブラリを発表。名前はLottie。

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, and allows native apps to use animations as easily as they use static assets. Lottie uses animation data exported as JSON files from an open-source After Effects extension called Bodymovin.

Lottie : Airbnb Design

LottieはAfterEffectsのアニメーションをリアルタイムで描画できるiOS, Android, React Nativeのライブラリです。デフォルトで搭載されているアセットと同じくらいカンタンに、アニメーションをネイティブアプリで使用できるようになります。Bodymovinと呼ばれるオープンソースのAfterEffectsのエクステンションによって、JSONファイルで書き出されたアニメーションデータを使用します。

と、公式サイトにも書かれているとおり、実装までのフローは以下の通り。

1. AfterEffectsにBodymovinと呼ばれるプラグインをインストールし、JSONファイルをエキスポート

2. Lottieを使って、エキスポートしたJSONファイルを組み込む

今回は1のみをご紹介(2は現在知り合いのiOSエンジニアに試してもらっています)。

Bodymovinをインストール

Zipファイルをダウンロードしてきます。 GitHub – bodymovin/bodymovin: after effects to html library

プラグインのインストールに使うので、ZXPインストーラーもインストールしましょう。ZXP Installer – rescripts + aeplugins – aescripts.com

先程ダウンロードしてきたbodymovin-master.zipを解凍したら “bodymovin-master > build > extension” の中にあるbodymovin.zxpを、ZXPインストーラーにドラッグ・アンド・ドロップします。以上でプラグインのインストールは完了です。

GitHub – airbnb/lottie-ios: An iOS library to natively render After Effects vector animations

JSONデータを書き出す

AfterEffectsで、作成済みのプロジェクトを開きます。ウィンドウ > 拡張機能 > Bodymovinを選択しましょう。書き出したいコンポジション選択し、書き出す場所を設定したら、Renderを押します。以上で終了です。

ここでスクリプトによるファイルへの書き込みとネットワークへのアクセスを許可してくださいというエラーが出る場合、AfterEffectsの 環境設定 > 一般の中にある”スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可”にチェックを入れるとうまくいきます。

まとめ

まだNativeアプリに実装していないので、使い勝手は判断できかねますが、デザイナーがやるべきことは非常にシンプルです。Airbnb製のライブラリ次第で、アニメーションの実装が劇的に簡単なものになることが期待できます。知人がLottieで僕のJSONデータをアプリに組み込んでくれたらまた続きをレポートします!


Pocket
LINEで送る