从 staticFile() 加载 Lottie 动画

为了从已放入 public/ 文件夹的文件加载 Lottie 动画，请结合使用 staticFile() 和 fetch 以及 Remotion 的 delayRender() 函数。

🌐 In order to load a Lottie animation from a file that has been put into the public/ folder, use staticFile() in combination with fetch and Remotion's delayRender() function.

使用 LottieAnimationData 类型通过 React 的 useState() 来保持状态，并且只有在数据被获取后才渲染 <Lottie> 组件。

🌐 Use the LottieAnimationData type to keep a state using React's useState() and only render the <Lottie> component once the data has been fetched.

Animation.tsx
import { Lottie, LottieAnimationData } from "@remotion/lottie";
import { useEffect, useState } from "react";
import {
  cancelRender,
  continueRender,
  delayRender,
  staticFile,
} from "remotion";

const Square = () => {
  const [handle] = useState(() => delayRender("Loading Lottie animation"));

  const [animationData, setAnimationData] =
    useState<LottieAnimationData | null>(null);

  useEffect(() => {
    fetch(staticFile("data.json"))
      .then((data) => data.json())
      .then((json) => {
        setAnimationData(json);
        continueRender(handle);
      })
      .catch((err) => {
        cancelRender(err);
      });
  }, [handle]);

  if (!animationData) {
    return null;
  }

  return <Lottie animationData={animationData} />;
};

另请参阅

🌐 See also

• <Lottie>
• 从 URL 加载