[ PROMPT_NODE_23412 ]
gif
[ SKILL_DOCUMENTATION ]
# 在 Remotion 中使用动画图像
## 基本用法
使用 `` 来显示与 Remotion 时间轴同步的 GIF、APNG、AVIF 或 WebP 图像：
tsx
import {AnimatedImage, staticFile} from 'remotion';
export const MyComposition = () => {
return ;
};
也支持远程 URL（必须启用 CORS）：
tsx
## 尺寸与填充
使用 `fit` 属性控制图像如何填充其容器：
tsx
// 拉伸以填充（默认）
// 保持纵横比，适应容器内部
// 填充容器，必要时进行裁剪
## 播放速度
使用 `playbackRate` 控制动画速度：
tsx
{/* 2倍速 */}
{/* 0.5倍速 */}
## 循环行为
控制动画结束后的行为：
tsx
// 无限循环（默认）
// 播放一次，显示最后一帧
// 播放一次，然后清除画布
## 样式
使用 `style` 属性添加额外的 CSS（使用 `width` 和 `height` 属性设置尺寸）：
tsx
## 获取 GIF 时长
使用 `@remotion/gif` 中的 `getGifDurationInSeconds()` 来获取 GIF 的时长。
bash
npx remotion add @remotion/gif # 如果项目使用 npm
bunx remotion add @remotion/gif # 如果项目使用 bun
yarn remotion add @remotion/gif # 如果项目使用 yarn
pnpm exec remotion add @remotion/gif # 如果项目使用 pnpm
tsx
import {getGifDurationInSeconds} from '@remotion/gif';
import {staticFile} fro
粤公网安备44030002003366号