如何在React项目中使用Lottie 动画库

如何在React项目中使用Lottie 动画库

不绕弯子，直接上代码。

1、首先在react项目中 安装所需依赖。

npm i react-lottie 

2、在使用页面引入Lottie库，和下载的json文件。

3、

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

4、

  <Lottie options={Options}
          height={200}
          width={200}
        />

也可以参考npmjs上依赖库的使用。
最终实现效果，我这里的lottie文件用的阿里图标库的做一个示范。用这个库直接让页面更有逼格了。