これは「BASE Advent Calendar」16日目の記事です。
こんにちは、BASEのDesign Groupに所属している吉岡です。
先日BASE BANK株式会社初めてのプロダクトとして即時に資金調達ができる金融サービス「YELL BANK」をリリースしました。個人的にお金にまつわるデザインは初めての経験ということもあり、難しかったのですが、LPではAfterEffectsで作ったアニメーションをCanvasやSVGアニメーションにできるプラグインを使って表現しました。
今回はせっかくのアドベントカレンダーなので、下記の様なHolidayAnimationを書き出してみようと思います。
環境設定
Bodymovin をインストール creative.adobe.com
プラグインインストールのためのzxp-installerもダウンロードします aescripts.com
Lottieアニメーションの Bodymovin プラグインをダウンロードして、インストールする github.com
bodymovinを解凍してzxpファイルをzxpインストーラーにドラッグしてインストールします。
AfterEffectsに拡張が入っているか確認する
- 問題なくインストールできれば、AfterEffectsのウィンドウ/拡張機能にBodyMovinが入っているはずです。
XDでデザインを作る
今回はテキストアニメーションを描いていこうと思うので、Adobe XDでまず描きたいテキストを配置します。この際にアートボードサイズが最終ブラウザに書き出すサイズになります。
テキストを配置したら、ファイル > 書き出し > After Effectsで書き出します（最近できた機能です。illustratorよりサクッとAfter Effectsに書き出せます。)
After Effectsでアニメーションを作る
アニメーションを作っていきますが、Lottieを使う注意点を先に記載します。 - After Effectsのエフェクトは使えないと思ってていい - Expressionも書き出さないと使えない - グラデーション効かない
といった具合です。パスアニメーションができるよ、程度の認識で良いかもしれません。After Effectsで使える機能はこちらで確認できます。
前提が終わったところで...アニメーションを作っていきます。
まずはXDで作っていたテキストを、アウトライン化してシェイプとして配置しておきます。
今回は筆記体テキストが流れていく様なアニメーションを作りたいと思うので、パスに合わせてモーションが動くアニメーションを作っていきます。好きなシェイプを作り、テキストをなぞる様に位置のkeyframeを打っていきます。トランスフォーム > 自動方向でパスに沿って自動方向に設定します。こうすることでパスに沿ってシェイプが回転します。ここからは好きな様にパスを変形させてkeyframeを打っていきます。
パスに添わせたアニメーション部分はこんな感じです。
アルファマットでテキストを表示する
パスに添わせたアニメーションに合わせて、テキストを表示するためのシェイプもパスkeyframeを描きます。
テキストにアルファマットでマスクした状態にします。
これでアニメーションは完成です。
JSONに書き出す
アニメーションが完成したら、JSONファイルに書き出していきます。 ウィンドウ > 拡張機能 > Bodymovinを選びます。
selectedでコンポジションを、Destination Folderに書き出し先ディレクトリを選びます
settingsでは今回はこの設定で書き出します。
- Glyphs(もしフォントが残っていてもシェイプにしてくれます)
- Hidden (マスクなどを使っていると必要です)
- Demo (HTMLに雑にしてくれるので確認が楽でおすすめです)
他にも、画像をJSONにincludeしてくれるAssetsの項目もあるので適宜必要あれば設定します。
確認してみる
書き出しフォルダにindex.htmlが生成されるので確認してみると...
作った通りのアニメーションが表示できています！
中身がどうなっているのかというと...
AfterEffectsのレイヤーがちゃんとSVGのpathになって、transformされるのがわかります。
Lottieを使ってみて
グラフィックだけでもholidayっぽさはあるのですが、アニメーションをつけることでより情緒的な抑揚をつけることができるので、デザイン表現が簡単に広げられるLottieはとても使いやすいプラグインだと思います。 今までYoutubeなどで上げていた動画より、サクサク動きます！ これを機に、アニメーションまでデザインしてみては...!
明日はAndroid エンジニアの木下さんです！
