# npm
npm install lottie-react

# yarn
yarn add lottie-react

# pnpm
pnpm add lottie-react

interface LottieOptions {
  loop?: boolean;              // 是否循环播放
  autoplay?: boolean;          // 是否自动播放
  initialSegment?: [number, number]; // 播放片段范围
  speed?: number;             // 播放速度
  direction?: 1 | -1;         // 播放方向：1 正向，-1 反向
  style?: React.CSSProperties; // 样式
  onComplete?: () => void;    // 播放完成回调
  onLoopComplete?: () => void; // 每次循环完成回调
  onClick?: () => void;       // 点击事件
  onMouseEnter?: () => void;  // 鼠标进入事件
  onMouseLeave?: () => void;  // 鼠标离开事件
}

src/components/LottieAnimation/
├── animations.ts // 动画配置文件
├── index.tsx // 组件主文件
├── types.d.ts // 类型声明文件
└── json/ // 存放动画 JSON 文件
  └── friendly-vehicles.json

declare module '*.json' {
  const value: any
  export default value
}

export const animations = {
  'friendly-vehicles': () => import('./json/friendly-vehicles.json')
  // 在这里添加更多动画
  // 'animation-name': () => import('./json/animation-name.json'),
} as const

export type AnimationName = keyof typeof animations

import Lottie from 'lottie-react'
import { useState, useEffect } from 'react'
import { animations, AnimationName } from './animations'

interface Props {
  size?: number
  name: AnimationName
}

const LottieAnimation: React.FC<Props> = ({ size = 120, name }) => {
  const [animationData, setAnimationData] = useState<any>(null)
  const [loading, setLoading] = useState(true)

  useEffect(() => {
    const loadAnimation = async () => {
      try {
        setLoading(true)
        const module = await animations[name]()
        setAnimationData(module.default)
      } catch (error) {
        console.error('Failed to load animation:', error)
      } finally {
        setLoading(false)
      }
    }

    loadAnimation()
  }, [name])

  if (loading || !animationData) {
    return <div style={{ width: size, height: size }}></div>
  }

  return (
    <div style={{ width: size, height: size, margin: '0 auto' }}>
      <Lottie animationData={animationData} loop={true} autoplay={true} />
    </div>
  )
}

export default LottieAnimation

import LottieAnimation from '@/components/LottieAnimation'

const MyComponent = () => {
  return (
    <div>
      <h1>Lottie 动画示例</h1>
      <LottieAnimation 
        name="friendly-vehicles" 
        size={200} 
      />
    </div>
  )
}

export const animations = {
  'friendly-vehicles': () => import('./json/friendly-vehicles.json'),
  'new-animation': () => import('./json/new-animation.json')
} as const