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

#はじめに
この記事は、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というプラグインを使用します。

1. AdobeアドオンからBodymovinをインストール

2. このままJSONを書き出すとエラーが出力されてしまうので、
   [ファイル] > [環境設定] > [スクリプトとエクスプレッション]　>
   [スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可]にチェックを入れる

3. [ウィンドウ] > [拡張機能] > **[Bodymovin]**をクリックして、コンポジションを保存する場所を選んで、Renderをクリック。

4. すると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でも使えるそうなので、興味があればやってみてください！