作成した動画を簡単にコードにしてアプリやWebサイトに組み込めたら便利ですよね。そこで今回はAfterEffectsで作成したアニメーションをコードにしてみるっていうことをやっていきたい。使うのは「Lottie」っていうAfterEffectsで作成したアニメーションを描画してくれるライブラリ。airbnbがやっているものです。
これが結構すごくてAfterEffectsで作ったアニメーションをJSONに変換してWebブラウザでそのアニメーションを動かすことができる。
この記事で行うこと
- AfterEffectsで作成したアニメーションをLottieで書き出す
- 書き出したアニメーションをWebブラウザで動かす
この記事ではこのLottieで動画を書き出して、Webで使うところまでやっていこうと思う。（使うのはAfterEffectsだけでillustratorとかは使わないでやるよ）
Lottieとは
LottieはAndroid, iOS, Web, React Native, Windowsのアニメーションライブラリ。AfterEffectsで作成したアニメーションをJSONで書き出して、そのJSONをアプリケーションで使うことでアニメーションを組み込むことができる。
ざっくりした流れでいうとこうなるだろうか。
- AfterEffectsで動画を作成
- AfterEffectsでJSONに書き出し
- 書き出したJSONをアプリケーションに組み込む
結構簡単そうですよね。特に動画を作ってからはJSONの埋め込むコードもコピペで済んでしまったりするからかなり開発側としては楽。ライブラリは結構対応しているみたいでGithubちょっと見てみると、Unofficialのものもいくつかありますね。
Official Libraries
Unofficial Libraries
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.
後でbodymovinで書き出すんだけど、とりあえず適当にAfterEffectsでアニメーションを作る。作成したら[Windows→Extensions]と進んでBodymovinと進もう。
ここで書き出すコンポジションや保存先、設定をすることができる。
歯車のマークから設定をすることができるんだけど、自分が使っているレイヤーに応じて選択を変更しよう。マスク使う場合って結構多そうだからHiddenなんかはチェックが入ることよくありそう。
設定が終わったら[Render]からJSONを書き出そう。
書き出すとjsonができますね。中覗くとこんな感じでなんか凄い。
AfterEffectsで作成したJSONファイルをLottieでプレビューしてみよう
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ファイルはモバイル製品用にできるだけコンパクトで小さい必要があることを常に念頭に置く必要があります。たとえば、できる限り子育てを使用します。同様のレイヤーで同じキーフレームを複製すると、余分なコードが追加されます。どうしても必要な場合にのみ、パスキーフレームアニメーションを使用してください。
ついAfterEffects使うといろいろアニメーションを加えたくなっちゃうけど、結構難しいですね。キーフレームをそこまで多用するのはよくなさそうだけど、wiggleとか使っちゃいたいよなあ笑、まあやりたかったらパフォーマンスと相談ですね。
WebページにAfterEffectsで作成したアニメーションを埋め込む
JSONを書き出して、それがアニメーションとなることは確認できたからこれをWebサイトに埋め込んでみよう。実はExpandをクリックしてHandoffからEmbedを見ると埋め込みコードが表示される。
これをそのまま使えば、Webページに表示できますね。ペンのマークをクリックすると、ちょっとした編集もすることができてコードのコピーもすることができる。
サイズを変更したり、速度変えたりループ設定をチェック入れるだけでできたりして楽ですね。ただ横幅や縦幅なんかはコードを見てみると、styleで調整しているだけですね。あくまでcssの調整ってところみたい。
HTMLを作って貼り付けてみる
コードをコピーするだけでできると思うから、実際に動くかどうか確かめてみよう。ただHTMLファイル作るだけだけど。。。bodyタグの中にコピーしたコードを貼り付ける。
これでブラウザから見てみると・・・
JSONファイルをローカルに置いて表示させる
上のやつはsrcでasset指定して表示しているけど、実際に使う時には手元に置いて使いたいっていうときも多いんじゃなかろうか・・・とも思ったので、手元に置いてやってみる。
HTMLファイルだけでcdnでいいやとか思ってやったらCORS起きたので、Expressで動かすことにする。
Githubを見つつこれで動くやろ的なノリで動かしてみます。
ローカルでJSONファイル持っていても動かすことできましたね。アニメーション動くの気持ちええな。
Edit Animationから動画を編集できる
Edit Animiationから動画を編集することができるんだけど、これ結構すごいですね。色とかフレームレートとか変えられる。
しかもレイヤーを表示してくれて、別々の色にすることもできたりする。AfterEffectsで作ったものがJSONになっているからだろうかAfterEffectsのレイヤー感覚で色の変更ができる。
ちょっと色変えたかったらもう一度AfterEffectsで修正してJSONに変換しないといけないなんてことはこれ使えばないですね。AfterEffects使えなくてもこれだったら誰でも使えるだろうし、色合いは多少他の人に任せることもできそう。
LottieはAfterEffectsのシェイプのアニメーション組み込むなら神
LottieはAfterEffectsのエフェクトを使ったアニメーションを使うことはできないようだけど、シェイプを使ったアニメーションをアプリに組み込むならかなり良いですね。
Bodymobinで使ったJSONならファイルサイズも他の手段よりも良い場合が多いでしょう。
- GIFはbodymovinJSONの2倍以上のサイズであり、固定サイズでレンダリングされるため、大規模で高密度の画面に合わせて拡大することはできません。
- Pngシーケンスは、ファイルサイズがbodymovin jsonのサイズの30〜50倍であることが多く、スケールアップできないという点でgifよりもさらに劣っています。
それにシェイプアニメーションならいろいろ作れるから結構いける気がする。シェイプだけでも良い感じのアニメーションなんてAfterEffecterの君なら余裕だろう。
LottieでAfterEffectsアニメーションを組み込むまとめ
LottieっていうAfterEffectsで作ったものをJSONにしてコードに組み込んでアプリで動かすことのできるものを使ってみたけど、これ結構すごいですね。
アニメーション作るのってCSSやJavaScriptで作ろうとすると相当しんどいし、動画だと重いしとかいろいろ考えてしまうけど、こういうものがあるなら割と開発の際の選択肢になるんじゃないだろうか。
AfterEffectsの機能をフルに使ったものは作れないっていうところはあるけど、シェイプ自在にいじれれば結構なアニメーション作れるでしょう。素敵なアニメーションを作ってアプリに組み込んじゃってください。
似たライブラリもあるよ
ちなみに似たようなものでこんなものもあったりするから、同じようなことをやりたかったらみてみるといいかもしれないです。
