react專案中使用lottie動畫

一，引入lottie庫

點選檢視程式碼

npm i --save react-lottie @types/react-lottie

二，下載lottie的json檔案
去iconfont.cn中可以在庫中下載lottie檔案（注意版權問題）

三，在專案中使用lottie

點選檢視程式碼

import * as React from "react";

import Lottie from "react-lottie";
import * as myLottie from "../../assets/lottie.json";

export interface HelloProps {
  compiler: string;
  framework: string;
}

// 'HelloProps' describes the shape of props.
// State is never set so we use the '{}' type.
export class Hello extends React.Component<HelloProps, {}> {
  render() {
    const options = {
      loop: true,
      autoplay: true,
      animationData: myLottie,
      rendererSettings: {
        preserveAspectRatio: "xMidYMid slice",
      },
    };
    return (
      <div>
        <h1>
          Hello from {this.props.compiler} and {this.props.framework}!
        </h1>
        <Lottie options={options} height={100} width={100} />
      </div>
    );
  }
}