LOADING

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

2017-02-03 | AfterEffects

前編(https://tondemodesign.com/tried-lottie-1/)では、Airbnb製のライブラリがAfterEffectsアニメーションを読み込めるように、Bodymovinを使ってJSONファイルを書き出すところまでをやりました。

今回は実際にLottieを使って、nanameue社のエンジニアシューちゃん( @wildstarzw )にandroidアプリに組み込んでもらいました。本記事では、Lottieを使ったプロジェクトでデザイナーがなにをすべきかにフォーカスしています。エンジニアがやるべきLottieの実装方法を詳しく説明している記事ではありませんのであしからず。エンジニアの方はシューちゃんに質問してね ( @wildstarzw ) 。

Repeatは何故か無視される

こちらのアニメーションを組み込んでもらおうとしたところ、うまく行きませんでした。実際に実装してもらったときのアニメーションがこちら 

AfterEffectsでは、1つの球の動きをつくり、Repeat機能を使って球を4つ、90度ずつずらして配置する設定にしていました。おそらくこのRepeatの部分が無視されています。Repeat機能を使う場合は、Repeatしたものをそれぞれオブジェクトに置換する必要があるみたいです。

画像を含むAfterEffectsファイルにはまだ未対応

次に実装をお願いしたのが上のアニメーション。こちらのアニメーションはpng画像を2枚使用しています。

このプロジェクトをBodymovinを使って書き出すと、imageフォルダが作られてしまいます。

調べたところ公式アナウンスに、イメージの対応はこれからの予定と書かれていました。

In addition to all of the After Effects features and API additions we’ve worked on so far, we have many ideas for the future. These include mapping views to Lottie animations, controlling view transitions with Lottie, support for Battle Axe’s RubberHose, gradient, type, and image support.

ここまで取り組んできたAfterEffectsの機能やAPIの開発に加えて、このさきやりたいこともたくさんあります。Lottieアニメーションのマッピングビューをつくったり、Lottieでviewのトランジションを制御したり、Battle AxeのRubberHose、グラデーション、文字入力、それからイメージもサポートしていくつもりです。

こちらに関しては、Lottieのアップデートを待つか、自分なりに魔改造するかしか解決方法はなさそうです。

画像が駄目でもベクターならOK

画像が使えないとなると、複雑なイラストをAfterEffectsで描くしかないのかというとそんなこともありません。ベクターを使えば良いのです。

やり方

イラレファイルをAfterEffectsで読み込みます。タイムラインにイラレファイルを置いたら、右クリック>ベクトルレイヤーからシェイプを作成。

ベクターデータとしてAfterEffects上で扱うことが出来るようになりました。画像を含まないデータなので、Bodymovinを使って書き出したデータにもimageフォルダが作成されずに、うまいことandroidアプリで動かすことが出来ました。

まとめ

画像ファイルには対応していませんでしたが、イラストレーターで描いた複雑なイラストもカンタンにアプリに実装できることがわかりました。JSONファイルを渡してから、シューちゃんは15分程でアプリ(android)に組み込んでくれました。エンジニアがすべきことは正確にはわかりませんが、導入コストはさほど高くないのではないでしょうか。

この先、更に便利な機能を実装する予定だとAirbnbの公式アナウンスも宣言してますし、今後に期待です。リッチアニメーションがネイティブアプリのスタンダードになる日も近いかもしれません!


共有よろしくおねがいします!