在 React 中渲染 Lottie 动画

在 React 中渲染 Lottie 动画有两种常见方式：

---

✅ 方式一：使用封装库 [lottie-react]

这是最推荐的方式，符合 React 习惯，使用简单。

1️⃣ 安装依赖

npm install lottie-react

2️⃣ 编写组件

import React from 'react';
import Lottie from 'lottie-react';
import animationData from './path/to/your/animation.json';

const LottiePlayer = () => (
  <Lottie
    animationData={animationData}
    loop={true}
    style={{ width: 300, height: 300 }}
  />
);

🌟 可选属性（lottie-react）

属性	说明
animationData	动画 JSON 数据
loop	是否循环播放（默认 true）
autoplay	是否自动播放（默认 true）
style	设置动画容器样式
onComplete	播放完回调
lottieRef	可用于控制播放（pause, stop 等）

---

✅ 方式二：使用底层库 [lottie-web]

如果你要手动控制或自定义更复杂行为，可以使用原始库。

1️⃣ 安装依赖

npm install lottie-web

2️⃣ 示例组件

import React, { useEffect, useRef } from 'react';
import lottie from 'lottie-web';
import animationData from './path/to/your/animation.json';

const LottiePlayer = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    const anim = lottie.loadAnimation({
      container: containerRef.current, // 指定渲染容器
      renderer: 'svg',                // 或 'canvas', 'html'
      loop: true,
      autoplay: true,
      animationData: animationData,    // 动画数据
    });

    return () => anim.destroy();       // 卸载组件时销毁动画
  }, []);

  return (
    <div
      ref={containerRef}
      style={{ width: 300, height: 300 }}
    />
  );
};

export default LottiePlayer;

---

🔁 对比总结

方式	优点	适合场景
lottie-react	更符合 React 习惯，简单易用	普通场景，快速集成动画
lottie-web	更强控制力，底层 API 支持	复杂控制场景（跳帧、事件等）

---