import React, { useEffect, useRef, useState } from 'react';
import lottie from 'lottie-web';
const Animation = props => {
const { renderer, loop, path, canvasStyle } = props;
const lottieRef = useRef(null);
const [, setLottie] = useState(null);
useEffect(() => {
setLottie(
lottie.loadAnimation({
container: lottieRef.current,
// 渲染方式
renderer,
// autoplay 自动播放
// 是否循环播放
loop,
// 路径
path,
})
);
}, []);
return (
<div>
<div ref={lottieRef} className="lottie" style={canvasStyle}></div>
</div>
);
};
export default Animation;
<Animation
{...{
renderer: 'svg',
loop: true,
path:`${BOS_STATIC_FILE_PREFIX}/adsImportLoading.json`,
canvasStyle: { width: 300, hight: 300 },
}}
/>
具体配置项见lottie-web - npm