react-lottie

import styles from './index.module.less'
import styles from './index.module.less'
import Lottie from 'react-lottie'
// import animationData from './animate.json'
import { useState, useEffect } from 'react'

const defaultOptions = {
    loop: false,
    autoplay: false,
    segments: [0, 96],
    // animationData: animationData, // animationData和path二选一
    path: '', // lottie动画json文件链接
    assetsPath: '', // lottie动画image目录
    rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice',
        className: styles.lottieArea
    }
}

const MyLottie = (props) => {
    const [isStopped, setIsStopped] = useState<boolean>(true)
    const eventListeners = [
        {
            eventName: 'loopComplete',
            callback: () => {
                // console.log('loopComplete=========')
            }
        }
    ]
    useEffect(() => {
        if(animation) {
            const timeout = setTimeout(() => {
                setIsStopped(false)
            }, 2000)
            return () => {
                clearTimeout(timeout)
            }
        }
    }, [])
        return
         <div className={styles.page}>
            <Lottie options={defaultOptions} eventListeners={eventListeners} isStopped={isStopped} isClickToPauseDisabled={true} />
        </div>
}
export default MyLottie

安装

npm install react-lottie

options参数

loop

是否循环播放

autoplay

是否自动播放

segments

数组，播放的起始帧数，如[0 , 96]

animationData

lottie对应的json文件

path

lottie对应的json文件链接

assetsPath

lottie对应的json文件使用到的图片文件夹目录链接，以 '/' 结尾

rendererSettings

object对象，其中className用于设置自定义样式

参考：

lottie-web加载含有图片路径的json文件