Lottieで使えるアニメーションを作るワークフロー
アプリやWebで使うためのアニメーションって、簡単なものだとCSSやGIF画像を貼り付けることで対応できますが、パフォーマンスや実装を考えるとやはり Lottie が必要。とくに再生を制御する場合は必須になってきます。
このアニメーションを作る方法がけっこう面倒なので、手順をまとめます。
必要なツール
- Lottie
- Airbnb が開発した JSON をアニメーションとして再生するライブラリ
- iOS / Android / Web など、様々なプラットフォームで動きます
- Expo や Flutter 用のライブラリもあり、アニメーションを再生するためのデファクトです
- Figma
- アニメーションの基となるデザイン作成
- AEUX
- Figma から After Effect にデザインを転送するツール
- After Effect
- なくてもできる方法を模索したけど、やっぱり必要...
- キーフレームアニメーションをつくる
- LottieFiles プラグイン
- アニメーションをエクスポートする
- BodyMovin
- Lottie 用にJSONを書き出すプラグイン。LottieFilesプラグインも内部的にこちらに依存している。LottieFiles を利用する場合はなくてもOK。
- Key Cloner
- 複数のレイヤーのキーフレームをまとめてコピーできるツール。必須ではないが、ループのアニメーションを作る上では非常に便利。
- LottieFiles Figma Plugin
- 書き出した JSON を Figma に GIF として読み込むことができるので、プロトタイピングに最適。
Figma
まずはアニメーションしたいデザインを Figma で作ります。
AEUX は Sketch にも対応しているので、Sketch を使用してもOK。
Illustrator は微妙です。
AEUX
AEUX は、Figma か Sketch で作成されたデータをうまく After Effect に取り込むために必要なプラグインです。
Illustrator で作成したデータを After Effect に読み込んでアニメーションさせるためには、シェイプレイヤーに変換する必要がありますが、その時に余分なデータが多く生成されてしまい、アニメーション作成の邪魔となります。特にマージパスが入っていると Lottie で再生できないので注意です。
また、最終的な Lottie 用ファイルにも、余分なデータが含まれることなるので、実装した時にパフォーマンスにも影響してしまう。この問題を解決するのが AEUX となります。
Figma にインストール
AEUX は現時点では Figma の公式プラグインとして公開されていないので、こちらからダウンロードしたファイルを Plugins > Development > New Plugin... から自分でインストールする必要があります。
プラグインファイルはインストールした後も移動させず、削除もしないでください。
AfterEffects にもインストール
AfterEffects にも AEUX のプラグインをインストールしておく必要があります。ZXP Installer を使ってインストールしてください。
そして AfterEffects が起動した状態にしておきます。
プラグインファイルはインストールした後も移動させず、削除もしないでください。
起動
Figma で Command + / として、aeux を検索したら起動するはず。
転送したいデザインのフレームを選択して、Send selection to Ae を選択。
これで、新規コンポジションとしてデザインが転送できているはず。
ちなみに、Overloadというツールを使えば Illustrator でも同じようなことができそうです。未検証ですし、現時点では 6,600 円かかります。
After Effects
このようなアニメーションを作成するアプリケーションとしては大げさ過ぎるので、あまり使いたくなかったですが、やはりデファクトは AE になってしまうみたい。Haiku とか他のサービスもあるけども結局有料だし。
ここでは AE の使い方は解説しませんが、根気のいる作業になります :)
アニメーションを作成する前に、必ず こちらのサポートされている機能 を確認しましょう。
エフェクトやマージパスは使えないので注意です。
便利なツール Key Cloner も使うと良いかもしれません。ループアニメーションは特に。スクリプトのインストール方法は こちらの記事 が参考になりました。
LottieFiles
LottieFiles は複合的なウェブサービスです。
- After Effect から Lottie 用の JSON を書き出すプラグイン
- Webプレイヤーで確認できる URL を発行してくれる
- アニメーションを確認するためのモバイルアプリ
- マーケットプレイスでアニメーションの購入
等ができたりします。
ここでは一番目のプラグインが必要です。こちらからインストール。
ほとんどの人が右側の Adobe Exchange 経由で良いかと思います。
Creative Cloud ユーザー以外の方は、左のボタンで .zxp ファイルをダウンロードし、ZXP Installer を使用してインストールします。ちょっと面倒ですね。
インストールできたら、Window > Extensions > LottieFiles から起動することができます。
書き出したいコンポジションを選択すれば、アニメーションがレンダリングされるとともに、JSON ファイルを保存できるようになります。LottieFiles にログインしていれば、直接 Web にアップロードすることもできます。
BodyMovin
BodyMovin は LottieFiles にも組み込まれているソフトウェアで、AfterEffects のキーフレームアニメーションを Lottie 用の JSON に変換してくれます。
LottieFiles のプラグインを使用する場合は不要ですが、より詳細なオプションを利用する必要がある場合は、こちらをインストールしてください。同じく ZXP Installer でインストールします。
特に Expo x ReactNative の環境で Lottie を動かす場合は、BodyMovin を使って以下のオプションを有効にしてください。
- Asset > Include in json
- Export old json format
- Lottie コンポーネントに
resizeModeを設定 (Android)
実装する
LottieFiles もしくは BodyMovin を使って書き出した JSON ファイルを使って各プラットフォームに実装します。
各実装方法はこちらのドキュメントを参照。
プロトタイピングの場合は、LottieFiles Figma Plugin を使うと GIF 画像として読み込むことができます。
以上です。
Happy Animation!
参考