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

本文主要是介绍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/文件路径');

这篇关于umijs如何使用封装好的Lottie动画的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！