lottie

# 在 Remotion 中使用 Lottie 动画 ## 前置条件 首先，需要安装 @remotion/lottie 包。 如果尚未安装，请使用以下命令： bash npx remotion add @remotion/lottie # 如果项目使用 npm bunx remotion add @remotion/lottie # 如果项目使用 bun yarn remotion add @remotion/lottie # 如果项目使用 yarn pnpm exec remotion add @remotion/lottie # 如果项目使用 pnpm ## 显示 Lottie 文件 要导入 Lottie 动画： - 获取 Lottie 资源 - 将加载过程包裹在 `delayRender()` 和 `continueRender()` 中 - 将动画数据保存在 state 中 - 使用 `@remotion/lottie` 包中的 `Lottie` 组件渲染动画 tsx import {Lottie, LottieAnimationData} from '@remotion/lottie'; import {useEffect, useState} from 'react'; import {cancelRender, continueRender, delayRender} from 'remotion'; export const MyAnimation = () => { const [handle] = useState(() => delayRender('Loading Lottie animation')); const [animationData, setAnimationData] = useState(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 支持 `style` 属性以允许样式设置和动画： tsx return ;