デザイナーとエンジニアの距離を近づける Lottie 利用術

Lottie の登場により、エンジニアによる実装コストを抑えながらも
デザイナーが意図したアニメーションをよりダイレクトに
Android を始めとした各種プラットフォームで表現できるようになりました。

しかし、各種プラットフォーム上で Lottie ライブラリが実装されているとはいえ、
プラットフォームごとに Adobe After Effects のプロパティの対応状況は異なり
望んだアニメーションをマルチプラットフォームで統一的に表現できない場合があるなど、まだまだ課題は残されています。

また、アニメーションの制作をデザイナー側で完結しやすくなった反面、アニメーションの表現を修正していくたびに
- AE でアニメーションを修正して Bodymovin ファイルを書き出し
- Bodymovin ファイルをデザイナーからエンジニアへ受け渡し
- エンジニアが新しい Bodymovin ファイルをアプリへ反映させる
などの作業が必要となる場合があり、デザイナー・エンジニア間のデータのやりとりの回数が多くなってしまう問題が起こりえます。

そこで本セッションでは、
デザイナーやエンジニアの両方が、プラットフォーム間の特性を踏まえながらも
より Lotiie の性質や仕組みより深く理解して利用できるようになるために
そもそもどのように Adobe After Effects (AE) で表現されるアニメーションが
Bodymovin ファイルに変換され、lottie-andoird を通してアニメーションを実現しているのか
を解説します。

さらに、 Hyperion-Android と Lottie Dynamic Properties を用いて
アニメーション個別にコードを書くことなくアプリ上の Lottie アニメーションの挙動を変化させていくことで
AE 上での編集回数を減らしながら、より効率的にデザイナーとエンジニアがアニメーションのブラッシュアップを実現できるような方法を紹介します。