Skip to main content

图层

与普通网站不同,视频具有固定的尺寸。这意味着可以使用 position: "absolute"

在 Remotion 中,您经常希望将元素“层叠”在一起。
这是视频编辑器和 Photoshop 中的常见模式。

一个简单的方法是使用 <AbsoluteFill> 组件:

MyComp.tsx
tsx
import React from "react";
import { AbsoluteFill, Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
return (
<AbsoluteFill>
<AbsoluteFill>
<Img src={staticFile("bg.png")} />
</AbsoluteFill>
<AbsoluteFill>
<h1>This text appears on top of the video!</h1>
</AbsoluteFill>
</AbsoluteFill>
);
};
MyComp.tsx
tsx
import React from "react";
import { AbsoluteFill, Img, staticFile } from "remotion";
 
export const MyComp: React.FC = () => {
return (
<AbsoluteFill>
<AbsoluteFill>
<Img src={staticFile("bg.png")} />
</AbsoluteFill>
<AbsoluteFill>
<h1>This text appears on top of the video!</h1>
</AbsoluteFill>
</AbsoluteFill>
);
};

这将在图像上方呈现文本。

如果您只想在特定持续时间内显示一个元素,可以使用 <Sequence> 组件,默认情况下也是绝对定位的。

MyComp.tsx
tsx
import React from "react";
import { AbsoluteFill, Img, staticFile, Sequence } from "remotion";
 
export const MyComp: React.FC = () => {
return (
<AbsoluteFill>
<Sequence>
<Img src={staticFile("bg.png")} />
</Sequence>
<Sequence from={60} durationInFrames={40}>
<h1>This text appears after 60 frames!</h1>
</Sequence>
</AbsoluteFill>
);
};
MyComp.tsx
tsx
import React from "react";
import { AbsoluteFill, Img, staticFile, Sequence } from "remotion";
 
export const MyComp: React.FC = () => {
return (
<AbsoluteFill>
<Sequence>
<Img src={staticFile("bg.png")} />
</Sequence>
<Sequence from={60} durationInFrames={40}>
<h1>This text appears after 60 frames!</h1>
</Sequence>
</AbsoluteFill>
);
};

绝对定位的元素在树中的位置越低,它在图层堆栈中的位置就越高。
如果您了解这种行为,您可以利用它,并在大多数情况下避免使用 z-index

参见