Bodymovinでサイズを拡大しても綺麗なWeb用アニメーションを作る方法

Framer XやPrincipleといったすばらいいツールもありますが、なかなかデファクトスタンダードにはなっていない印象です。
そこで、アニメーション制作に関して、特に映像分野ですでに地位を獲得している、AfterEffects(以下AE)を使ったアニメーションの書き出し方法を説明します。

なぜAEがいいのか、以下の理由があげられます。

• コーディングでSVGアニメーションを作る場合と比べて、再利用、再加工、管理がしやすい
• 精密なアニメーションも簡単に作成できる
• 企業ですでにをAdobeのコンプリートプランに加入していると、すぐに使うことができる

さらに、Bodymovinというプラグインを使うと、デザイナーが作ったものを二次加工や書き写ししなくても、そのままWebやアプリで使えることができます。

Bodymovinとは

hernanさんが制作された、AEのアニメーションを解析し、Webで読み込み可能なJSONファイルとして出力するAEプラグインです。 宿泊予約サイトAirbnbが公開しているLottieという、ネイティブアプリやWebで書き出せる方法の中で使われています。 余談ですが、Airbnbのデザインチームが以下にすばらしいかは、https://airbnb.design/で見ることができます。
また、GoogleのデザインチームもBodymovinを利用しているようです。Mediumの記事にアプリで使用している形跡がありますし、実際にブラウザ上のコードの中身をみるとBodymovinの文字がありました。

これだけでも使う価値がありますね。特に企業ユースで。

インストール手順

1. 念のためAEは終了してください

2. AEのプラグインをインストールするためZXP Installerをインストールします。公式サイトからダウンロードしましょう。
   homebrewをインストールしている人は以下のコマンドでインストールできます。

   brew cask install zxpinstaller

3. BodymovinはAirbnbのlottie-webリポジトリから最新のzipファイルをダウンロードできます。リンク先の最新のv*.*.*の箇所をクリックし、Source code(zip)をダウンロードしましょう。
4. 解答した中にある、bodymovin.zxp(build > extension > bodymovin.zxp)を、先程インストールしたZXP Installelrを起動し、ウィンドウ内にドラッグします。
5. AEを起動します。メニュー > Window > 拡張機能 を確認し、Bodymovin が追加されていたらインストール完了です。
   頻繁に更新されるので、定期的に新しいバージョンにすることをお勧めします。
6. 最後に設定を変更します。環境設定 > 一般設定 > スクリプトによるファイルへの書き込みとネットワークへのアクセス をチェックしてください。

アニメーションを作る

AEのすべての機能が使えるわけではありません。
公式サイトを確認して、対応している機能のみを使ってアニメーションを作りましょう。
AEの使い方は長くなるので割愛します。
このようなデザインツールのリソースの勉強にはYoutubeをおすすめします
ae bodymovinなどで検索するとたくさんでてきますね。
例えばDesignCourseさんはアイコンアニメーションを作り、Bodymovinで書き出す方法を紹介されています。
https://www.youtube.com/watch?v=2Tm8ijJsuMc

Web向けに書き出す

1. メニュー > Window > 拡張機能 > Bodymovin を選択します。
2. 書き出したいコンポジションを選択し > 歯車アイコンを選択します。
3. 書き出したい種類を選択し、demoを選択するとHTMLファイル１つに書き出してくれます。
4. Destination Folder(3点リーダーのアイコン)をクリックして保存先を指定します。
5. Renderを実行すると、指定したフォルダに書き出してくれます。
6. 書き出されたHTMLをブラウザーで表示し、アニメーションが動いていることを確認します。

完成したらフロントエンドエンジニアに、Webの実装方法のURLとAEファイルか書き出したファイルを渡しましょう。

参考です。powermojoさんが動画で書き出し方法を説明されています。
https://www.youtube.com/watch?v=5XMUJdjI0L8

Lottieのサイトをみると、見ていて楽しい魅力的なアニメーションがたくさんありますね。
フロントエンドエンジニアとしても、このようなアニメーションを実装するのは楽しいはずです。

今回はAdobeのAEを使った手法を紹介しましたが、
後日、Framer XやPrincipleなどの他のツールを使ったアニメーション構築方法も記事にしたいと思います。

Happy Designing Animation!