# Lottie

Lottie 动画播放组件，基于 [lottie-web](https://airbnb.io/projects/lottie-web/) 实现，支持播放控制与交互式微动画。

## 适用场景

- 播放 After Effects 导出的 Lottie JSON 动画
- 交互式微动画（点赞、收藏、加载等）
- 需要精确控制播放、暂停、停止的动画场景

## Props

| 名称 | 类型 | 默认值 | 必填 | 说明 |
|------|------|--------|------|------|
| className | `string` | `""` | 否 | 自定义 class |
| animationData | `any` | `-` | 否 | 动画数据对象（Lottie JSON） |
| renderer | `"svg" \| "canvas"` | `-` | 否 | 渲染器 |
| autoplay | `boolean` | `true` | 否 | 是否加载后自动开始播放 |
| loop | `boolean` | `true` | 否 | 是否循环播放 |
| speed | `number` | `1` | 否 | 播放速度；`1` 为正常速度，`-1` 为反向播放，数字越大速率越大 |

## 实例方法

通过 `ref` 获取组件实例后可调用：

| 方法 | 说明 |
|------|------|
| `play()` | 播放 |
| `stop()` | 停止 |
| `pause()` | 暂停 |
| `togglePause()` | 切换暂停/继续 |

## 典型用法

### 基础播放

```tsx
import animationData from './animation.json'

<Lottie animationData={animationData} />
```

### 通过 ref 控制播放

```tsx
const refLottie = useRef<Lottie>(null)

<Button onClick={() => refLottie.current!.play()}>播放</Button>
<Button onClick={() => refLottie.current!.stop()}>停止</Button>
<Button onClick={() => refLottie.current!.pause()}>暂停</Button>

<Lottie
    ref={refLottie}
    animationData={animationData}
    loop={false}
    autoplay={false}
/>
```

### 交互式动画（点赞）

```tsx
const refLike = useRef<Lottie>(null)
const [isLike, setIsLike] = useState(false)

const toggleLike = () => {
    const next = !isLike
    setIsLike(next)
    if (next) {
        refLike.current!.play()
    } else {
        refLike.current!.stop()
    }
}

<div onClick={toggleLike}>
    <Lottie ref={refLike} animationData={like} loop={false} autoplay={false} />
</div>
```

### 反向播放（收藏切换）

```tsx
<Lottie
    ref={refStar}
    speed={starred ? 1 : -1}
    animationData={star}
    loop={false}
    autoplay={false}
/>
```

## 注意事项

- 引入此组件会增加一个相对较大的资源尺寸（lottie-web 依赖），请按需引入
- `speed` 设为负数可实现反向播放效果
- 更新 `animationData` 后动画会重新加载