remotion 是做什麼的？
使用 React 進行程式化影片製作的最佳實踐與全面指南，涵蓋動畫、合成與媒體處理。
簡介
此技能提供使用 Remotion 程式化創建影片的逐步指南。Remotion 是一個基於 React 的函式庫，讓你能夠使用 JavaScript/TypeScript 和 React 元件編寫影片。它適用於動態影片生成、資料視覺化以及自動化影片製作工作流程。
安裝
在你的專案中安裝 Remotion：
npm init video
或者手動安裝：
npm install remotion @remotion/cli
基本用法
創建一個簡單的影片
import { Composition, useCurrentFrame } from 'remotion';
export const MyComposition: React.FC = () => {
const frame = useCurrentFrame();
return <div>目前影格: {frame}</div>;
};
定義合成
import { Composition } from 'remotion';
import { MyComposition } from './MyComposition';
export const RemotionRoot: React.FC = () => {
return (
<>
<Composition
id="MyComp"
component={MyComposition}
durationInFrames={150}
fps={30}
width={1920}
height={1080}
/>
</>
);
};
動畫
使用 useCurrentFrame() Hook 基於時間創建動畫：
import { useCurrentFrame, interpolate } from 'remotion';
export const AnimatedBox: React.FC = () => {
const frame = useCurrentFrame();
const opacity = interpolate(frame, [0, 50], [0, 1]);
return <div style={{ opacity }}>淡入</div>;
};
媒體處理
載入影片
import { Video, Audio } from 'remotion';
export const MyVideo: React.FC = () => {
return (
<div>
<Video src="https://example.com/video.mp4" />
<Audio src="https://example.com/audio.mp3" />
</div>
);
};
序列
使用 <Sequence> 元件在時間線上對齊元件：
import { Sequence } from 'remotion';
export const TimedContent: React.FC = () => {
return (
<div>
<Sequence from={0} durationInFrames={50}>
<FirstPart />
</Sequence>
<Sequence from={50} durationInFrames={100}>
<SecondPart />
</Sequence>
</div>
);
};
渲染
在本地渲染影片：
npx remotion render src/index.ts MyComp out/video.mp4
或渲染為靜止影像：
npx remotion still src/index.ts MyComp out/frame.png
伺服器端渲染
對於伺服器端渲染，使用 @remotion/renderer：
import { renderMedia } from '@remotion/renderer';
import { getCompositions } from '@remotion/renderer';
const compositions = await getCompositions(bundleLocation);
await renderMedia({
composition: compositions[0],
serveUrl: bundleLocation,
codec: 'h264',
outputLocation: 'out/video.mp4',
});
部署
- 使用
@remotion/lambda在 AWS Lambda 上渲染影片。 - 將影片託管在任何靜態檔案伺服器或雲端儲存體（如 S3）上。
最佳實踐
- 保持元件純淨且可測試。
- 將邏輯拆分為小型可重用的元件。
- 對動畫使用
interpolate函式，以實現流暢的轉場效果。 - 使用
useVideoConfig()存取影片解析度與幀率。 - 在最終渲染前，使用
remotion preview進行測試。