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
Kickly: KI-gestĂĽtzte Projektplattform fĂĽr Startups
Kickly ist eine KI-gestützte Projektmanagementplattform, die für Startups entwickelt wurde – und intelligente Aufgabenautomatisierung, Teamkollaboration und Echtzeit-Fortschrittsverfolgung in einem Produkt vereint.
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.
Bereit, Ihr Unternehmen zu transformieren?
Lassen Sie uns besprechen, wie wir ähnliche Lösungen für Ihre Herausforderungen anwenden können.