支持多种帧率

你可能希望为一个合成支持多种帧率。
例如，构建一个选项允许用户以 30 FPS 或 60 FPS 导出视频。
本文档概述了实现该功能的最佳实践。

🌐 You may want to support multiple frame rates for a composition.
For example, to build an option allow the user to export the video at either 30 FPS or 60 FPS.
This document outlines the best practices for doing so.

以帧率无关方式编写动画

🌐 Write animations frame-rate-independently

在随时间动画时，使用 useVideoConfig() 中的 fps 值来计算当前时间。

🌐 When animating over time, use the fps value from useVideoConfig() to calculate the current time.

如果帧率改变，以下动画的速度也会改变：

🌐 The following animation will change the speed if the frame rate is changed:

// Animate from second 1 to second 2
const animationProgress = interpolate(frame, [30, 60], [0, 1], {
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

最好让它依赖于帧率：

🌐 It is better to make it frame-rate-dependnt:

// Animate from second 1 to second 2
const {fps} = useVideoConfig();
const animationProgress = interpolate(frame, [1 * fps, 2 * fps], [0, 1], {
  extrapolateLeft: 'clamp',
  extrapolateRight: 'clamp',
});

在指定 <Sequence> 的 from 和 durationInFrames 时，也使用 fps 值：

🌐 Also use the fps value when specifying from and durationInFrames of a <Sequence>:

// Show for 3 seconds
<Sequence durationInFrames={3 * fps}>
  <div />
</Sequence>;

当传递 spring() 的 fps、delay 和 durationInFrames 时：

🌐 And when passing fps, delay and durationInFrames of a spring():

const animationProgress = spring({
  frame,
  fps,
  durationInFrames: 2 * fps,
  delay: 1 * fps,
});

动态更改帧率

🌐 Change frame rate dynamically

下面是如何根据input prop切换<Composition>的fps的方法：

🌐 Here is how you could switch the fps of a <Composition> based on an input prop:

import {Composition, useCurrentFrame, useVideoConfig} from 'remotion';

const VariableFps: React.FC<{
  frameRate: '30fps' | '60fps';
}> = () => {
  const {fps} = useVideoConfig();
  return <div>{fps} FPS</div>;
};

export const Root: React.FC = () => {
  return (
    <Composition
      id="VariableFps"
      component={VariableFps}
      width={1080}
      height={1080}
      durationInFrames={100}
      calculateMetadata={({props}) => {
        return {
          fps: props.frameRate === '60fps' ? 60 : 30,
        };
      }}
      defaultProps={{
        frameRate: '30fps',
      }}
    />
  );
};

不鼓励使用FPS转换

🌐 FPS Convert is discouraged

以前，这个页面显示了一个 FPS 转换器片段。不推荐使用它，因为它无法与媒体标签（<Html5Video>、<Audio>、<OffthreadVideo> 等）一起使用。

🌐 Previously, this page showed a FPS converter snippet.
It's usage is not recommended because it does not work with media tags (<Html5Video>, <Audio>, <OffthreadVideo>, etc.).

另请参阅

🌐 See also

以帧率无关方式编写动画​

动态更改帧率​

不鼓励使用FPS转换​

另请参阅​

以帧率无关方式编写动画

动态更改帧率

不鼓励使用FPS转换

另请参阅