【Lottie】アニメーションをコード化してアプリ・Webサイトに組み込む【AfterEffects】

作成した動画を簡単にコードにしてアプリやWebサイトに組み込めたら便利ですよね。そこで今回はAfterEffectsで作成したアニメーションをコードにしてみるっていうことをやっていきたい。

使うのは「Lottie」っていうAfterEffectsで作成したアニメーションを描画してくれるライブラリ。airbnbがやっているものらしいですね。

Lottie is an iOS, Android, and React Native library that renders After Effects animations in real time, allowing apps to use animations as easily as they use static images.

lottie

iOS、Android、ReactNativeって書いてあるけど、見てみると普通にWebでも使えそうな感じですね。せっかくだし何かアニメーション作ったらアプリケーションに組み込んでどんな感じなのか確かめたいからWebで確認しようかな。

この記事ではこのLottieで動画を書き出して、Webで使うところまでやっていこうと思う。(使うのはAfterEffectsだけでillustratorとかは使わないでやるよ)

Lottieとは

LottieはAndroid, iOS, Web, React Native, Windowsのアニメーションライブラリ。AfterEffectsで作成したアニメーションをJSONで書き出して、そのJSONをアプリケーションで使うことでアニメーションを組み込むことができる。ざっくりした流れでいうとこうなるだろうか。

  1. AfterEffectsで動画を作成
  2. AfterEffectsでJSONに書き出し
  3. 書き出したJSONをアプリケーションに組み込む

結構簡単そうですよね。特に動画を作ってからはJSONの埋め込むコードもコピペで済んでしまったりするからかなり開発側としては楽。ライブラリは結構対応しているみたいでGithubちょっと見てみると、Unofficialのものもいくつかありますね。

Official Libraries

Unofficial Libraries

Github airbnb/lottieub airbnb/lottie

React NativeのライブラリなんかはUnofficialだけどスターの数もかなり多いですね。アプリケーションに組み込む際には目を通しておいた方が良さそうです。

Lottieの事例

やっぱりどんなものがLottieで作られているのか?っていうの知りたいですよね。大手のアニメーションがLottie使っていたらやっぱりちょっと印象は変わってくる。これはShowcaseで紹介されているけど、けっこうありますね。例えばGoogleHomeならこんな感じで40以上のアニメーションで使われている様子。

Google Home uses Lottie for over 40 different animations in their iOS and Android apps.

UberEatsでもローディングアニメーションに使われているよう。

ページ見ていると結構使われているのかもなあという印象。やはりアプリに結構使われているのかな。アプリに関する知見があまりないけど、アプリにアニメーションを組み込むのはなかなか面倒そうなことが書いてある。

In the past, building complex animations for Android, iOS, and React Native apps was a difficult and lengthy process. You either had to add bulky image files for each screen size or write a thousand lines of brittle, hard-to-maintain code. Because of this, most apps weren’t using animation 

それを解消するのがLottieっていうことか。確かに書き出されたJSONをアプリに組み込むだけなら楽なイメージはある。それと画面サイズごとに画像ファイルを追加したりっていうことも解消されるならかなり助かるだろうなあ。スマホの画面サイズってかなりの種類あるから機種によって見え方が変わってきてしまうっていうのは実装の悩みだろう。

LottieをAfterEffectsで使う準備をする

使ってみないことにはどんなものか分からないから使ってみよう。そのためにまずは必要なものをインストールしていく。インストールやそれぞれの環境での使い方はドキュメントに掲載されているから参考にしてみるといいですよ。

zxp-installerをダウンロードする

まずはAfterEffectsでbodymovinっていうプラグインを使うためにzxp-installerっていうやつを入れます。

ダウンロードしたらインストールしておこう。

bodymovinをダウンロードする

bodymovin.zxpをGithubからダウンロードしよう。

ダウンロードしたらそれをZXP Installerにドラッグアンドドロップ。

これでAfterEffectsを見てみるとちゃんとぼbodymovinがありますね。

インストールは完了したから次はAfterEffectsで適当にアニメーションを作ろう。

AfterEffectsでアニメーションを作る

AfterEffectsでアニメーションを作る工程に入るんだけど、この記事を見ている人はAfterEffectsの使い方をきっと知っているだろうから使い方の説明はなしでいいですよね。ただ注意点があって、普通にエフェクトとか使うとLottieでうまいこと動かせないからエフェクトは使わずにシェイプなんかで頑張る。(最初エフェクト使って作ったらうまく動かなかった・・・)

Lottie does not yet support expressions, or any effects from the effects menu.

No expressions or effects

後でbodymovinで書き出すんだけど、とりあえず適当にAfterEffectsでアニメーションを作る。作成したら[Windows→Extensions]と進んでBodymovinと進もう。

ここで書き出すコンポジションや保存先、設定をすることができる。

歯車のマークから設定をすることができるんだけど、自分が使っているレイヤーに応じて選択を変更しよう。マスク使う場合って結構多そうだからHiddenなんかはチェックが入ることよくありそう。

設定が終わったら[Render]から書き出そう。

書き出すとjsonができますね。中覗くとこんな感じでなんか凄い。

JSONファイルをプレビューしてみよう

Lottiにはjsonファイルを突っ込むことでそれをプレビューしてくれる機能があるから、それを使ってアニメーションが表示できるか確かめてみる。ちなみにログインする必要があるから、ログインして使うぞ。

そしてさっき作成されたJSONファイルをドラッグアンドドロップしてみるとこんな感じ。ちゃんと読み込んでくれてアニメーションが表示されました。(ちなみにこれはTrimPathsをシェイプレイヤーに当ててつくったもの)

これ共有リンクやQRコードなんかも表示されるから、他の人もリンク送れば見せることができますね。コードに組み込む前に誰かに見せて共有するときに便利そう。

エフェクト使ったらだめだった・・・

AfterEffectsでアニメーションを作る際にエフェクト使ってアニメーションにできるのかな?とやってみたが、できなかった。TurbulentDisplace使って作成したこのアニメーション試してみたらJSONにはなるけど、画像になってしまった。

うまくいかんな・・・と思って調べてみると対応エフェクト現在対応していないようですね。

AfterEffectsで何か作る時ってエフェクト多用すると思うんだけど、それを使ってはダメだというやつですね、なるほど。Lottieを使う場合はシェイプを動かしたりパスを動かしたりといったことで頑張ってくれっていうところでしょう。

Lottie使用時の注意点

使えない機能がけっこうある

AfterEffectsで何かアニメーションを作ってもLottieを通すとうまく動かない場合がある。これはCreating Lottie animationsを作る前に一度翻訳して目を通しておいてほしいところ。せっかく作ったのに動かない・・・なんてことになりかねない。詳しくはドキュメントを見ておいてほしいんだけど、さらっと気になるものは記載しておきます。

  • illustratorやSVGなどシェイプレイヤーに変換しないとLottieアニメーションで機能しない
  • エクスプレッションやエフェクトメニューのエフェクトをまだサポートしていない
  • アルファマットを使用するとパフォーマンスに影響を与える可能性があるから、使う場合はできるだけ小さな領域で
  • Multiply・Screen・Addなどのブレンディングモードはまだサポートされていない
  • Lumaマットはサポートされていない
  • ドロップシャドウ、カラーオーバーレイ、ストロークなどのレイヤー効果をまだサポートしていない

どうですかね、けっこうLottieアニメーションにする際の制約厳しいですよね。エフェクトは使えず、ブレンディングモードも使えないのは結構苦しい。できることとしてはシェイプレイヤーに対して何か動きを付けたりすることぐらいだろうか。

ちなみに今回テキストレイヤーからシェイプレイヤーに変換してそのシェイプレイヤーにTrimPathsを追加してアニメーションを作ったから、この辺りは大丈夫そうですね。

何か動かないなあ・・・っていう現象に遭遇してしまったら、何か対応していないものを使っていないか確認してみるといいぞ。

複雑にしない

Lottieを使ってアニメーションを作成する場合、できる限りシンプルなものを作るのが良いみたいです。

Lottie用にビルドする場合、これらのJSONファイルはモバイル製品用にできるだけコンパクトで小さい必要があることを常に念頭に置く必要があります。たとえば、できる限り子育てを使用します。同様のレイヤーで同じキーフレームを複製すると、余分なコードが追加されます。どうしても必要な場合にのみ、パスキーフレームアニメーションを使用してください。

Lottie

ついAfterEffects使うといろいろアニメーションを加えたくなっちゃうけど、結構難しいですね。キーフレームをそこまで多用するのはよくなさそうだけど、wiggleとか使っちゃいたいよなあ笑、まあやりたかったらパフォーマンスと相談ですね。

Webページにアニメーションを埋め込む

JSONを書き出して、それがアニメーションとなることは確認できたからこれをWebサイトに埋め込んでみよう。実はExpandをクリックしてHandoffからEmbedを見ると埋め込みコードが表示される。

これをそのまま使えば、Webページに表示できますね。ペンのマークをクリックすると、ちょっとした編集もすることができてコードのコピーもすることができる。

サイズを変更したり、速度変えたりループ設定をチェック入れるだけでできたりして楽ですね。ただ横幅や縦幅なんかはコードを見てみると、styleで調整しているだけですね。あくまでcssの調整ってところみたい。

HTMLを作って貼り付けてみる

コードをコピーするだけでできると思うから、実際に動くかどうか確かめてみよう。ただHTMLファイル作るだけだけど。。。bodyタグの中にコピーしたコードを貼り付ける。

これで見てみると・・・

素晴らしい。ちゃんとアニメーションできていますね。

JSONファイルをローカルに置いて表示させる

上のやつはsrcでasset指定して表示しているけど、実際に使う時には手元に置いて使いたいっていうときも多いんじゃなかろうか・・・とも思ったので、手もに置いてやってみる。HTMLファイルだけでcdnでいいやとか思ってやったらCORS起きたので、Expressで動かすことにする(Express使ったことない)

Githubを見つつこれで動くやろ的なノリで動かす。

ローカルでJSONファイル持っていても動かすことできましたね。アニメーション動くの気持ちええな。

Edit Animationから動画を編集できる

Edit Animiationから動画を編集することができるんだけど、これ結構すごいですね。色とかフレームレートとか変えられる。

しかもレイヤーを表示してくれて、別々の色にすることもできたりする。AfterEffectsで作ったものがJSONになっているからだろうかAfterEffectsのレイヤー感覚で色の変更ができる。

ちょっと色変えたかったらもう一度AfterEffectsで修正してJSONに変換しないといけないなんてことはこれ使えばないですね。AfterEffects使えなくてもこれだったら誰でも使えるだろうし、色合いは多少他の人に任せることもできそう。

Lottieはシェイプのアニメーション組み込むなら神

LottieはAfterEffectsのエフェクトを使ったアニメーションを使うことはできないようだけど、シェイプを使ったアニメーションをアプリに組み込むならかなり良いですね。Bodymobinで使ったJSONならファイルサイズも他の手段よりも良い場合が多いでしょう。

  • GIFはbodymovinJSONの2倍以上のサイズであり、固定サイズでレンダリングされるため、大規模で高密度の画面に合わせて拡大することはできません。
  • Pngシーケンスは、ファイルサイズがbodymovin jsonのサイズの30〜50倍であることが多く、スケールアップできないという点でgifよりもさらに劣っています。

それにシェイプアニメーションならいろいろ作れるから結構いける気がする。シェイプだけでも良い感じのアニメーションなんてAfterEffecterの君なら余裕だろう。

まとめ

LottieっていうAfterEffectsで作ったものをJSONにしてコードに組み込んでアプリで動かすことのできるものを使ってみたけど、これ結構すごいですね。アニメーション作るのってCSSやJavaScriptで作ろうとすると相当しんどいし、動画だと重いしとかいろいろ考えてしまうけど、こういうものがあるなら割と開発の際の選択肢になるんじゃないだろうか。

AfterEffectsの機能をフルに使ったものは作れないっていうところはあるけど、シェイプ自在にいじれれば結構なアニメーション作れるでしょう。素敵なアニメーションを作ってアプリに組み込んじゃってください。

似たライブラリもあるよ

ちなみに似たようなものでこんなものもあったりするから、同じようなことをやりたかったらみてみるといいかもしれないです。

おすすめの記事