Lottie

https://airbnb.design/lottie/

Expo

https://docs.expo.dev/versions/latest/sdk/lottie/

lottie-react-native

https://github.com/lottie-react-native/lottie-react-native#usage

Lottiefiles で配布されているアニメーションファイルを組み込んでみる。
アニメーションファイルを再生するついでに、View と重ねてみる。

https://github.com/izuchy/ExpoWithLottie-Example

Lottie のアニメーションファイルを作るための方法

1. Adobe のサイトから Bodymovin のプラグインを選択
   https://exchange.adobe.com/creativecloud.details.12557.html

2. Creative Cloud上が立ち上がるのでプラグインをインストール
   

3. After Effects を起動し、エクステンションに Bodymovin が追加されていることを確認
   

4. Figma をインストールする
   https://www.figma.com/downloads/

5. AUEX のプラグインをインストールする
   https://aeux.io/guide/download.html

6. Figma を起動して、Plugin => Manage Plugin を選択し、+ ボタンから AUEX をインポートする
   

After Effects 〜 AUEX 〜 Figma を連携するために

After Effects 側に AEUX をセットアップする

ZXPInstaller をインストール
https://aescripts.com/learn/zxp-installer/

ZXPInstaller を起動し、AEUX.zxp をドラッグしインストール

（参考）https://aeux.io/guide/install.html#after-effects

After Effects の使い方や学びはこっち
https://zenn.dev/izuchy/scraps/69cc7444b57a9a

BodyMovin で書き出し時にエラーになる

Could not export files
Is Preferences > Scripting & Expressions > Allow Scripts to Write Files and Access Network enabled?

Affer Effects の環境設定を開き矢印部分を有効にする

AftterEffects 上のプレビュー表示と BodyMovin でエクスポートしたアニメーションと動きが異なる問題

エクスポートされたものはブラウザ上でも確認可能