圖層 - RemotionLab

AbsoluteFill 圖層

<AbsoluteFill> 是 Remotion 的全螢幕容器。當你把多個 <AbsoluteFill> 放在一起，它們會像 Photoshop 的圖層一樣疊加：

import { AbsoluteFill } from "remotion";
 
export const LayeredScene: React.FC = () => {
  return (
    <AbsoluteFill>
      {/* 最底層：背景 */}
      <AbsoluteFill style={{ backgroundColor: "#0f0f1a" }} />
 
      {/* 中間層：裝飾 */}
      <AbsoluteFill style={{ opacity: 0.5 }}>
        <div
          style={{
            width: 500,
            height: 500,
            borderRadius: "50%",
            background: "radial-gradient(#6366f1, transparent)",
            position: "absolute",
            top: -100,
            right: -100,
          }}
        />
      </AbsoluteFill>
 
      {/* 最上層：內容 */}
      <AbsoluteFill
        style={{ justifyContent: "center", alignItems: "center" }}
      >
        <h1 style={{ color: "white", fontSize: 72 }}>最上層</h1>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};

後面的元素會疊在前面的上方（跟 CSS z-index 的概念一樣）。

圖層的用途

常見的圖層結構：

背景層（純色或漸層）
  ↓
裝飾層（幾何圖形、粒子效果）
  ↓
內容層（文字、圖表）
  ↓
覆蓋層（浮水印、標誌）

搭配動畫

每個圖層可以獨立動畫：

import { AbsoluteFill, useCurrentFrame, interpolate } from "remotion";
 
export const AnimatedLayers: React.FC = () => {
  const frame = useCurrentFrame();
 
  const bgOpacity = interpolate(frame, [0, 30], [0, 1], {
    extrapolateRight: "clamp",
  });
 
  const textY = interpolate(frame, [15, 45], [50, 0], {
    extrapolateRight: "clamp",
  });
 
  return (
    <AbsoluteFill>
      <AbsoluteFill
        style={{ backgroundColor: "#0f0f1a", opacity: bgOpacity }}
      />
      <AbsoluteFill
        style={{
          justifyContent: "center",
          alignItems: "center",
          transform: `translateY(${textY}px)`,
        }}
      >
        <h1 style={{ color: "white", fontSize: 64 }}>圖層動畫</h1>
      </AbsoluteFill>
    </AbsoluteFill>
  );
};

搭配 Sequence

用 <Sequence> 控制每個圖層的出場時間：

import { AbsoluteFill, Sequence } from "remotion";
 
export const TimedLayers: React.FC = () => {
  return (
    <AbsoluteFill style={{ backgroundColor: "#0f0f1a" }}>
      <Sequence from={0}>
        <Background />
      </Sequence>
      <Sequence from={15}>
        <Title />
      </Sequence>
      <Sequence from={30}>
        <Subtitle />
      </Sequence>
    </AbsoluteFill>
  );
};

小結

多個 <AbsoluteFill> 會像圖層一樣疊加
後面的元素疊在前面的上方
每個圖層可以獨立動畫和控制時序
常見結構：背景 → 裝飾 → 內容 → 覆蓋