FPS 转换器

如果您设计的视频帧率与最终渲染的帧率不同，此片段将非常有用。将您的标记包装在 <FpsConverter> 组件中，覆盖其子元素的时间以实现不同的 FPS。

FpsConverter.tsx
tsx
import React, { useContext, useMemo } from "react";
import { Internals, TimelineContextValue, useVideoConfig } from "remotion";
 
export const FpsConverter: React.FC<{
  originalFps: number;
  newFps: number;
  children: React.ReactNode;
}> = ({ originalFps, newFps, children }) => {
  const context = useContext(Internals.Timeline.TimelineContext);
  const ratio = originalFps / newFps;
  const { id } = useVideoConfig();
 
  const value: TimelineContextValue = useMemo(() => {
    return {
      ...context,
      // Remotion 4.0
      frame: { [id]: (context.frame[id] ?? 0) * ratio },
      // Remotion 3.0
      // frame: context.frame * ratio,
    };
  }, [context, ratio]);
 
  return (
    <Internals.Timeline.TimelineContext.Provider value={value}>
      {children}
    </Internals.Timeline.TimelineContext.Provider>
  );
};

FpsConverter.tsx
tsx
import React, { useContext, useMemo } from "react";
import { Internals, TimelineContextValue, useVideoConfig } from "remotion";
 
export const FpsConverter: React.FC<{
  originalFps: number;
  newFps: number;
  children: React.ReactNode;
}> = ({ originalFps, newFps, children }) => {
  const context = useContext(Internals.Timeline.TimelineContext);
  const ratio = originalFps / newFps;
  const { id } = useVideoConfig();
 
  const value: TimelineContextValue = useMemo(() => {
    return {
      ...context,
      // Remotion 4.0
      frame: { [id]: (context.frame[id] ?? 0) * ratio },
      // Remotion 3.0
      // frame: context.frame * ratio,
    };
  }, [context, ratio]);
 
  return (
    <Internals.Timeline.TimelineContext.Provider value={value}>
      {children}
    </Internals.Timeline.TimelineContext.Provider>
  );
};

用法
tsx
export const Converted: React.FC = () => {
  return (
    <FpsConverter newFps={29.97} originalFps={60}>
      <MyComp></MyComp>
    </FpsConverter>
  );
};

用法
tsx
export const Converted: React.FC = () => {
  return (
    <FpsConverter newFps={29.97} originalFps={60}>
      <MyComp></MyComp>
    </FpsConverter>
  );
};