はじめに

この記事は、AEのモーショングラフィックスをjsonとして出力して、Reactで表示する記事です。

なぜReactを使用するかというと、最近のWEBブラウザはセキュリティの対策によって基本的にサーバーを立てなければ非同期通信が行えないようになっており、HTML/CSSのみのような静的な環境だとエラーが表示されてしまうからです。

Access to XMLHttpRequest at 'test.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
//こんな感じのエラー

詳しくは>ここ

つまり、サーバーを立てなければ、Jsonを使ったアニメーションを見ることすらできないということです。

また、ReactのLottieは導入が非常に簡単で、簡潔に実装することができます。

使うものは、

AfterEffect
bodymovin
React v16.12.0
@crello/react-lottie v0.0.7

注意事項

BodymovinがJsonとして出力できる範囲は限られています。
一度チュートリアル動画を視聴した後に作ったほうが良いと思います。
Wow.. You can Export Adobe After Effects Animations as SVG! Here's how.

	対応状況
詳細	Supported After Effects

参考

AEでのモーショングラフィックス

AEでのモーショングラフィックスは友達に任せたので、やり方は知りません。
モーショングラフィックスをどのようにJsonとして出力するかというと、Bodymovinというプラグインを使用します。

AdobeアドオンからBodymovinをインストール
このままJSONを書き出すとエラーが出力されてしまうので、
[ファイル] > [環境設定] > [スクリプトとエクスプレッション]　>
[スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可]にチェックを入れる
[ウィンドウ] > [拡張機能] > [Bodymovin]をクリックして、コンポジションを保存する場所を選んで、Renderをクリック。
するとJSONファイルが生成される

ReactでJsonを表示する。

ここは最新の情報が少なかったり、react-lottieが混在(派生?)しているのかわかりませんが、地味にはまりました。

0. テスト

LottiePreviewに出力したjsonファイルをアップロードすることで、出力されたjsonファイルのアニメーションを簡単に見ることができます。

1. @crello/react-lottie

現状だと、@crello/react-lottieが個人的に良いと思います。というか、普通のreact-lottieだとバージョンによってはエラーが出力されます

ここ>github-issue

yarn add @crello/react-lottie 

npm install @crello/react-lottie

2. importの仕方

基本的には、@crello/react-lottieのUsageに従えばいいはずです。

import { Lottie } from '@crello/react-lottie'
//Lottieコンポーネント
import jsonData from './myAwesomeAnimation.json'
//jsonファイルのインポート

3.Jsonを表示させる!!!!

react-lottieではpropsに'options'を使っていますが、
@crello/react-lottieではconfigです!!!!(重要)

export default class App extends Component{
  render(){
    const defaultOptions={
      loop: true,
      autoplay: true, 
      animationData: jsonData,
    }
    return(
        <>
          <h1>Lottie</h1>
          <Lottie config={defaultOptions}/>
        </>
      );
  }
}

プロパティ	引数
loop	booleanでループさせるか/数値でループする回数
autoplay	読み込み後の自動再生
animationData	アニメーションさせるデータ(JSON)
詳細	@crello/react-lottie

おわりに

リッチなWEBを作成できそうですか？
ReactNativeでも使えるそうなので、興味があればやってみてください！

AEのモーショングラフィックスをJsonで出力してReactで表示する