- Un
vídeo
es una serie de imágenes a lo largo del tiempo. - Un
fotograma
representa 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
.