Webbasierter Animationseditor mit Keyframe-System & Export transparenter Videos
Ein Team für Kreativtools benötigte einen browserbasierten Animationseditor, der es Designern ermöglichte, flüssige, Keyframe-gesteuerte Animationen mit mehreren Objekten zu erstellen und diese als Videos mit voller Alpha-Kanal-Transparenz zu exportieren — um eine nahtlose Überlagerung auf andere Videoinhalte zu ermöglichen.
Ihr Projekt besprechen
Die Herausforderung
Die Erstellung animierter Assets mit transparentem Hintergrund für die Videoproduktion war umständlich:
- Nur-Desktop-Tools — Bestehende Animationstools (After Effects, Motion) erforderten teure Lizenzen und Desktop-Installationen
- Kein Alpha-Kanal-Export — Die meisten webbasierten Animationstools exportierten undurchsichtige Videos ohne Transparenzunterstützung
- Komplexes Keyframing — Designer benötigten eine intuitive Keyframe-basierte Animation mit Easing-Steuerung, nicht nur CSS-Transitions
- Echtzeit-Vorschau — Editoren mussten Animationen vor dem Export flüssig abspielen können
- Mehrere Objekttypen — Animationen erforderten Formen und Text mit unabhängigen Animations-Timelines
- Exportqualität — Die Ausgabe musste produktionsreife Videodateien sein, die in professionellen Bearbeitungsworkflows verwendet werden konnten
Unsere Lösung
Wir haben einen webbasierten Animationseditor entwickelt, der React und Pixi.js fĂĽr hardwarebeschleunigtes Rendering, eine Keyframe-Engine mit ĂĽber 30 Easing-Funktionen und ein FFmpeg-basiertes Backend zum Exportieren von WebM-Videos mit voller VP9-Alpha-Kanal-UnterstĂĽtzung verwendet.
Architektur
- Frontend: React mit TypeScript, Pixi.js fĂĽr WebGL-beschleunigtes Canvas-Rendering
- State Management: Zustand fĂĽr den zentralisierten Szenen-Status
- Animation Engine: Benutzerdefinierte Keyframe-Interpolations-Engine mit Easing-Bibliothek
- Backend: Express.js mit WebSocket-UnterstĂĽtzung fĂĽr Echtzeit-Frame-Streaming
- Video Encoding: FFmpeg (via fluent-ffmpeg) fĂĽr VP9 WebM-Kodierung mit Alpha-Kanal
- Monorepo: pnpm workspace mit gemeinsamen TypeScript-Typen ĂĽber Frontend und Backend hinweg
Animations-Engine
Keyframe-System
Die Kern-Animations-Engine unterstĂĽtzt Keyframe-basierte Animationen ĂĽber mehrere Eigenschaften hinweg:
- Position — X/Y-Koordinaten für Bewegungspfade
- Rotation — Grad-basierte Rotationsanimation
- Farbe — Hex-Farbinterpolation mit weichen Übergängen
- Alpha — Deckkraftanimation für Überblendeffekte
- Größe — Breiten-, Höhen- und Radius-Skalierung
Jeder Keyframe speichert die Zeit (in Millisekunden), eine Untermenge der animierten Eigenschaften und eine ausgewählte Easing-Funktion. Die Engine interpoliert jederzeit zwischen umgebenden Keyframes, wobei die entsprechende Easing-Kurve angewendet wird.
Easing-Bibliothek (ĂĽber 30 Funktionen)
Eine umfassende Easing-Bibliothek deckt alle Standard-Animationskurven ab:
- Linear, Quadratic, Cubic, Quartic, Quintic
- Sinusoidal, Exponential, Circular
- Elastic (federähnliches Überschwingen), Back (Antizipation), Bounce
- Jede verfĂĽgbar in Ease-in-, Ease-out- und Ease-in-out-Varianten
Interpolation
FĂĽr jeden gegebenen Zeitstempel fĂĽhrt die Engine folgende Schritte aus:
- Findet die umgebenden Keyframes (vorher und nachher)
- Berechnet den normalisierten Fortschritt zwischen ihnen (0 bis 1)
- Wendet die ausgewählte Easing-Funktion auf den Fortschrittswert an
- Interpoliert Eigenschaftswerte (linear fĂĽr Zahlen, Color-Lerp fĂĽr Hex-Werte)
- Gibt den vollständigen Satz der animierten Eigenschaften für das Rendering zurück
Canvas & Rendering
Objekttypen
- Rechtecke — Konfigurierbare Breite, Höhe, Farbe, Alpha, Rotation
- Kreise — Konfigurierbarer Radius, Farbe, Alpha, Rotation
- Text — Konfigurierbare Schriftfamilie, Schriftgröße, Inhalt, Farbe, Alpha
Hardwarebeschleunigtes Rendering
- Pixi.js WebGL-Rendering fĂĽr flĂĽssige 60fps-Vorschauwiedergabe
- Konfigurierbare Canvas-Auflösung (Standard 1920x1080 bei 30fps)
- UnterstĂĽtzung fĂĽr transparenten Hintergrund mit einstellbarem Hintergrund-Alpha
- Interaktive Objektauswahl mit visueller Hervorhebung
- Echtzeit-Animationswiedergabe mit Wiedergabe, Pause und Timeline-Scrubbing
Editor-Oberfläche
Symbolleiste
Objekterstellungs-Buttons zum Hinzufügen von Rechtecken, Kreisen und Text zur Szene mit Standardeigenschaften, die sofort angepasst werden können.
Eigenschaften-Panel
Ausgewählte Objekteigenschaften in Echtzeit bearbeitbar: Position, Größe, Farbe, Alpha, Rotation und typspezifische Eigenschaften (Textinhalt, Schriftarteneinstellungen).
Timeline
Visuelle Timeline zeigt:
- Keyframe-Marker an ihren Zeitpositionen pro Objekt
- Playhead fĂĽr die aktuelle Zeit mit Scrubbing
- Easing-Funktionsauswahl pro Keyframe
- Steuerelemente zum HinzufĂĽgen/Entfernen von Keyframes an der aktuellen Playhead-Position
Video-Export-Pipeline
Frame-Erfassung
- Animationsdauer und FPS bestimmen die Gesamtzahl der Frames
- Jeder Frame wird einzeln in voller Auflösung gerendert
- Canvas-Inhalt wird als PNG-Blob pro Frame erfasst
- Frames werden zum Upload an das Encoding-Backend gesammelt
Encoding-Backend
Das Express.js-Backend ĂĽbernimmt die Video-Kodierung ĂĽber ein Job-basiertes System:
- Job-Erstellung — Client fordert einen neuen Export-Job an (UUID-basiert)
- Frame-Upload — Frames werden in Batches hochgeladen (oder über WebSocket gestreamt)
- FFmpeg-Kodierung — Frames werden zu WebM-Video mit VP9-Codec zusammengefügt
- Alpha Channel — Verwendet das yuva420p-Pixelformat für volle Transparenzunterstützung
- Fortschrittsverfolgung — Echtzeit-Fortschrittsaktualisierungen während der Kodierung
- Download — Fertiges Video zum Download verfügbar mit Transparenzprüfung
WebSocket-Alternative
Für den Echtzeit-Export können Frames direkt über WebSocket gestreamt werden, anstatt per HTTP-Batch-Upload, mit Live-Fortschrittsaktualisierungen während der Erfassungs-, Upload- und Kodierungsphasen.
Hauptmerkmale
- Keyframe-Animation — Timeline-basierte Animation mit Keyframes pro Eigenschaft
- Über 30 Easing-Funktionen — Umfassende Easing-Bibliothek für professionelle Animationskurven
- Export transparenter Videos — VP9 WebM mit voller Alpha-Kanal-Unterstützung
- Hardwarebeschleunigtes Canvas — Pixi.js WebGL-Rendering für flüssige Echtzeit-Vorschau
- Mehrere Objekttypen — Rechtecke, Kreise und Text mit unabhängiger Animation
- Echtzeit-Vorschau — Animationen sofort abspielen, pausieren und durchsuchen
- Batch- & Streaming-Export — HTTP-Batch-Upload oder WebSocket-Echtzeit-Frame-Streaming
- Konfigurierbare Ausgabe — Auflösungs-, FPS- und Bitrate-Einstellungen für den Export
- Typsicheres Monorepo — Gemeinsame TypeScript-Typen über Frontend und Backend hinweg
- Benutzerdefinierte Hintergründe — Einstellbare Hintergrundfarbe und Alpha mit Bild-/Video-Unterstützung
Ergebnisse
Technologie-Stack
caseStudyDetail.more Fallstudien
Entdecken Sie mehr unserer technischen Implementierungen
KI-gestĂĽtzte Rechnungsverarbeitung mit OCR und QuickBooks-Integration
Ein mittelständisches Unternehmen, das monatlich Hunderte von Lieferantenrechnungen verarbeitete, musste die manuelle Dateneingabe eliminieren, indem es Rechnungsdaten automatisch mithilfe von AI/OCR extrahierte und diese direkt mit QuickBooks für die Buchhaltung und Zahlungsverfolgung synchronisierte.
Clientseitige Anzeigeninsertion (CSAI) mit SCTE-35 Marker-Parsing & Multi-Plattform-Player-Integration
Eine Video-Streaming-Plattform musste die Clientseitige Anzeigeninsertion (CSAI) über Web-, Mobil- und Connected TV-Apps hinweg implementieren – was personalisierte, gerätespezifische Anzeigenerlebnisse mit vollständiger Unterstützung der Anzeigeninteraktion (anklickbare Overlays, Companion-Banner, Skip-Buttons) ermöglicht, die serverseitige Insertion nicht bieten kann.
Bereit, Ihr Unternehmen zu transformieren?
Lassen Sie uns besprechen, wie wir ähnliche Lösungen für Ihre Herausforderungen anwenden können.