从 URL 加载 Lottie 动画

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

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

该资源必须支持 CORS 。

🌐 The resource must support CORS.

使用 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 } from "remotion";

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

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

  useEffect(() => {
    fetch("https://assets4.lottiefiles.com/packages/lf20_zyquagfl.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>
• 正在从 staticFile() 加载