本文主要是介绍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动画的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!