FPS 转换器
如果您设计的视频帧率与最终渲染的帧率不同,此片段将非常有用。将您的标记包装在 <FpsConverter>
组件中,覆盖其子元素的时间以实现不同的 FPS。
FpsConverter.tsxtsx
importReact , {useContext ,useMemo } from "react";import {Internals ,TimelineContextValue ,useVideoConfig } from "remotion";export constFpsConverter :React .FC <{originalFps : number;newFps : number;children :React .ReactNode ;}> = ({originalFps ,newFps ,children }) => {constcontext =useContext (Internals .Timeline .TimelineContext );constratio =originalFps /newFps ;const {id } =useVideoConfig ();constvalue :TimelineContextValue =useMemo (() => {return {...context ,// Remotion 4.0frame : { [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.tsxtsx
importReact , {useContext ,useMemo } from "react";import {Internals ,TimelineContextValue ,useVideoConfig } from "remotion";export constFpsConverter :React .FC <{originalFps : number;newFps : number;children :React .ReactNode ;}> = ({originalFps ,newFps ,children }) => {constcontext =useContext (Internals .Timeline .TimelineContext );constratio =originalFps /newFps ;const {id } =useVideoConfig ();constvalue :TimelineContextValue =useMemo (() => {return {...context ,// Remotion 4.0frame : { [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>);};