轉場效果 - RemotionLab

什麼是轉場？

轉場是兩個場景之間的過渡動畫。Remotion 提供 @remotion/transitions 套件，內建多種轉場效果。

安裝

npm install @remotion/transitions

基本用法

用 <TransitionSeries> 取代多個 <Sequence>，自動在場景之間加入轉場：

import { AbsoluteFill } from "remotion";
import {
  TransitionSeries,
  linearTiming,
} from "@remotion/transitions";
import { fade } from "@remotion/transitions/fade";
 
export const MyVideo: React.FC = () => {
  return (
    <TransitionSeries>
      <TransitionSeries.Sequence durationInFrames={60}>
        <Scene1 />
      </TransitionSeries.Sequence>
 
      <TransitionSeries.Transition
        presentation={fade()}
        timing={linearTiming({ durationInFrames: 15 })}
      />
 
      <TransitionSeries.Sequence durationInFrames={60}>
        <Scene2 />
      </TransitionSeries.Sequence>
    </TransitionSeries>
  );
};

內建轉場效果

效果	引入路徑	說明
`fade`	`@remotion/transitions/fade`	淡入淡出
`slide`	`@remotion/transitions/slide`	滑動（可指定方向）
`wipe`	`@remotion/transitions/wipe`	擦除
`flip`	`@remotion/transitions/flip`	翻轉
`clockWipe`	`@remotion/transitions/clock-wipe`	時鐘擦除
`none`	`@remotion/transitions/none`	無動畫（僅重疊）

滑動轉場

import { slide } from "@remotion/transitions/slide";
 
<TransitionSeries.Transition
  presentation={slide({ direction: "from-right" })}
  timing={linearTiming({ durationInFrames: 20 })}
/>

方向選項："from-left"、"from-right"、"from-top"、"from-bottom"。

時間控制

有兩種時間函數：

import { linearTiming, springTiming } from "@remotion/transitions";
 
// 線性：均勻速度
linearTiming({ durationInFrames: 15 })
 
// 彈簧：自然物理效果
springTiming({ config: { damping: 12 } })

多個轉場

<TransitionSeries>
  <TransitionSeries.Sequence durationInFrames={60}>
    <Intro />
  </TransitionSeries.Sequence>
 
  <TransitionSeries.Transition
    presentation={fade()}
    timing={linearTiming({ durationInFrames: 15 })}
  />
 
  <TransitionSeries.Sequence durationInFrames={90}>
    <MainContent />
  </TransitionSeries.Sequence>
 
  <TransitionSeries.Transition
    presentation={slide({ direction: "from-bottom" })}
    timing={springTiming({ config: { damping: 10 } })}
  />
 
  <TransitionSeries.Sequence durationInFrames={60}>
    <Outro />
  </TransitionSeries.Sequence>
</TransitionSeries>

小結

用 @remotion/transitions 套件加入轉場效果
<TransitionSeries> 管理多個場景和它們之間的轉場
內建多種效果：fade、slide、wipe、flip 等
支援 linearTiming 和 springTiming 兩種時間函數