Lottieでアプリにアニメーションを組み込む話(デザイナー編)

2018年6月2日 Kazuyuki Motoyama @kudakurage

20180602175655

最近ではWebサービスやスマートフォンアプリにおいてもアニメーションの重要性は認識されつつあります。

機能としてのアニメーションは「FacebookアプリのLoading Placeholder」や「TwitterアプリのLikeボタンのフィードバック」のように何が起こっている(起きた)のかをわかりやすく伝えたり、「17 Live(イチナナ)」や「CASH」のSplashのようにロゴやブランドのイメージを強く印象づけたり、楽しませたりと使い方は様々です。

アニメーションをWebやアプリに組み込む方法は様々ありますが、今回は「Lottie」を使ってアプリにアニメーションを組み込む方法やメリットなどについて書こうと思います。

とはいえ今回はデザイナー編でして、AfterEffectsで簡単なアニメーションを作ってLottie用にデータを書き出すというところまでをご紹介します。

最後にアニメーションとデザインについても簡単にまとめてみたいと思います。

ちなみに私は最近Motion Designについてすごく興味を持っているのですが、それについてはまた別の機会に…。

iOS実装編はこちら↓

Lottieでアプリにアニメーションを組み込む話(iOSプログラマー編)

単にアプリにアニメーションを組み込むだけでなく、アニメーション自体を動的に変更する方法なども紹介しています。

INDEX

Lottieとは

20180602180750

2017年2月にAirbnbが発表した、Web・iOS・Android・React Nativeなどでアニメーションを組み込むためのライブラリです。

きれいなアニメーションをリアルタイムにレンダリングでき、しかも軽量に、とっても簡単に実装することが可能で、アニメーションを作成するデザイナーとフロントエンジニアの連携をスムーズにするという意味でも大変便利なツールです。

リリースから1年以上経っていますが積極的にアップデートされていて、リリース当初にサポートしていなかったけれどアップデートで使えるようになった部分もありますので、そのあたりも一部触れながらご紹介します。 https://airbnb.design/lottie/

Lottieのメリット

20180602163056

アニメーションを組み込む方法としてはGIFやPNGによるアニメーションなども考えられますが、それぞれアニメーションのコマ数分のイメージが必要となるため、ファイルサイズが重くなりがちです。

ファイルサイズを軽くしようとコマ数(フレームレート)を減らそうとすると、その分なめらかなアニメーションからは程遠くなっていきますしね。

その点、LottieはリソースファイルとしてJSONデータを使用しますので、大きくても数十KB程度のファイルサイズで、なめらかなアニメーションを描画することができます。

厳密にはライブラリのファイルサイズもありますが、それでもGIFアニなどと比べればかなり小さくなります。

軽くて綺麗という意味ではSVGアニメーションも同様ですが、複雑なSVGアニメーションを作成・実装するのは手間が多かったり、難しかったりします。

LottieはAftterEffectsを使用して作成したアニメーションを簡単なコードで組み込むことが可能です。Javascriptライブラリなら、ライブラリを読み込んで1lineのscriptもしくはHTMLを書くだけでアニメーションを描画することができます。

Illustratorで元データを作る

今回はロゴやLoadingインジケーターなどのイラストのアニメーションを作ることを前提として、Adobe Illustratorを使ってアニメーションさせるイラストデータを作成するところからはじめます。

20180602163344

まずは動かしたいイラストを描きます。

アニメーションとして書き出したい画像サイズでアートボードを作り、イラストを描いていきます。

最初は非表示で途中から表示させる予定のパーツなども描いておき、大体の位置(そのパーツのアニメーションのStart位置もしくはEnd位置)に配置しておきます。

レイヤー分け

AftterEffectsはIllustratorの.aiファイルをそのまま読み込むことができます。その際、IllustratorでのレイヤーがそのままAftterEffectsのレイヤーになるため、動かしたいパーツごとにIllustrator上でレイヤーを分けておくのが楽です。

またレイヤー名も引き継がれるので、わかりやすいレイヤー名に書き換えておくほうが良いでしょう。

20180602163754

これで元データの準備は完了です。

テキストを動的に変化させたいなどの特殊な場合を除いて、テキストはOutline化(Shape化)させておきましょう。

元データをAfterEffectsに取り込む

AfterEffectsを起動してAIファイルをAfterEffectsで開きます。

20180602163834 Import KindをCompositionに、Footage DimensionsをLayer SizeにしてOKボタンを押します。

20180602163848 すると、AIファイルがCompositionとして取り込まれ、各レイヤーが作成されていることがわかります。

20180602163903 アニメーション全体の時間やフレームレート、背景色を変えたい場合はComposition Settingsから変更しておきます。

AIデータをShapeに変換

このままアニメーションを作っていくことももちろん可能ですが、AIデータのまま作っていくと最終的にそのパーツは画像として書き出されることになります。

今回はパスデータのみのイラストなので、Shapeとして扱うようにしたほうがファイルサイズも小さくなりますし、拡大しても綺麗に表示することができます。

20180602164108

なので、レイヤーのAIデータ(Vector Layer)をShapeに変換します。

レイヤーをすべて選択して「Menu > Layer > Create > Create Shapes from Vector Layer」でShapeレイヤーが作成されます。

Vector Layerのほうは非表示になり残っていますが、レイヤーを視やすくするためにも消してしまいましょう。

20180602171051

これで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に取り込んだときに、意図していない表示になることがあります。

20180602164602

AffterEffects上でこれを直す方法はいくつかあります。

Merge ModeをExclude Intersectionsに変更するという方法でも見た目上なおりますが、Merge ModeのExclude IntersectionsはLottieがサポートしていないため使用できません。

(Merge Mode:Intersectなどは対応しているみたい?です。ただこの辺りは動作が怪しいので推奨しない)

20180602164712

この場合は、各PathのDirectionを変更することで修正し対応しましょう。

20180602164916

shadowや少しでも特殊な機能は使えないと思ったほうが良い

AffterEffectsではLayer StylesによってDropshadowなどの効果をつけることができますが、LottieはLayer Stylesをサポートしていません。

少し特殊な機能になってくるとサポートしていないことが多いので、基本的には使えない感じだと思っておいと良いと思います。

ちなみに最新の細かいサポート状況は↓にプラットフォーム別に細かく一覧で載ってます!

Supported After Effects Features

アニメーションを書き出す

AffterEffectsでアニメーションが作成できたら、Lottieで読み込めるJSON形式に書き出します。

Bodymovinプラグインのインストール

Lottieで読み込めるJSONを書き出すためには、Bodymovinというプラグインを使用します。

20180602164959

まずはLottieのgithubページからZipファイルをダウンロードしておきます。

airbnb/lottie-web: Render After Effects animations natively on Web, Android and iOS, and React Native.

20180602165018 ダウンロードした「lottie-web-master.zip」を解凍して「lottie-web-master > build > extension」の中にある「bodymovin.zxp」がそうです。

20180602165209 zxpファイルはZXPインストーラーが必要なので、ない場合はダウンロードしてインストールしておきましょう。 https://aescripts.com/learn/zxp-installer/

ZXPインストーラーでbodymovin.zxpを開けばプラグインがインストールできます。

JSONで書き出す

AffterEffectsで「Menu > Window > Extensions > Bodymovin」を選択し、プラグインを立ち上げます。

書き出したいCompositionを選択して、書き出したいディレクトリを設定したら「Render」ボタンを押して書き出します。

20180602165340

これでdata.jsonなどのファイルが書き出されます。

イメージリソースが含まれている場合は、別途imageフォルダが作成され、その中に画像も書き出されます。

ココまででフロントの実装前までの作業が完了です。(この後はiOSやWebにJavascriptライブラリなどで組み込む)

この後の作業についてはiOSプログラマー編で!

http://www.tokoro.me/posts/lottie-ios-1/

実際に作ったサンプル

Maskやpre-compositionを使ったサンプル

Lottie(Javacript): [http://kudakurage.com/test/lottie/sample1/]

20180602170336

単色のサンプル

Lottie(Javacript): [http://kudakurage.com/test/lottie/sample2/]

20180602170034

AIデータをShapeデータに変換しなかった場合のサンプル

(リソースが画像として書き出される)

Lottie(Javacript): [http://kudakurage.com/test/lottie/sample3/]

20180602170833

アニメーション内の画像を切り替えるサンプル

Lottie(Javacript): [http://kudakurage.com/test/lottie/sample4/]

20180607104704

JSONデータの確認方法

書き出したJSONデータの確認は、レポジトリからダウンロードしたjavascriptライブラリやdemo用のhtmlなどを改変することで手元でも確認できると思います。

20180602165518

もっと簡単に確認できる方法としてはLottieFilesというサイトで、JSONをドラッグ・アンド・ドロップでアップロードするだけでも確認可能です。

簡単に他人が辿れるページに公開されるわけではないですが、サーバーにアップロードするのでそれを承知の上で利用すると良いと思います。

アップロード後は固有のURLでシェアすることが可能です。

透過GIFアニで書き出す方法

番外編として、透過GIFアニメーションとして書き出す方法についてもご紹介します。

20180602165631

AffterEffectsで「Menu > Composition > Add to Render Queue」を選択し、Render Queueを追加します。

追加されたRender QueueのOutput Moduleの「Lossless」の部分をクリックして、Output Module Settingsウィンドウを開きます。

20180602165644

Formatを「QuickTime」にします。

20180602165700

Video OutputのChannelsを「RGB + Alpha」にします。

20180602165712

Video OutputのColorを「Straight (Unmatted)」にします。

20180602165721

音は不要なので「Audio Output Off」にしておきます。

これで「OK」をクリックして、Renderボタンをクリックしてmovファイルを書き出します。

次にこれをAdobe Photoshopで開きます。透過movとして読み込まれるので、Web用に保存でGIFアニメーションとして書き出せば完了です。

アニメーションとデザイン

最後に少しだけアニメーションとデザインについて書いてみようと思います。

デザイン的なアニメーションは単なる賑やかしではなく、デザイン的な機能を持っています。

たとえば、以下のような機能です。

例えば、ローディングなどの待ち時間が発生することは、現状のアプリやサービスだとよくあることだと思います。

この時に画面の変化がないと「正しく動いているだろうか」と不安になってしまいます。

流石に何も表示しないということはなかったとしても、単純なloading indicatorを表示しているだけだと、今は何が起こっているのか?何に待たされているのか?などストレスを感じかねません。

そこでアニメーションで今何が進捗しているのかを伝えることで、テキストを読まなくてもひと目で状況を把握できますし、また楽しげなアニメーションはアプリ・サービスへの期待感を感じさせることができる。

恋人とのマッチングのために待たされているなら、以下のようにデータを送っているような雰囲気を楽しげに演出するアニメーションが良いかもしれません。

20180602170034

別の例では、アカウント登録画面でもアニメーションは良い影響を与えられるかもしれません。

通常ユーザーはそのアプリ・サービスを何かの目的を持って利用したいと考えており、ユーザー登録を目的にすることはありません。

よってアプリ開始時やコアな機能の前にユーザー登録を求めるのは、ユーザーにとってハードルとなります。

そこで登録画面等をアニメーションによって楽しげな雰囲気にしたり、期待感をもたせることで、事務的な手続きを乗り越えるモチベーションを与えることができるかもしれません。

これらはアニメーションの役割のほんの一部ですが、このようにアニメーションはロゴのブランディングイメージなどのためだけでなく、様々なデザイン的機能として働きます。

今では、それを効果的に使っているアプリも多くなってきたので、いろいろと見て考えてみると面白いと思います。

Latest Entries