Lottieでアプリにアニメーションを組み込む話（デザイナー編）
最近ではWebサービスやスマートフォンアプリにおいてもアニメーションの重要性は認識されつつあります。 機能としてのアニメーションは「FacebookアプリのLoading Placeholder」や「TwitterアプリのLikeボタンのフィードバック」のように何が起こっている（起きた）のかをわかりやすく伝えたり、「17 Live（イチナナ）」や「CASH」のSplashのようにロゴやブランドのイメージを強く印象づけたり、楽しませたりと使い方は様々です。
アニメーションをWebやアプリに組み込む方法は様々ありますが、今回は「Lottie」を使ってアプリにアニメーションを組み込む方法やメリットなどについて書こうと思います。
とはいえ今回はデザイナー編でして、AfterEffectsで簡単なアニメーションを作ってLottie用にデータを書き出すというところまでをご紹介します。
最後にアニメーションとデザインについても簡単にまとめてみたいと思います。
ちなみに私は最近Motion Designについてすごく興味を持っているのですが、それについてはまた別の機会に…。
iOS実装編はこちら↓
単にアプリにアニメーションを組み込むだけでなく、アニメーション自体を動的に変更する方法なども紹介しています。 www.tokoro.me
INDEX
- INDEX
- Lottieとは
- Lottieのメリット
- Illustratorで元データを作る
- 元データをAfterEffectsに取り込む
- AIデータをShapeに変換
- Lottieで動かせるアニメーションを作るときのポイント
- アニメーションを書き出す
- 透過GIFアニで書き出す方法
- アニメーションとデザイン
Lottieとは
2017年2月にAirbnbが発表した、Web・iOS・Android・React Nativeなどでアニメーションを組み込むためのライブラリです。
きれいなアニメーションをリアルタイムにレンダリングでき、しかも軽量に、とっても簡単に実装することが可能で、アニメーションを作成するデザイナーとフロントエンジニアの連携をスムーズにするという意味でも大変便利なツールです。
リリースから１年以上経っていますが積極的にアップデートされていて、リリース当初にサポートしていなかったけれどアップデートで使えるようになった部分もありますので、そのあたりも一部触れながらご紹介します。
Lottieのメリット
アニメーションを組み込む方法としてはGIFやPNGによるアニメーションなども考えられますが、それぞれアニメーションのコマ数分のイメージが必要となるため、ファイルサイズが重くなりがちです。 ファイルサイズを軽くしようとコマ数（フレームレート）を減らそうとすると、その分なめらかなアニメーションからは程遠くなっていきますしね。
その点、LottieはリソースファイルとしてJSONデータを使用しますので、大きくても数十KB程度のファイルサイズで、なめらかなアニメーションを描画することができます。 厳密にはライブラリのファイルサイズもありますが、それでもGIFアニなどと比べればかなり小さくなります。
軽くて綺麗という意味ではSVGアニメーションも同様ですが、複雑なSVGアニメーションを作成・実装するのは手間が多かったり、難しかったりします。
LottieはAftterEffectsを使用して作成したアニメーションを簡単なコードで組み込むことが可能です。Javascriptライブラリなら、ライブラリを読み込んで1lineのscriptもしくはHTMLを書くだけでアニメーションを描画することができます。
Illustratorで元データを作る
今回はロゴやLoadingインジケーターなどのイラストのアニメーションを作ることを前提として、Adobe Illustratorを使ってアニメーションさせるイラストデータを作成するところからはじめます。
まずは動かしたいイラストを描きます。 アニメーションとして書き出したい画像サイズでアートボードを作り、イラストを描いていきます。 最初は非表示で途中から表示させる予定のパーツなども描いておき、大体の位置（そのパーツのアニメーションのStart位置もしくはEnd位置）に配置しておきます。
レイヤー分け
AftterEffectsはIllustratorの.aiファイルをそのまま読み込むことができます。その際、IllustratorでのレイヤーがそのままAftterEffectsのレイヤーになるため、動かしたいパーツごとにIllustrator上でレイヤーを分けておくのが楽です。 またレイヤー名も引き継がれるので、わかりやすいレイヤー名に書き換えておくほうが良いでしょう。
これで元データの準備は完了です。 テキストを動的に変化させたいなどの特殊な場合を除いて、テキストはOutline化（Shape化）させておきましょう。
元データをAfterEffectsに取り込む
AfterEffectsを起動してAIファイルをAfterEffectsで開きます。
Import KindをCompositionに、Footage DimensionsをLayer SizeにしてOKボタンを押します。
すると、AIファイルがCompositionとして取り込まれ、各レイヤーが作成されていることがわかります。
アニメーション全体の時間やフレームレート、背景色を変えたい場合はComposition Settingsから変更しておきます。
AIデータをShapeに変換
このままアニメーションを作っていくことももちろん可能ですが、AIデータのまま作っていくと最終的にそのパーツは画像として書き出されることになります。
今回はパスデータのみのイラストなので、Shapeとして扱うようにしたほうがファイルサイズも小さくなりますし、拡大しても綺麗に表示することができます。
なので、レイヤーのAIデータ（Vector Layer）をShapeに変換します。 レイヤーをすべて選択して「Menu > Layer > Create > Create Shapes from Vector Layer」でShapeレイヤーが作成されます。 Vector Layerのほうは非表示になり残っていますが、レイヤーを視やすくするためにも消してしまいましょう。
これでIllustratorからの元データの取り込みは完了で、後はアニメーションを作っていきます。
Lottieで動かせるアニメーションを作るときのポイント
Lottieを使うにあたっていくつか気をつけるポイントや、リリース当初はできなかったがアップデートによって対応した部分があります。
MaskやText・Imageのアニメーション、pre-compositionもOK
LottieはShapeだけでなくTextやImage、pre-compositionにも対応しています。リリース当初はImageやpre-compositionには対応していなかったようですが、現在はDocumentにも明記されており、実際に動くことを確認しています。
もちろんMaskにも対応しているので、sampleのように円の中からひょこっと顔を出すなどのアニメーションが可能です。
PathのMerge Modeには注意
複数のパスによって構成された複雑なShapeはAffterEffectsに取り込んだときに、意図していない表示になることがあります。
AffterEffects上でこれを直す方法はいくつかあります。 Merge ModeをExclude Intersectionsに変更するという方法でも見た目上なおりますが、Merge ModeのExclude IntersectionsはLottieがサポートしていないため使用できません。 （Merge Mode：Intersectなどは対応しているみたい？です。ただこの辺りは動作が怪しいので推奨しない）
この場合は、各PathのDirectionを変更することで修正し対応しましょう。
shadowや少しでも特殊な機能は使えないと思ったほうが良い
AffterEffectsではLayer StylesによってDropshadowなどの効果をつけることができますが、LottieはLayer Stylesをサポートしていません。
少し特殊な機能になってくるとサポートしていないことが多いので、基本的には使えない感じだと思っておいと良いと思います。
ちなみに最新の細かいサポート状況は↓にプラットフォーム別に細かく一覧で載ってます！
http://airbnb.io/lottie/supported-features.html
アニメーションを書き出す
AffterEffectsでアニメーションが作成できたら、Lottieで読み込めるJSON形式に書き出します。
Bodymovinプラグインのインストール
Lottieで読み込めるJSONを書き出すためには、Bodymovinというプラグインを使用します。
まずはLottieのgithubページからZipファイルをダウンロードしておきます。 github.com
ダウンロードした「lottie-web-master.zip」を解凍して「lottie-web-master > build > extension」の中にある「bodymovin.zxp」がそうです。
zxpファイルはZXPインストーラーが必要なので、ない場合はダウンロードしてインストールしておきましょう。
ZXP Installer - aescripts + aeplugins - aescripts.com
ZXPインストーラーでbodymovin.zxpを開けばプラグインがインストールできます。
JSONで書き出す
AffterEffectsで「Menu > Window > Extensions > Bodymovin」を選択し、プラグインを立ち上げます。
書き出したいCompositionを選択して、書き出したいディレクトリを設定したら「Render」ボタンを押して書き出します。
これでdata.jsonなどのファイルが書き出されます。 イメージリソースが含まれている場合は、別途imageフォルダが作成され、その中に画像も書き出されます。
ココまででフロントの実装前までの作業が完了です。（この後はiOSやWebにJavascriptライブラリなどで組み込む）
この後の作業については別の記事で！
2018.06.07 追記
実際に作ったサンプル
Maskやpre-compositionを使ったサンプル
Lottie（Javacript）： http://kudakurage.com/test/lottie/sample1/
単色のサンプル
Lottie（Javacript）： http://kudakurage.com/test/lottie/sample2/
AIデータをShapeデータに変換しなかった場合のサンプル
（リソースが画像として書き出される）
Lottie（Javacript）： http://kudakurage.com/test/lottie/sample3/
アニメーション内の画像を切り替えるサンプル
Lottie（Javacript）： http://kudakurage.com/test/lottie/sample4/
JSONデータの確認方法
書き出したJSONデータの確認は、レポジトリからダウンロードしたjavascriptライブラリやdemo用のhtmlなどを改変することで手元でも確認できると思います。
もっと簡単に確認できる方法としてはLottieFilesというサイトで、JSONをドラッグ・アンド・ドロップでアップロードするだけでも確認可能です。 簡単に他人が辿れるページに公開されるわけではないですが、サーバーにアップロードするのでそれを承知の上で利用すると良いと思います。 アップロード後は固有のURLでシェアすることが可能です。
透過GIFアニで書き出す方法
番外編として、透過GIFアニメーションとして書き出す方法についてもご紹介します。
AffterEffectsで「Menu > Composition > Add to Render Queue」を選択し、Render Queueを追加します。 追加されたRender QueueのOutput Moduleの「Lossless」の部分をクリックして、Output Module Settingsウィンドウを開きます。
Formatを「QuickTime」にします。
Video OutputのChannelsを「RGB + Alpha」にします。
Video OutputのColorを「Straight (Unmatted)」にします。
音は不要なので「Audio Output Off」にしておきます。 これで「OK」をクリックして、Renderボタンをクリックしてmovファイルを書き出します。
次にこれをAdobe Photoshopで開きます。透過movとして読み込まれるので、Web用に保存でGIFアニメーションとして書き出せば完了です。
アニメーションとデザイン
最後に少しだけアニメーションとデザインについて書いてみようと思います。
デザイン的なアニメーションは単なる賑やかしではなく、デザイン的な機能を持っています。 たとえば、以下のような機能です。
- オブジェクトが動かせること、どのように動かせるかがわかる
- 待感・没入感を高めユーザーのストレスを軽減する
- 状況の（途中の）変化を見せることで、何が起こったのかをわかりやすくする・変化の見落としを防ぐ
例えば、ローディングなどの待ち時間が発生することは、現状のアプリやサービスだとよくあることだと思います。 この時に画面の変化がないと「正しく動いているだろうか」と不安になってしまいます。 流石に何も表示しないということはなかったとしても、単純なloading indicatorを表示しているだけだと、今は何が起こっているのか？何に待たされているのか？などストレスを感じかねません。
そこでアニメーションで今何が進捗しているのかを伝えることで、テキストを読まなくてもひと目で状況を把握できますし、また楽しげなアニメーションはアプリ・サービスへの期待感を感じさせることができる。
恋人とのマッチングのために待たされているなら、以下のようにデータを送っているような雰囲気を楽しげに演出するアニメーションが良いかもしれません。
別の例では、アカウント登録画面でもアニメーションは良い影響を与えられるかもしれません。 通常ユーザーはそのアプリ・サービスを何かの目的を持って利用したいと考えており、ユーザー登録を目的にすることはありません。 よってアプリ開始時やコアな機能の前にユーザー登録を求めるのは、ユーザーにとってハードルとなります。
そこで登録画面等をアニメーションによって楽しげな雰囲気にしたり、期待感をもたせることで、事務的な手続きを乗り越えるモチベーションを与えることができるかもしれません。
これらはアニメーションの役割のほんの一部ですが、このようにアニメーションはロゴのブランディングイメージなどのためだけでなく、様々なデザイン的機能として働きます。
今では、それを効果的に使っているアプリも多くなってきたので、いろいろと見て考えてみると面白いと思います。
