Editor de Animación Basado en Web con Sistema de Fotogramas Clave y Exportación de Video Transparente

Construimos un editor de animación basado en web usando React y Pixi.js para renderizado acelerado por hardware, un motor de fotogramas clave con más de 30 funciones de suavizado, y un backend potenciado por FFmpeg para exportar videos WebM con soporte completo de canal alfa VP9.

Arquitectura

• Frontend: React con TypeScript, Pixi.js para renderizado de lienzo acelerado por WebGL
• Gestión de Estado: Zustand para el estado centralizado de la escena
• Motor de Animación: Motor de interpolación de fotogramas clave personalizado con biblioteca de suavizado
• Backend: Express.js con soporte WebSocket para transmisión de fotogramas en tiempo real
• Codificación de Video: FFmpeg (vía fluent-ffmpeg) para codificación WebM VP9 con canal alfa
• Monorepo: Espacio de trabajo pnpm con tipos TypeScript compartidos entre frontend y backend

Motor de Animación

Sistema de Fotogramas Clave

El motor de animación principal soporta animación basada en fotogramas clave a través de múltiples propiedades:

• Posición — Coordenadas X/Y para rutas de movimiento
• Rotación — Animación de rotación basada en grados
• Color — Interpolación de color hexadecimal con transiciones suaves
• Alfa — Animación de opacidad para efectos de desvanecimiento
• Tamaño — Escalado de ancho, alto y radio

Cada fotograma clave almacena el tiempo (en milisegundos), un subconjunto de propiedades animadas y una función de suavizado seleccionada. El motor interpola entre los fotogramas clave circundantes en cualquier momento, aplicando la curva de suavizado apropiada.

Biblioteca de Suavizado (30+ Funciones)

Una biblioteca de suavizado completa que cubre todas las curvas de animación estándar:

• Lineal, Cuadrática, Cúbica, Cuártica, Quintica
• Sinusoidal, Exponencial, Circular
• Elástica (sobresalto como resorte), Atrás (anticipación), Rebote
• Cada una disponible en variantes de suavizado de entrada, salida y entrada-salida

Interpolación

Para cualquier marca de tiempo dada, el motor:

1. Encuentra los fotogramas clave circundantes (antes y después)
2. Calcula el progreso normalizado entre ellos (0 a 1)
3. Aplica la función de suavizado seleccionada al valor de progreso
4. Interpola los valores de las propiedades (lineal para números, lerp de color para valores hexadecimales)
5. Devuelve el conjunto completo de propiedades animadas para renderizado

Lienzo y Renderizado

Tipos de Objetos

• Rectángulos — Ancho, alto, color, alfa y rotación configurables
• Círculos — Radio, color, alfa y rotación configurables
• Texto — Familia de fuentes, tamaño de fuente, contenido, color y alfa configurables

Renderizado Acelerado por Hardware

• Renderizado Pixi.js WebGL para reproducción de vista previa suave a 60fps
• Resolución de lienzo configurable (por defecto 1920x1080 a 30fps)
• Soporte de fondo transparente con alfa de fondo ajustable
• Selección de objetos interactiva con resaltado visual
• Reproducción de animación en tiempo real con reproducción, pausa y desplazamiento de línea de tiempo

Interfaz del Editor

Barra de Herramientas

Botones de creación de objetos para agregar rectángulos, círculos y texto a la escena con propiedades predeterminadas que se pueden personalizar de inmediato.

Panel de Propiedades

Propiedades del objeto seleccionado editables en tiempo real: posición, tamaño, color, alfa, rotación y propiedades específicas del tipo (contenido de texto, configuración de fuente).

Línea de Tiempo

Línea de tiempo visual que muestra:

• Marcadores de fotogramas clave en sus posiciones de tiempo por objeto
• Cabezal de reproducción para el tiempo actual con desplazamiento
• Selección de función de suavizado por fotograma clave
• Controles para agregar/eliminar fotogramas clave en la posición actual del cabezal de reproducción

Pipeline de Exportación de Video

Captura de Fotogramas

1. La duración de la animación y los FPS determinan el conteo total de fotogramas
2. Cada fotograma se renderiza individualmente a resolución completa
3. El contenido del lienzo se captura como blob PNG por fotograma
4. Los fotogramas se recopilan para su carga en el backend de codificación

Backend de Codificación

El backend Express.js maneja la codificación de video a través de un sistema basado en trabajos:

1. Creación de Trabajo — El cliente solicita un nuevo trabajo de exportación (basado en UUID)
2. Carga de Fotogramas — Los fotogramas se cargan en lotes (o se transmiten vía WebSocket)
3. Codificación FFmpeg — Los fotogramas se ensamblan en video WebM con códec VP9
4. Canal Alfa — Usa formato de píxel yuva420p para soporte completo de transparencia
5. Seguimiento de Progreso — Actualizaciones de progreso en tiempo real durante la codificación
6. Descarga — Video completado disponible para descarga con verificación de transparencia

Alternativa WebSocket

Para exportación en tiempo real, los fotogramas se pueden transmitir directamente vía WebSocket en lugar de carga por lotes HTTP, con actualizaciones de progreso en vivo durante las fases de captura, carga y codificación.

Características Clave

1. Animación de Fotogramas Clave — Animación basada en línea de tiempo con fotogramas clave por propiedad
2. 30+ Funciones de Suavizado — Biblioteca completa de suavizado para curvas de animación profesional
3. Exportación de Video Transparente — VP9 WebM con soporte completo de canal alfa
4. Lienzo Acelerado por Hardware — Renderizado Pixi.js WebGL para vista previa en tiempo real suave
5. Múltiples Tipos de Objetos — Rectángulos, círculos y texto con animación independiente
6. Vista Previa en Tiempo Real — Reproducción, pausa y desplazamiento a través de animaciones al instante
7. Exportación por Lotes y Transmisión — Carga por lotes HTTP o transmisión de fotogramas en tiempo real vía WebSocket
8. Salida Configurable — Configuración de resolución, FPS y bitrate para exportación
9. Monorepo Seguro por Tipo — Tipos TypeScript compartidos entre frontend y backend
10. Fondos Personalizados — Color de fondo ajustable y alfa con soporte de imagen/video