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

作成した動画を簡単にコードにしてアプリやWebサイトに組み込めたら便利ですよね。そこで今回はAfterEffectsで作成したアニメーションをコードにしてみるっていうことをやっていきたい。使うのは「Lottie」っていうAfterEffectsで作成したアニメーションを描画してくれるライブラリ。airbnbがやっているものです。

これが結構すごくてAfterEffectsで作ったアニメーションをJSONに変換してWebブラウザでそのアニメーションを動かすことができる。

 この記事で行うこと

  • AfterEffectsで作成したアニメーションをLottieで書き出す
  • 書き出したアニメーションをWebブラウザで動かす

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

Lottieがどんなものか見ていこう

Lottieとは

Lottie

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

Webでは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.

Lottieで作られたGoogleHomeのアニメーション

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

Lottieで作られた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で使う準備をする

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

まずはLottieを使うために必要なものをインストールしていくよ

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

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

ZXP Installer

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

bodymovinをダウンロードする

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

bodymovinをダウンロードする

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

ZXP Installerにドラッグアンドドロップ

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

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

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

AfterEffectsを見てみるとちゃんとぼbodymovinがある

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と進もう。

AfterEffectsでBodymovinを確認

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

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

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

JSON書き出し

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

書き出されたJSON

AfterEffectsで作成したJSONファイルをLottieでプレビューしてみよう

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

LottieでJSONをプレビュー

Lottieにログイン

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

LottieでJSONを再生

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

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

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

AfterEffectsでエフェクトを使用したらLottieでは使えなかった

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

Lottieにエフェクトは対応していない

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

Lottie使用時の注意点

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

AfterEffectsで何かアニメーションを作ってもLottieを通すとうまく動かない場合がある。これはCreating Lottie animationsを作る前に一度翻訳して目を通しておいてほしいところ。

せっかく作ったのに動かない・・・なんてことになりかねない。詳しくはドキュメントを見ておいてほしいんだけど、さらっと気になるものは記載しておきます。

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

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

シェイプのアニメーションは使えるからまあありだね

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

TrimPaths

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

せっかく作ったのに動かないのは悲しいからね

複雑にしないことが大事

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

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

Lottie

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

WebページにAfterEffectsで作成したアニメーションを埋め込む

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

LottieでExpandをクリック

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

Lottieの埋め込みコードが表示される

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

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

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

Lottieでコードをコピーする

これでブラウザから見てみると・・・

ブラウザでLottieの動きを確かめる

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

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

上のやつはsrcでasset指定して表示しているけど、実際に使う時には手元に置いて使いたいっていうときも多いんじゃなかろうか・・・とも思ったので、手元に置いてやってみる。

JSONファイルをHTMLファイルの中で使ってみる

HTMLファイルだけでcdnでいいやとか思ってやったらCORS起きたので、Expressで動かすことにする。

Expressで試してみる

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

ExpressでLottieを動かしてみた

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

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

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

LottieのEdit Animiationから動画を編集することができる

色とかフレームレートとか変えられる

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

レイヤーを表示してくれて、別々の色にすることもできたりする

画面から調整できるのは便利だね

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

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

LottieはAfterEffectsのエフェクトを使ったアニメーションを使うことはできないようだけど、シェイプを使ったアニメーションをアプリに組み込むならかなり良いですね。

AfterEffects使えるなら簡単にアニメーション組み込めそうだ

Bodymobinで使ったJSONならファイルサイズも他の手段よりも良い場合が多いでしょう。

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

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

LottieでAfterEffectsアニメーションを組み込むまとめ

LottieっていうAfterEffectsで作ったものをJSONにしてコードに組み込んでアプリで動かすことのできるものを使ってみたけど、これ結構すごいですね。

アニメーション作るのってCSSやJavaScriptで作ろうとすると相当しんどいし、動画だと重いしとかいろいろ考えてしまうけど、こういうものがあるなら割と開発の際の選択肢になるんじゃないだろうか。

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

似たライブラリもあるよ

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