useCurrentFrame()

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

如果您编写的组件被包裹在<Sequence>中，useCurrentFrame将返回相对于 Sequence 开始时的帧。

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

tsx
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>
  );
};

tsx
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 />，您可以将多个元素组合在一起，并独立地对它们进行时间偏移，而不改变它们的动画。

获取时间轴的绝对帧

在极少数情况下，您希望在序列内部访问时间轴的绝对帧，请在顶层组件使用 useCurrentFrame()，然后将其作为 prop 传递给 <Sequence /> 的子组件。

tsx
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>
  );
};

tsx
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>
  );
};

获取时间轴的绝对帧​

参见​

获取时间轴的绝对帧

参见