使组件可重用

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

🌐 React components allow us to encapsulate video logic and reuse the same visuals multiple times.

考虑一个标题——为了使其可重用，将其提取到自己的组件中：

🌐 Consider a title - to make it reusable, factor it out into its own component:

MyComposition.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="你好，世界" />
    </AbsoluteFill>
  );
};

要显示标题的多个实例，请复制 <Title> 组件。

🌐 To render multiple instances of the title, duplicate the <Title> component.

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

🌐 You can also use the <Sequence> component to limit the duration of the first title and time-shift the appearance of the second title.

import {Sequence} from 'remotion';

export const MyVideo = () => {
  return (
    <AbsoluteFill>
      <Sequence durationInFrames={40}>
        <Title title="你好" />
      </Sequence>
      <Sequence from={40}>
        <Title title="世界" />
      </Sequence>
    </AbsoluteFill>
  );
};

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

🌐 You should see two titles appearing after each other.

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

🌐 Note that the value of useCurrentFrame() has been shifted in the second instance, so that it returns 0 only when the absolute time is 40. Before that, the sequence was not mounted at all.

序列默认是绝对定位的——你可以使用 layout="none" 让它们像普通的 <div> 一样渲染。

🌐 Sequences by default are absolutely positioned - you can use layout="none" to make them render like a regular <div>.

另请参阅

🌐 See also

另请参阅​

另请参阅