标签：Lottie 封装 animationInstances current umijs animationData import lottie const
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/文件路径');
标签：Lottie,封装,animationInstances,current,umijs,animationData,import,lottie,const 来源： https://www.cnblogs.com/AllenPan/p/16633254.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。