轉場特效大全：用 @remotion/transitions 做多場景影片

成品預覽

這就是你跟著教學能做出來的成品——15 秒、5 個場景順暢切換，fade、slide、wipe、flip 四種轉場輪番登場。完全是純 React 生出來的多場景影片。

這篇會做出什麼

一支 30 秒、五個場景、四種轉場的介紹影片：

每個場景都是獨立元件，轉場透過 @remotion/transitions 統一管理。

前置知識

• T1 Remotion Skills 安裝指南
• T3 YouTube 片頭動畫 — 熟悉 <Sequence> 的時間概念

Step 1：建立多場景 Composition

Claude Code：

新增一個 Composition：
- id: "MultiSceneDemo"
- 尺寸 1920x1080
- fps: 30
- durationInFrames: 900（30 秒）
- 新建 src/compositions/MultiSceneDemo.tsx
- 在 src/Root.tsx 註冊

先建立 5 個空場景元件：
- src/scenes/Scene1Title.tsx
- src/scenes/Scene2Workflow.tsx
- src/scenes/Scene3Code.tsx
- src/scenes/Scene4Showcase.tsx
- src/scenes/Scene5CTA.tsx

每個元件都是 AbsoluteFill + 不同背景色 + 場景名稱文字。

這樣 Claude 會幫你把骨架搭好。

Step 2：安裝 @remotion/transitions

Claude Code：

安裝 @remotion/transitions：
npm install @remotion/transitions

然後在 MultiSceneDemo.tsx 裡用它的 <TransitionSeries> 把 5 個場景串起來，
每個場景 6 秒（180 frames）。
暫時所有轉場都用 fade，durationInFrames 15。

這一步你會看到 Claude 產出類似這樣的結構：

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={180}>
    <Scene1Title />
  </TransitionSeries.Sequence>
  <TransitionSeries.Transition
    presentation={fade()}
    timing={linearTiming({ durationInFrames: 15 })}
  />
  <TransitionSeries.Sequence durationInFrames={180}>
    <Scene2Workflow />
  </TransitionSeries.Sequence>
  {/* ... */}
</TransitionSeries>

為什麼用 <TransitionSeries> 而不是自己用 interpolate 硬幹？ 因為轉場要同時控制上一個場景的離場跟下一個場景的進場，還要處理時間軸的 overlap。自己寫會變成 spaghetti；套件幫你算好 overlap，你只要選 presentation 就好。

💡 @remotion/transitions 完整 API、內建轉場列表、timing function 的選擇在 /docs/transitions。

Step 3：客製每個場景的內容

Claude Code：

把五個場景分別做好：

Scene1Title (src/scenes/Scene1Title.tsx)
- 深藍背景 #0f172a
- 中央文字 "Remotion 是什麼？"，100px 白色粗體
- 用 spring() 進場（frame 0 ~ 20）
- 背景加一個慢慢放大的 radial glow

Scene2Workflow
- 背景 #1e293b
- 左邊：一個 <> 程式碼 icon（用 emoji 💻）
- 中間：一個 → 箭頭（用 spring 從 scale 0 彈跳進場）
- 右邊：一個 🎬 影片 icon
- 下方文字 "程式碼 → 影片"

Scene3Code
- 背景純黑
- 一個 code snippet（用白色 monospace 字型）
  顯示 "const frame = useCurrentFrame();"
- 字元逐字打字機進場（每 2 frame 一個字元）

Scene4Showcase
- 背景 #1e40af
- 九宮格拼貼，用 9 個不同顏色的方塊
- 每個方塊用 spring 從 scale 0 彈跳進場
- 依序 stagger，每個方塊間隔 3 frames

Scene5CTA
- 背景亮黃色 #facc15
- 中央大字 "開始做吧" 黑色 160px
- 下方副標 "npx create-video@latest" 黑色 48px monospace
- CTA 用 spring 彈跳進場

做完回到 Studio 可以一個個場景切換看內容是否都對。

Step 4：換上五種不同的轉場

這就是本篇的重點：

把 MultiSceneDemo.tsx 的四個轉場換成不同的 presentation：

1. Scene1 → Scene2: fade()，durationInFrames 15
2. Scene2 → Scene3: slide({ direction: "from-right" })，durationInFrames 20
3. Scene3 → Scene4: wipe({ direction: "from-top" })，durationInFrames 25
4. Scene4 → Scene5: flip({ direction: "from-right" })，durationInFrames 30

timing 全部用 linearTiming，之後再調。

五種轉場的適用場景：

💡 五種轉場的參數差異（direction、outerEnterStyle、innerExitStyle）在 /docs/transitions 有互動範例。

Step 5：用 springTiming 取代 linearTiming

直線 timing 會讓轉場看起來很「廉價」。換成 spring：

把所有轉場的 timing 從 linearTiming 改成 springTiming：

linearTiming({ durationInFrames: 15 })
→
springTiming({
  config: { damping: 20, stiffness: 120 },
  durationInFrames: 15,
})

這樣轉場會有物理感，不會像直線 fade 那樣呆板。

這一步完成後，你會發現每個轉場都變得更「有機」了。

Step 6：加背景音效

轉場沒有聲音會空虛。加一個 whoosh 音效：

在 public/sfx/whoosh.mp3 放一個 0.5 秒的 whoosh 音效（可以去 freesound.org 抓）。

在 MultiSceneDemo.tsx 的每個轉場開始的 frame 用 <Audio> 播放：

- frame 180 - 7 (slide 開始前 7 frame)
- frame 360 - 7
- frame 540 - 7
- frame 720 - 7

每個 <Audio> 用 <Sequence from={...}> 限制只在轉場期間播放。
音量 0.6。

音效跟視覺轉場對齊能讓整支影片的質感從「作業」變成「廣告」。

💡 <Audio> 的 startFrom、endAt、volume、playbackRate 完整 API 在 /docs/audio。

Step 7：加隨機粒子背景

最後加一層「一直在動的背景」讓畫面不會死：

在 MultiSceneDemo.tsx 根層加一個粒子背景層：

1. 用 random() 生成 30 個粒子（固定 seed "particles"）
2. 每個粒子：
   - 隨機 x, y 起始位置
   - 隨機初始大小 4~12px
   - 隨機顏色（從預定義的 5 個顏色中選）
3. 動畫：
   - 所有粒子隨著 frame 持續往上飄（translateY -= frame * 0.5）
   - opacity 隨著 y 位置淡出
4. 粒子 z-index 在場景之下，但高於 AbsoluteFill 背景

為什麼要用 random() 而不是 Math.random()？ Remotion 的渲染會分散到多個 worker，Math.random() 每次呼叫會產生不同結果，每一幀的粒子位置都會跳。random("seed") 會用 seed 確保所有 worker 產生一樣的值。

💡 渲染安全的隨機數完整說明在 /docs/randomness。

Step 8：渲染

渲染 MultiSceneDemo 成 MP4：
- 1920x1080 H.264
- CRF 18 高品質
- 輸出到 out/multi-scene.mp4

完成！回顧學到的概念

本篇涵蓋的官方文件

• /docs/transitions — @remotion/transitions 完整 API
• /docs/randomness — 渲染安全的隨機數
• /docs/audio — 音訊元件基礎

延伸閱讀：

• /docs/sequence — <Sequence>（TransitionSeries 的底層）
• /docs/spring — spring 物理動畫（springTiming 背後的引擎）

常見問題

Q：我要做 10 個場景的影片，寫 10 個 <TransitionSeries.Sequence> 好冗，能用 .map() 嗎？ A：可以。<TransitionSeries> 的 children 接受陣列，但要注意 key 要穩定。範例：

<TransitionSeries>
  {scenes.map((scene, i) => (
    <React.Fragment key={scene.id}>
      <TransitionSeries.Sequence durationInFrames={180}>
        <scene.Component />
      </TransitionSeries.Sequence>
      {i < scenes.length - 1 && (
        <TransitionSeries.Transition
          presentation={fade()}
          timing={linearTiming({ durationInFrames: 15 })}
        />
      )}
    </React.Fragment>
  ))}
</TransitionSeries>

Q：轉場中兩個場景疊在一起，下層場景的動畫會不會繼續跑？ A：會。<TransitionSeries.Sequence> 內部的 useCurrentFrame() 是獨立的，不會因為轉場而暫停。如果你想要「離場後就凍結」，在場景元件內判斷 frame >= sceneDuration - transitionDuration 並停住動畫。

Q：自訂轉場可以做嗎？ A：可以。@remotion/transitions 的 presentation 只是一個 React 元件，接受 presentationProgress（0~1）。你可以寫自己的 presentation 做任意效果——morph、zoom、shatter 都行。官方文件有範例。

Q：powerpoint 的「星形擦除」這種轉場有嗎？ A：沒有內建，但可以用 SVG mask + clipPath 自己寫一個 presentation。或者直接用 CSS clip-path: polygon(...) 做星形。

下一步

• T06：數據動畫儀表板 — 學 interpolate 做動態圖表
• T09：影片剪輯——裁切、拼接、配樂 — <TransitionSeries> 的進階：接真實影片素材
• T14：參數化影片模板 — 把這支 demo 做成 props-driven 的多場景模板

有問題歡迎到 FB 社群 討論！