最近 Lottie を触っているので、導入からその他気づいたことなどメモ
Lottieとは
LottieFiles – Free animation files built for Lottie
Lottie は Airbnb が開発しており、After Effects で作ったアニメーションを json 形式でファイルを出力して Web などで表示できるよ、というもの。SVG + JavaScript で動くので、動画を埋め込むより軽量で、レスポンシブウェブデザインでも使い勝手が良さそう。背景の透過も可能。
サイトの説明を翻訳するとこんなかんじ。
LottieファイルはJSONベースのアニメーションファイルフォーマットで、アニメーション要素のテキスト、記述的な表現を使用しています。オープンソースとフリーのLottieプレーヤーは、Web、iOS、Android、Windows、React Native、その他のプラットフォーム（Xamarin、NativeScript、Vue、Angular、QT、Skia、Framer X、Sketch）用に存在しています。
https://lottiefiles.com/blog/updates/lottiefiles-plugin-adobe-after-effects
準備＜最低限必要＞
1. ZXP Installer をインストールする
オープンソースの Adobe エクステンションをインストールするために、下記 URL から ZXP Installer をダウンロードしてインストールする。
2. Bodymovin をダウンロードする
下記 URL から Bodymovin の最新版をダウンロードする。
https://github.com/airbnb/lottie-web/tree/master/build/extension
3. Bodymovin をインストールする
インストールした ZXP installer を開き、Bodymoving 拡張機能（.zxpファイル）をドラッグ＆ドロップでウィンドウに移動。これで Bodymoving がインストールできる。
4. After Effects の設定
After Effetcts の環境設定＞スクリプトとエクスプレッション、「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックをつける。
5. LottieFiles のアカウント取得
LottieFiles にアカウントを作る。
準備＜あったほうが便利＞
なくても大丈夫ではあるけれど、あったほうが何かと便利そうだったので LottieFiles for Adobe After Effects という、LottieFiles の AE プラグインも入れておく。
細かい使い方や機能などは LottieFiles for After Effects – LottieFiles を参照のこと。
1. LottieFiles for Adobe After Effects をダウンロードする
下記 URL から LottieFiles for Adobe After Effects （.zxpファイル）をダウンロードする。
LottieFiles for After Effects ※開くと突然再生されるので音量注意
2. LottieFiles for Adobe After Effects をインストールする
インストールした ZXP installer を開き、LottieFiles for Adobe After Effects 拡張機能（.zxpファイル）をドラッグ＆ドロップでウィンドウに移動。
Lottie の実装手順
- After Effects でアニメーションを作る
- After Effects に入れた Bodymoving から json を書き出す
- 書き出した内容をプレビュー確認
- ウェブサイトに表示できるようにする
ざっくりいうとこのような流れ。以下、1つずつもう少し詳しくメモ。
1. After Effects でアニメーションを作る
Bodymoving では使える表現・使えない表現がある。詳しくは下記ページを確認。
Supported After Effects Features – Lottie Docs
シェイプやストロークはほとんど使えるが、マスクやマージパスは使えないものが多い。After Effects でアニメーションを作る際には、事前にこれは使えるかな、と確認しておいたほうが良い。
After Effects に Illustrator で作ったデータを持っていく手順
After Effects のプロジェクトウィンドウへ、.ai ファイルをドラッグ・アンド・ドロップする。
すると読み込むファイルの設定をするウィンドウがでるので、読み込みの種類を「コンポジション」にする。
読み込んだファイルを選択した状態で、右クリック＞作成＞ベクトルレイヤーからシェイプを作成。これで After Effects でシェイプとして扱えるようになる。
.ai ファイルを After Effects にインポートしてコンポション設定してベクターレイヤーからシェイプを作成して…とちょっと手間がかかるので、After Effects 拡張機能の Overlord を利用すると楽そう。After Effects のシェイプを Illustrator で編集したりもできる様子。$45（2020/7現在）の有料拡張機能だけれど、よく使う人は購入してもいいかも。
2. After Effects に入れた Bodymoving から json を書き出す
テキストがある場合はシェイプに変換しておく。
After Effects のウィンドウ＞エクステンション＞Bodymovin を選択し、ここから json を書き出す。
- 書き出したいところの Selected をクリックしてチェックをつける
- Settings をクリックして設定を確認※後述
- どこに書き出したファイルを保存するのかパスを設定する
- Render ボタンを押して完了
上記の流れで書き出すことが可能。
Settings の内容は以下のようになっている。
私は「Glyphs」と「Standard」をチェックしている。
もし書き出したものをローカルで表示確認したかったら、「Demo」にもチェックをつけるとローカルプレビュー用の HTML も出力される。
「Glyphs」は、「If selected it converts fonts to shapes」となってて、これを選べばフォントがあったときに自動で図形にするよ、というもの。……なんだけれど、フォントがすべてシェイプになるわけではないようで、私が試した限りではフォントの種類が変わってしまったので、そういったことを避けるためにテキストはシェイプに自分で変換しておいたほうがよさそう。
「Standalone」にチェックをつけると、この js だけ読み込めば OK！というファイルが出力される。
3. 書き出した内容をプレビュー確認
- LottieFiles の「preview」ページ https://lottiefiles.com/preview で、先程作った json をドラッグ・アンド・ドロップ。
- プレビューページが表示される。表示に問題がなければ、「Lottie Animation URL」をコピー。
- LottieFiles の「Tools＞Web-Player」ページ https://lottiefiles.com/web-player で、「YOUR LOTTIE JSON URL」に先程コピーした「Lottie Animation URL」を貼り付け設定を調整し、表示を確認する。
4. ウェブサイトに表示できるようにする
表示させるには、プレイヤーと json が必要。
一番簡単なのは、先程設定をしたり表示を確認したりしていた LottieFiles の「Tools＞Web-Player」ページ https://lottiefiles.com/web-player で、「GENERATED CODE」から埋め込みコードをコピー、それを貼り付ける方法だと思う。この「GENERATED CODE」には、プレイヤーと json の両方の読み込みができるようになっている。
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://assets9.lottiefiles.com/datafiles/MUp3wlMDGtoK5FK/data.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop controls autoplay></lottie-player>上は GENERATED CODE の例。一行目が Lottie プレイヤーで、二行目がアニメーション json とその設定になっている。
他にも表示させるにはいくつか方法があり、細かい設定などいらない、とりあえず確認したい、ということであれば After Effects の Bodymovin の Settings で Demo をチェックして書き出された HTML を開く、もしくは Standalone をチェックして書き出される js を読み込むのでも OK。
もっとしっかりとアニメーションの調整をしたい！という場合には、自分で Lottie プレイヤーと json を読み込んで JavaScript で設定をすることも可能。ここでは割愛。
Lottie の確認＋
準備＜あったほうが便利＞、のところで入れた LottieFiles for Adobe After Effects を確認してみる。After Effects のウィンドウ＞エクステンション＞LottieFiles でウィンドウを表示、LottieFiles のアカウントでログイン。
Previews タブに、自分が LottieFiles で確認したファイルなどが並んでいる。クリックすると詳細が見れる。地球儀のアイコンを押すことで、LottieFiles でのプレビューページを開くことができる。
また、Test in LottieFiles Mobile App というところから QR コードを表示して、モバイルで表示を確認することもできる。LottieFiles という iOS / Android のアプリを入れて、このアプリから QR コードを読み取れば OK。
おわり
ページを軽く保ちつつも動きをつけていきたい、という時とてもいいのではと思ってます。After Effects 触りながら、昔 Flash を触っていたときのことを思い出したりしました。