reactでアニメーションを実装する

最近の勉強で学んだ事を、ノート代わりにまとめていきます。
主に自分の学習の流れを振り返りで残す形なので色々、省いてます。
Webエンジニアの諸先輩方からアドバイスやご指摘を頂けたらありがたいです！

アニメーションの実装

gifファイルの場合、実装は簡単だが容量が大きくなることも

import animation from "images/animation.gif";
・
・
<image src={animation} alt="トップ画像" />

Lottieで実装する！

Lottieとは？

Lottieという動画をアプリに組み込むためのライブラリを使うといいよ
JSONファイルを組込むので格段に軽くなる
必要なものをAirbnbがほとんど用意してくれててすごい👏

以下の手順でJSONを書き出した後に実装していく!

1.ZXPInstallerをDL：http://aescripts.com/learn/zxp-installer/
2.BodymovinをDL（Aeのプラグイン）：https://github.com/airbnb/lottie-web/
3.アプリに組み込みたい動画をAeで作成
4.動画をBodymovinでJSONで書き出し
5.プレビューでエラーがないか確認
6.問題なければ実装（orデータの受け渡し🙏）

実装の際はLottieをインストールし

$ npm i react-lottie


これでOK！

import React, { Component } from 'react'
import Lottie from 'react-lottie'
import animationData from '../lotties/4203-take-a-selfie.json'

class UncontrolledLottie extends Component {


  render(){

    const defaultOptions = {
      loop: true,
      autoplay: true,
      animationData: animationData,
      rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice'
      }
    };

    return(
      <div>
        <h1>Lottie</h1>
        <p>Base animation free from external manipulation</p>
        <Lottie options={defaultOptions}
              height={400}
              width={400}
        />
      </div>
    )
  }
}

export default UncontrolledLottie

細かいオプションはLottieのドキュメントで確認できる！

参考資料

・Lottie
・How To Add Animations to React Apps with React-Lottie