如何在react中使用lottie

Lottie是一个开源的动画库，以下是如何在react项目中使用该库的教程。

1.第一步：在官网中下载动画素材的json格式

lottie官网：lottiefiles.com/featured

这里可以使用免费的动画

选中心仪的动画后，点击下载为json格式 这里要保存至工作区才能下载 2.第二步：引入至项目中

import yellowMan from '../../../static/lottie/yellow-man.json'

3.第三步：下载lottie-web

npm install lottie-web

4.第四步：在项目中使用

import { useEffect, useRef } from 'react'
import lottie from 'lottie-web'
import yellowMan from '../../../static/lottie/yellow-man.json'

const App = () => {
  const lottieRef = useRef(null)
   useEffect(() => {
    lottie.loadAnimation({
      container: lottieRef.current,
      renderer: 'svg',
      loop: true,
      autoplay: true,
      animationData: yellowMan
    })

    return () => {
      lottieRef.current = null
    }
  }, [])
  return <div ref={lottieRef}></div>
}

export default App

lottie.loadAnimation中更多配置项可查看官网：airbnb.io/lottie/#/we…