umijs如何使用封装好的Lottie动画

lottie：设计师制作动画，并提供json文件。前端可以使用对应的api操作时间流，对动画进行一些事件上的操作。

官网文档： https://github.com/airbnb/lottie-web

一. 下载依赖

 npm install lottie-web

二. 在组件内引用

import lottie from ‘lottie-web’;

三.引入json文件

Lottie默认读取Assets中的文件，我们需要把设计导出的动画文件.json 保存在app/src/main/assets文件里。

四.构建Animation组件

例:

import React, { useRef, useEffect } from ‘react’;
import lottie from ‘lottie-web’;
import { connect } from ‘umi’;
import classNames from ‘classnames’;

const Animation = ({ className, visible, style, animationData, onInit }) => {
    const el = useRef();
    const animationInstances = useRef();
    const duraction = animationInstances.current?.getDuration?.(true);
    function init() {
        if (!animationData) return;
        animationInstances.current = {};
        if (typeof animationData === ‘function’) {
            animationData().then(initAnimate);
        } else {
            initAnimate(animationData);
        }

        function initAnimate(animationData) {
            animationInstances.current = lottie.loadAnimation({
              container: icon, // 包含动画的dom元素
              renderer: ‘svg’, //渲染出来的是什么格式
                     loop: true, //循环播放

            autoplay: true, //自动播放
               path: ‘./data.json’ // 动画json的路径
 });

     onInit?.(animationInstances.current);    }

    }
    useEffect(() => {
        return () => {
            // eslint-disable-next-line no-unused-expressions
            // animationInstances.current?.destroy?.();
          
        };
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    useEffect(() => {
        if (animationInstances.current || !visible) return;

        init();
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [visible]);
    //
    return (
        <div
            ref={el}
            style={{ visibility: !visible && ‘hidden’, …style }}
            className={classNames(‘lottie-animate’, className)}
        >
        </div>
    );
};
function mapStateToProps() {
    return {
    };
}
export default connect(mapStateToProps)(Animation);
4.在需要使用的页面引入Animation组件
 

import Animation from ‘文件路径’;

const animation = () => import(‘@/assets/文件路径’);