Lottie 动画

import React, { useEffect, useRef } from 'react'
import styled from 'styled-components'
import fireworksAnimation from './fireworks.json'
import Lottie, { LottieRef } from 'lottie-react'

interface ModifiedLottieRef extends LottieRef {
  play: () => void
  pause: () => void
}

const DURATION_TIME = 2500
const FireworksAnimation: React.FC = () => {
  const lottieRef = useRef<ModifiedLottieRef>(null)

  useEffect(() => {
    const { current: lottie } = lottieRef

    if (lottie) {
      lottie.play()

      const timeoutId = setTimeout(() => {
        lottie.pause()
      }, DURATION_TIME)

      return () => {
        clearTimeout(timeoutId)
      }
    }
  }, [])

  return (
    <StyledFireworksAnimation>
      <Lottie animationData={fireworksAnimation} loop={false} autoplay={true} lottieRef={lottieRef as LottieRef} />
    </StyledFireworksAnimation>
  )
}

const StyledFireworksAnimation = styled.div`
  width: 370px;
  height: 200px;
  position: absolute;
  z-index: 3;
  top: -110px;
`

export default FireworksAnimation