useCurrentFrame()

使用这个钩子，你可以获取视频的当前帧。帧是从 0 开始索引的，这意味着第一帧是 0，最后一帧是合成时长的总帧数减一。要了解更多关于 Remotion 如何处理时间的信息，请阅读关于基础知识的页面。

🌐 With this hook, you can retrieve the current frame of the video. Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one. To learn more about how Remotion works with time, read the page about the fundamentals.

如果你正在编写的组件被封装在一个 <Sequence> 中，useCurrentFrame 将返回相对于序列开始时的帧。

🌐 If the component you are writing is wrapped in a <Sequence>, useCurrentFrame will return the frame relative to when the Sequence starts.

假设时间线标记位于第25帧。在下面的示例中，useCurrentFrame() 将返回 25，除非在字幕组件中，它将返回 15，因为它位于从第10帧开始的序列中。

🌐 Say the timeline marker is positioned at frame 25. In the example below, useCurrentFrame() will return 25, except within the Subtitle component, where it will return 15 because it is within a sequence that starts at frame 10.

import {Sequence, useCurrentFrame} from 'remotion';

const Title = () => {
  const frame = useCurrentFrame(); // 25
  return <div>{frame}</div>;
};

const Subtitle = () => {
  const frame = useCurrentFrame(); // 15
  return <div>{frame}</div>;
};

const MyVideo = () => {
  const frame = useCurrentFrame(); // 25

  return (
    <div>
      <Title />
      <Sequence from={10}>
        <Subtitle />
      </Sequence>
    </div>
  );
};

使用 <Sequence />，你可以将多个元素组合在一起，并独立于彼此进行时间偏移，而不改变它们的动画。

🌐 Using <Sequence />'s, you can compose multiple elements together and time-shift them independently from each other without changing their animation.

获取时间线的绝对帧

🌐 Getting the absolute frame of the timeline

在极少数情况下，如果你想访问序列中时间线的绝对帧，请在顶层组件使用 useCurrentFrame()，然后将其作为 prop 传递给 <Sequence /> 的子组件。

🌐 In rare circumstances, you want access to the absolute frame of the timeline inside a sequence, use useCurrentFrame() at the top-level component and then pass it down as a prop to the children of the <Sequence />.


const Subtitle: React.FC<{absoluteFrame: number}> = ({absoluteFrame}) => {
  console.log(useCurrentFrame()); // 15
  console.log(absoluteFrame); // 25

  return null;
};

const MyVideo = () => {
  const frame = useCurrentFrame(); // 25

  return (
    <Sequence from={10}>
      <Subtitle absoluteFrame={frame} />
    </Sequence>
  );
};

兼容性

🌐 Compatibility

Browsers			Environments
Chrome	Firefox	Safari	Client-side rendering	Server-side rendering	Player	Studio

另请参阅

🌐 See also

获取时间线的绝对帧​

兼容性​

另请参阅​

获取时间线的绝对帧

兼容性

另请参阅