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>
    );
  }
}

原文：https://zhuanlan.zhihu.com/p/683658684