图层
与普通网站不同,视频具有固定的尺寸。这意味着可以使用 position: "absolute"
!
在 Remotion 中,您经常希望将元素“层叠”在一起。
这是视频编辑器和 Photoshop 中的常见模式。
一个简单的方法是使用 <AbsoluteFill>
组件:
MyComp.tsxtsx
importReact from "react";import {AbsoluteFill ,Img ,staticFile } from "remotion";export constMyComp :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.tsxtsx
importReact from "react";import {AbsoluteFill ,Img ,staticFile } from "remotion";export constMyComp :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.tsxtsx
importReact from "react";import {AbsoluteFill ,Img ,staticFile ,Sequence } from "remotion";export constMyComp :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.tsxtsx
importReact from "react";import {AbsoluteFill ,Img ,staticFile ,Sequence } from "remotion";export constMyComp :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
。