基礎概念 - RemotionLab

影片是什麼？

在 Remotion 的世界裡，影片的本質非常簡單：

影片 = 一連串的圖片，以固定速率播放。

一支 30fps 的影片，每秒顯示 30 張圖片（稱為「幀」）。一支 3 秒的影片就是 90 張圖片。Remotion 的工作就是讓你用 React 來描述「第 N 幀要顯示什麼畫面」。

核心心智模型

傳統影片剪輯軟體讓你在時間軸上拖拉素材。Remotion 的做法完全不同——你寫一個 React 元件，這個元件就是你的影片：

import { useCurrentFrame } from "remotion";
 
export const MyVideo: React.FC = () => {
  const frame = useCurrentFrame();
 
  return (
    <div style={{ fontSize: 100, textAlign: "center" }}>
      目前是第 {frame} 幀
    </div>
  );
};

useCurrentFrame() 回傳目前的幀數（從 0 開始）。Remotion 會從第 0 幀開始，一幀一幀地渲染你的元件，最後組合成影片。

這就是 Remotion 最核心的概念：你的元件是 frame 的函數。

Composition：影片的容器

<Composition> 定義了一支影片的規格：

import { Composition } from "remotion";
import { MyVideo } from "./MyVideo";
 
export const RemotionRoot: React.FC = () => {
  return (
    <Composition
      id="MyVideo"
      component={MyVideo}
      durationInFrames={150}
      fps={30}
      width={1920}
      height={1080}
    />
  );
};

屬性	說明
`id`	影片的唯一識別名稱
`component`	要渲染的 React 元件
`durationInFrames`	影片總幀數（150 幀 ÷ 30fps = 5 秒）
`fps`	每秒幀數
`width` / `height`	影片解析度（像素）

你可以在一個專案裡定義多個 Composition，就像一個資料夾裡放了很多支影片。

useVideoConfig()：取得影片資訊

在元件內部，你可以用 useVideoConfig() 取得目前 Composition 的設定：

import { useVideoConfig } from "remotion";
 
export const MyVideo: React.FC = () => {
  const { fps, durationInFrames, width, height } = useVideoConfig();
 
  return (
    <div>
      這支影片是 {width}×{height}，
      長 {durationInFrames / fps} 秒
    </div>
  );
};

這在計算動畫時很有用——例如你需要知道 fps 才能正確使用 spring() 函數。

AbsoluteFill：全螢幕容器

<AbsoluteFill> 是 Remotion 提供的佈局元件，它會填滿整個影片畫面：

import { AbsoluteFill } from "remotion";
 
export const MyVideo: React.FC = () => {
  return (
    <AbsoluteFill
      style={{
        backgroundColor: "#0f0f1a",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <h1 style={{ color: "white", fontSize: 72 }}>置中的標題</h1>
    </AbsoluteFill>
  );
};

它本質上是一個 position: absolute; top: 0; left: 0; right: 0; bottom: 0; 的 <div>，加上 display: flex。你可以疊加多個 <AbsoluteFill> 來建立圖層效果。

時間與幀數的關係

記住這個公式：

時間（秒）= 幀數 ÷ fps

fps	1 秒	3 秒	10 秒
24	24 幀	72 幀	240 幀
30	30 幀	90 幀	300 幀
60	60 幀	180 幀	600 幀

大多數情況下用 30fps 就足夠了。社群媒體影片通常用 30fps，電影用 24fps，遊戲影片可能需要 60fps。

小結

Remotion 的核心概念就這幾個：

影片是一連串的幀，每一幀都是一次 React render。
useCurrentFrame() 讓你知道「現在是第幾幀」。
<Composition> 定義影片的規格（長度、fps、解析度）。
useVideoConfig() 讓你在元件內取得影片資訊。
<AbsoluteFill> 是建立全螢幕畫面的起點。

掌握了這些，你就能理解 Remotion 的一切——因為所有進階功能都只是在這個基礎上的延伸。