Remotion LabRemotion Lab
›渲染›渲染為 GIF

渲染為 GIF

學習如何在 Remotion 中將影片渲染為 GIF 格式，包括降低幀率、設定循環次數及透明 GIF 等功能。

渲染為 GIF

自 v3.1 起可用

Remotion 支援將影片渲染為 GIF 格式。

啟用 GIF 渲染

你可以透過以下方式渲染為 GIF：

使用命令列：

npx remotion render MyComp --codec=gif out/animation.gif

使用 renderMedia() API：

import { renderMedia, selectComposition } from "@remotion/renderer";
 
const composition = await selectComposition({
  serveUrl: "http://localhost:3000",
  id: "MyComp",
});
 
await renderMedia({
  composition,
  serveUrl: "http://localhost:3000",
  codec: "gif",
  outputLocation: "out/animation.gif",
});

也可在 stitchFramesToVideo()、renderMediaOnLambda() 和 renderMediaOnVercel() 中設定 codec: "gif"。

降低幀率

GIF 通常比影片的幀率低。為此，Remotion 支援 everyNthFrame 參數：

  • 預設值（everyNthFrame: 1）：渲染每一幀，即幀 0、1、2、3、4……
  • everyNthFrame: 2：只渲染每 2 幀中的 1 幀（幀 1、3、5、7……）。30fps 的影片會變成 15fps 的 GIF。
  • everyNthFrame: 3：只渲染每 3 幀中的 1 幀（幀 2、5、8、11……）

在 CLI 中使用

# 30fps 影片渲染為 15fps GIF
npx remotion render MyComp --codec=gif --every-nth-frame=2
 
# 30fps 影片渲染為 10fps GIF
npx remotion render MyComp --codec=gif --every-nth-frame=3

在 Lambda 渲染中使用

npx remotion lambda render --codec=gif --every-nth-frame=2

在 renderMedia() 中使用

import { renderMedia, selectComposition } from "@remotion/renderer";
 
const composition = await selectComposition({
  serveUrl: "http://localhost:3000",
  id: "MyComp",
});
 
await renderMedia({
  composition,
  serveUrl: "http://localhost:3000",
  codec: "gif",
  outputLocation: "out/animation.gif",
  everyNthFrame: 2, // 渲染為 15fps GIF（原始為 30fps）
});

在 renderFrames() 中使用

import { renderFrames } from "@remotion/renderer";
 
await renderFrames({
  serveUrl: "http://localhost:3000",
  composition,
  outputDir: "/tmp/frames",
  everyNthFrame: 2,
});

在設定檔中使用

import { Config } from "@remotion/cli/config";
 
Config.setEveryNthFrame(2);

設定循環次數

numberOfGifLoops 選項可控制 GIF 的播放循環次數：

值效果
null（CLI 中省略）無限循環播放
0禁止循環（只播放一次）
1循環 1 次（共播放 2 次）
2循環 2 次（共播放 3 次）

在 CLI 中設定

# 只播放一次，不循環
npx remotion render MyComp --codec=gif --number-of-gif-loops=0
 
# Lambda 渲染
npx remotion lambda render --codec=gif --number-of-gif-loops=0
 
# 無限循環（預設）
npx remotion render MyComp --codec=gif

在 renderMedia() 中設定

import { renderMedia, selectComposition } from "@remotion/renderer";
 
const composition = await selectComposition({
  serveUrl: "http://localhost:3000",
  id: "MyComp",
});
 
await renderMedia({
  composition,
  serveUrl: "http://localhost:3000",
  codec: "gif",
  outputLocation: "out/animation.gif",
  numberOfGifLoops: 0, // 只播放一次
});

在 stitchFramesToVideo() 中設定

import { stitchFramesToVideo } from "@remotion/renderer";
 
await stitchFramesToVideo({
  dir: "/tmp/frames",
  fps: 30,
  height: 1080,
  width: 1920,
  outputLocation: "out/animation.gif",
  codec: "gif",
  numberOfGifLoops: 3,
});

在設定檔中設定

import { Config } from "@remotion/cli/config";
 
Config.setNumberOfGifLoops(0);

透明 GIF

GIF 格式支援透明背景。若要渲染透明 GIF，需將 imageFormat 設為 "png"：

import { renderMedia, selectComposition } from "@remotion/renderer";
 
const composition = await selectComposition({
  serveUrl: "http://localhost:3000",
  id: "MyComp",
});
 
await renderMedia({
  composition,
  serveUrl: "http://localhost:3000",
  codec: "gif",
  outputLocation: "out/transparent.gif",
  imageFormat: "png", // 必須設為 png 才能支援透明
});

在 Remotion Studio 中，可在「圖片」（Picture）標籤中設定此選項。

注意：GIF 只支援完全透明或完全不透明（不支援半透明）。若你的合成有半透明的元素，它們會被轉換為完全透明或完全不透明。

匯入其他 GIF

若想在 Remotion 專案中使用其他 GIF 圖片，請參閱 Remotion 中使用 GIF 的說明。

完整範例：帶所有選項的 GIF 渲染

import { renderMedia, selectComposition } from "@remotion/renderer";
 
const composition = await selectComposition({
  serveUrl: "http://localhost:3000",
  id: "MyComp",
});
 
await renderMedia({
  composition,
  serveUrl: "http://localhost:3000",
  codec: "gif",
  outputLocation: "out/animation.gif",
  everyNthFrame: 2,      // 15fps（原始 30fps）
  numberOfGifLoops: null, // 無限循環
  imageFormat: "png",    // 支援透明
});

注意事項

  • GIF 只支援 256 色調色板，與影片相比色彩還原度較低
  • 若對色彩精確度要求較高，建議使用 MP4 或 WebM 格式
  • 自 Remotion v4.0.138 起，GIF 的色彩精確度已大幅提升
  • GIF 檔案通常比相同內容的影片體積更大

參見