React、Ant Desgin自定义加载动画，lottie-web 将json解析成动画

在项目中，遇到需要在网页首屏，展示动画的需求，你会想到怎么做？

思路一：设计师导出gif图片，用img进行展示。

缺点：图片失真，影响效果。

思路二：设计师导出json文件，用插件解析成动画展示。

缺点：由于当时时间紧张，且不知道怎么操作，放弃了这个方案。

直到在下一个项目中，遇到需要自定义加载动画效果的需求，再次把该方案提上日程。在项目中，应该多去思考，凡事都有解决方案。

lottie-web 将json解析成动画。

一、安装依赖

npm install lottie-web --save
或者
yarn add lottie-web

二、在React项目中搭配Ant Desgin使用

注意：loading.json为设计师将动画设计好之后，导出的json文件。

import React, {
    useEffect, useRef } from 'react';
import lottie from 'lottie-web';
import {
    Spin } from 'antd';
import {
    SpinProps } from 'antd/lib/spin';
import loading from '@/assets/loading.json';