- Un
vídeoes una serie de imágenes a lo largo del tiempo. - Un
fotogramarepresenta el contenido de la película en un instante de tiempo ("una imagen"). Por tanto, una animación no es más que una sucesión de fotogramas.
import { useCurrentFrame, AbsoluteFill } from "remotion";
export const MyComposition = () => {
const { fps, durationInFrames, width, height } = useVideoConfig(); // Podemos derivar estos valores del gancho `useVideoConfig()`
const frame = useCurrentFrame(); // Devuelve el número de fotograma actual, el cual puedes usar para animar cuadro por cuadro
const seconds = durationInFrames / fps; // Calcula la duración del video en segundos
return (
<AbsoluteFill
style={{
justifyContent: "center",
alignItems: "center",
fontSize: 60,
backgroundColor: "white"
}}
>
This {width}x{height}px video is {durationInFrames / fps} seconds long.
The current frame is {frame}.
</AbsoluteFill>
);
};
Un video tiene 4 propiedades:
width: en píxeles.height: en píxeles.durationInFrames: número total de fotogramas.fps: fotogramas por segundo.
Frames
- El primer frame o cuadro de un video es
0, - El último es
durationInFrames - 1.