在 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）

✅ 方式二：使用底层库 [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;

🔁 对比总结