Éditeur d'animations basé sur le Web avec système de keyframes et exportation vidéo transparente

Nous avons construit un éditeur d'animations basé sur le Web utilisant React et Pixi.js pour le rendu accéléré matériellement, un moteur de keyframes avec plus de 30 fonctions d'easing, et un backend alimenté par FFmpeg pour exporter des vidéos WebM avec un support complet du canal alpha VP9.

Architecture

• Frontend: React avec TypeScript, Pixi.js pour le rendu de canvas accéléré par WebGL
• Gestion d'état : Zustand pour l'état centralisé de la scène
• Moteur d'animation : Moteur d'interpolation de keyframes personnalisé avec bibliothèque d'easing
• Backend : Express.js avec support WebSocket pour le streaming de frames en temps réel
• Encodage vidéo : FFmpeg (via fluent-ffmpeg) pour l'encodage VP9 WebM avec canal alpha
• Monorepo : espace de travail pnpm avec des types TypeScript partagés entre le frontend et le backend

Moteur d'animation

Système de keyframes

Le moteur d'animation central prend en charge l'animation basée sur des keyframes pour plusieurs propriétés :

• Position — Coordonnées X/Y pour les chemins de mouvement
• Rotation — Animation de rotation basée sur les degrés
• Couleur — Interpolation de couleur hexadécimale avec des transitions fluides
• Alpha — Animation d'opacité pour les effets de fondu
• Taille — Mise à l'échelle de la largeur, de la hauteur et du rayon

Chaque keyframe stocke le temps (en millisecondes), un sous-ensemble de propriétés animées et une fonction d'easing sélectionnée. Le moteur interpole entre les keyframes environnantes à tout moment, appliquant la courbe d'easing appropriée.

Bibliothèque d'Easing (plus de 30 fonctions)

Une bibliothèque d'easing complète couvrant toutes les courbes d'animation standard :

• Linéaire, Quadratique, Cubique, Quartique, Quintique
• Sinusoïdale, Exponentielle, Circulaire
• Élastique (dépassement de type ressort), Retour (anticipation), Rebond
• Chacune disponible en variantes ease-in, ease-out et ease-in-out

Interpolation

Pour tout horodatage donné, le moteur :

1. Trouve les keyframes environnantes (avant et après)
2. Calcule la progression normalisée entre elles (0 à 1)
3. Applique la fonction d'easing sélectionnée à la valeur de progression
4. Interpole les valeurs de propriété (linéaire pour les nombres, lerp de couleur pour les valeurs hexadécimales)
5. Renvoie l'ensemble complet des propriétés animées pour le rendu

Canvas et Rendu

Types d'objets

• Rectangles — Largeur, hauteur, couleur, alpha, rotation configurables
• Cercles — Rayon, couleur, alpha, rotation configurables
• Texte — Famille de police, taille de police, contenu, couleur, alpha configurables

Rendu accéléré matériellement

• Rendu WebGL de Pixi.js pour une lecture fluide de la prévisualisation à 60fps
• Résolution du canvas configurable (par défaut 1920x1080 à 30fps)
• Support d'arrière-plan transparent avec alpha d'arrière-plan réglable
• Sélection interactive d'objets avec mise en évidence visuelle
• Lecture d'animations en temps réel avec lecture, pause et navigation sur la timeline

Interface de l'éditeur

Barre d'outils

Boutons de création d'objets pour ajouter des rectangles, des cercles et du texte à la scène avec des propriétés par défaut personnalisables immédiatement.

Panneau des propriétés

Propriétés de l'objet sélectionné éditables en temps réel : position, taille, couleur, alpha, rotation et propriétés spécifiques au type (contenu du texte, paramètres de police).

Timeline

Timeline visuelle affichant :

• Marqueurs de keyframes à leurs positions temporelles par objet
• Tête de lecture pour le temps actuel avec navigation
• Sélection de la fonction d'easing par keyframe
• Contrôles d'ajout/suppression de keyframes à la position actuelle de la tête de lecture

Pipeline d'exportation vidéo

Capture d'image

1. La durée de l'animation et le FPS déterminent le nombre total d'images
2. Chaque image est rendue individuellement en pleine résolution
3. Contenu du canvas capturé comme blob PNG par image
4. Images collectées pour être téléchargées vers le backend d'encodage

Backend d'encodage

Le backend Express.js gère l'encodage vidéo via un système basé sur des tâches :

1. Création de tâche — Le client demande une nouvelle tâche d'exportation (basée sur UUID)
2. Téléchargement d'images — Images téléchargées par lots (ou diffusées via WebSocket)
3. Encodage FFmpeg — Images assemblées en vidéo WebM avec le codec VP9
4. Canal Alpha — Utilise le format de pixel yuva420p pour un support complet de la transparence
5. Suivi de progression — Mises à jour de progression en temps réel pendant l'encodage
6. Téléchargement — Vidéo terminée disponible en téléchargement avec vérification de la transparence

Alternative WebSocket

Pour l'exportation en temps réel, les images peuvent être diffusées directement via WebSocket au lieu du téléchargement par lots HTTP, avec des mises à jour de progression en direct tout au long des phases de capture, de téléchargement et d'encodage.

Fonctionnalités clés

1. Animation par Keyframes — Animation basée sur une timeline avec des keyframes par propriété
2. Plus de 30 fonctions d'Easing — Bibliothèque d'easing complète pour des courbes d'animation professionnelles
3. Exportation vidéo transparente — VP9 WebM avec support complet du canal alpha
4. Canvas accéléré matériellement — Rendu WebGL de Pixi.js pour une prévisualisation fluide en temps réel
5. Types d'objets multiples — Rectangles, cercles et texte avec animation indépendante
6. Prévisualisation en temps réel — Lecture, pause et navigation instantanées dans les animations
7. Exportation par lots et en streaming — Téléchargement par lots HTTP ou streaming d'images en temps réel via WebSocket
8. Sortie configurable — Paramètres de résolution, FPS et débit pour l'exportation
9. Monorepo Type-Safe — Types TypeScript partagés entre le frontend et le backend
10. Arrière-plans personnalisés — Couleur et alpha d'arrière-plan réglables avec support image/vidéo