Skip to main content

查找要使用的 Lottie 文件

LottieFiles 是一个网站,人们可以在这里分享和下载 Lottie 文件。



如果你找到了喜欢的文件,请点击它,然后点击 下载

1
并选择 Lottie JSON
2
作为格式。

将文件导入到 Remotion

将文件复制到 Remotion 项目中。推荐的方法是将 JSON 放入 Remotion 的 public/ 文件夹中(如果需要,请创建它),然后使用 staticFile() 加载它:

Animation.tsx
tsx
import { Lottie, LottieAnimationData } from "@remotion/lottie";
import { useEffect, useState } from "react";
import {
cancelRender,
continueRender,
delayRender,
staticFile,
} from "remotion";
 
const Balloons = () => {
const [handle] = useState(() => delayRender("Loading Lottie animation"));
 
const [animationData, setAnimationData] =
useState<LottieAnimationData | null>(null);
 
useEffect(() => {
fetch(staticFile("animation.json"))
.then((data) => data.json())
.then((json) => {
setAnimationData(json);
continueRender(handle);
})
.catch((err) => {
cancelRender(err);
});
}, [handle]);
 
if (!animationData) {
return null;
}
 
return <Lottie animationData={animationData} />;
};
Animation.tsx
tsx
import { Lottie, LottieAnimationData } from "@remotion/lottie";
import { useEffect, useState } from "react";
import {
cancelRender,
continueRender,
delayRender,
staticFile,
} from "remotion";
 
const Balloons = () => {
const [handle] = useState(() => delayRender("Loading Lottie animation"));
 
const [animationData, setAnimationData] =
useState<LottieAnimationData | null>(null);
 
useEffect(() => {
fetch(staticFile("animation.json"))
.then((data) => data.json())
.then((json) => {
setAnimationData(json);
continueRender(handle);
})
.catch((err) => {
cancelRender(err);
});
}, [handle]);
 
if (!animationData) {
return null;
}
 
return <Lottie animationData={animationData} />;
};

参见