Lottie で ReactNative や Web にアニメーションを追加する

正確には、アニメーションを追加する準備。
AfterEffects のプラグインの設定が面倒なのと、設定してたことを忘れて同じことを2度やったのでメモ。

プラグインファイルのダウンロード

いろいろ書いてあるけど、Githubのレポジトリからダウンロードすれば良い。
https://github.com/airbnb/lottie-web

ZIPを解答して、このファイルを探します。
見つかったら、このフォルダを開いたままに。

ZXP Installer

プラグインをインストールするには ZXP Installer というものがいるらしいです。
これをせずに After Effects のプラグインフォルダに bodymovin.zxp を入れても動かないので注意しましょう。

こちらからダウンロード。
https://aescripts.com/learn/zxp-installer/

起動するとこんな画面が出てくるので、ここに先程の bodymovin.zxp をドラッグ&ドロップすればOK。自動でインストールが始まります。

After Effects

AEを再起動して Window > Extensions > Bodymovin メニューを選択。
この画面が開けばOKです。真っ黒な画面のままであれば何かおかしい。

あとは公式にある通り、コンポジションを作ると、勝手にリストに出てくるので、それを書き出せば json なり js なりでファイルを生成することができます。