Skip to main content

使组件可重用

React 组件允许我们封装视频逻辑并多次重用相同的视觉效果。

考虑一个标题 - 为了使其可重用，将其分解为自己的组件：

MyComposition.tsx
tsx
import {AbsoluteFill, interpolate, useCurrentFrame} from 'remotion';
 
const Title: React.FC<{title: string}> = ({title}) => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 20], [0, 1], {
    extrapolateRight: 'clamp',
  });
 
  return (
    <div style={{opacity, textAlign: 'center', fontSize: '7em'}}>{title}</div>
  );
};
 
export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Title title="Hello World" />
    </AbsoluteFill>
  );
};
MyComposition.tsx
tsx
import {AbsoluteFill, interpolate, useCurrentFrame} from 'remotion';
 
const Title: React.FC<{title: string}> = ({title}) => {
  const frame = useCurrentFrame();
  const opacity = interpolate(frame, [0, 20], [0, 1], {
    extrapolateRight: 'clamp',
  });
 
  return (
    <div style={{opacity, textAlign: 'center', fontSize: '7em'}}>{title}</div>
  );
};
 
export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Title title="Hello World" />
    </AbsoluteFill>
  );
};

要呈现多个标题实例，请复制 <Title> 组件。

您还可以使用 <Sequence> 组件来限制第一个标题的持续时间，并调整第二个标题的出现时间。

tsx
import {Sequence} from 'remotion';
 
export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Sequence durationInFrames={40}>
        <Title title="Hello" />
      </Sequence>
      <Sequence from={40}>
        <Title title="World" />
      </Sequence>
    </AbsoluteFill>
  );
};
tsx
import {Sequence} from 'remotion';
 
export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Sequence durationInFrames={40}>
        <Title title="Hello" />
      </Sequence>
      <Sequence from={40}>
        <Title title="World" />
      </Sequence>
    </AbsoluteFill>
  );
};

您应该看到两个标题依次出现。

请注意，useCurrentFrame() 的值在第二个实例中已经移动，因此仅当绝对时间为 40 时才返回 0。在此之前，该序列根本没有被挂载。

默认情况下，序列是绝对定位的 - 您可以使用 layout="none" 来使它们呈现为常规的 <div>。

另请参阅​