React × lottie × AfterEffects

2018-10-05

動画制作とサイト制作を生業にしている自分にとって、lottie をスルーし続けるわけにはいきませんでした。

airbnb/lottie-web

ただ、日本語のまともな情報がまったく存在せず、公式サイトもやたらややこしく書いてあるため、自分なりに試してみたところ、以下のフローで成功しました。

  1. Bodymovin をダウンロードする。

  2. ZXP Installer をダウンロードし、インストールする。

  3. bodymovin.zxp ファイルを、ZXP Installer で開き、インストールする。(AE に Bodymovin がインストールされる)

  4. AE を起動する。

  5. AE の「環境設定」→「一般設定」→「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れ、OK を押下する。

  6. パスアニメーションを作成する。

  7. Bodymovin から json ファイルを出力する。(参考動画)

  8. サイトのプロジェクトを開き、react-lottie をインストールする。

  9. コンポーネントに反映する。

手順は全く難しくないですし、手間もほとんどかかりませんでした、10 分もあればできる内容です。

なんで公式サイトも他のサイトも、やたら複雑に書いてあるのか、理解に苦しむ…。

暇ができたら何か作成してみようと思います。