Webbaseret animationseditor med keyframe-system & eksport af gennemsigtig video

Vi byggede en webbaseret animationseditor ved hjælp af React og Pixi.js til hardware-accelereret gengivelse, en keyframe-motor med 30+ easing-funktioner, og en FFmpeg-drevet backend til eksport af WebM-videoer med fuld VP9 alpha-kanal understøttelse.

Arkitektur

• Frontend: React med TypeScript, Pixi.js til WebGL-accelereret canvas-gengivelse
• State Management: Zustand til centraliseret scenetilstand
• Animationsmotor: Brugerdefineret keyframe-interpolationsmotor med easing-bibliotek
• Backend: Express.js med WebSocket-understøttelse til streaming af frames i realtid
• Videokodning: FFmpeg (via fluent-ffmpeg) til VP9 WebM-kodning med alpha-kanal
• Monorepo: pnpm workspace med delte TypeScript-typer på tværs af frontend og backend

Animationsmotor

Keyframe-system

Kerneanimationsmotoren understøtter keyframe-baseret animation på tværs af flere egenskaber:

• Position — X/Y-koordinater for bevægelsesstier
• Rotation — Gradbaseret rotationsanimation
• Farve — Hex-farveinterpolation med flydende overgange
• Alpha — Opacitetsanimation for fade-effekter
• Størrelse — Bredde-, højde- og radiusskalering

Hver keyframe gemmer tidspunktet (i millisekunder), et undersæt af animerede egenskaber, og en valgt easing-funktion. Motoren interpolerer mellem omgivende keyframes på ethvert tidspunkt, og anvender den passende easing-kurve.

Easing-bibliotek (30+ funktioner)

Et omfattende easing-bibliotek, der dækker alle standard animationskurver:

• Linear, Quadratic, Cubic, Quartic, Quintic
• Sinusoidal, Exponential, Circular
• Elastic (fjederlignende overskydning), Back (forventning), Bounce
• Hver tilgængelig i ease-in, ease-out og ease-in-out varianter

Interpolation

For et givet tidsstempel udfører motoren:

1. Finder de omgivende keyframes (før og efter)
2. Beregner normaliseret fremskridt mellem dem (0 til 1)
3. Anvender den valgte easing-funktion på fremskridtsværdien
4. Interpolerer egenskabsværdier (lineær for tal, color lerp for hex-værdier)
5. Returnerer det komplette sæt af animerede egenskaber til gengivelse

Canvas & Gengivelse

Objekttyper

• Rektangler — Konfigurerbar bredde, højde, farve, alpha, rotation
• Cirkler — Konfigurerbar radius, farve, alpha, rotation
• Tekst — Konfigurerbar skrifttypefamilie, skriftstørrelse, indhold, farve, alpha

Hardware-accelereret gengivelse

• Pixi.js WebGL-gengivelse for flydende 60fps forhåndsvisning
• Konfigurerbar canvas-opløsning (standard 1920x1080 ved 30fps)
• Understøttelse af gennemsigtig baggrund med justerbar baggrunds-alpha
• Interaktiv objektvalg med visuel fremhævelse
• Realtids-animationafspilning med afspil, pause og tidslinjestyring

Redigeringsgrænseflade

Værktøjslinje

Knapper til oprettelse af objekter til at tilføje rektangler, cirkler og tekst til scenen med standardegenskaber, der kan tilpasses med det samme.

Egenskabspanel

Valgte objektegenskaber, der kan redigeres i realtid: position, størrelse, farve, alpha, rotation og typespecifikke egenskaber (tekstindhold, skriftindstillinger).

Tidslinje

Visuel tidslinje, der viser:

• Keyframe-markører ved deres tidspositioner pr. objekt
• Playhead for aktuel tid med tidslinjestyring
• Valg af easing-funktion pr. keyframe
• Kontroller til at tilføje/fjerne keyframe ved den aktuelle playhead-position

Videoeksportpipeline

Frame-indfangning

1. Animationsvarighed og FPS bestemmer det samlede antal frames
2. Hver frame gengives individuelt i fuld opløsning
3. Canvas-indhold indfanget som PNG-blob pr. frame
4. Frames indsamlet til upload til encoding-backend'en

Encoding-backend

Express.js-backend'en håndterer videokodning gennem et jobbaseret system:

1. Joboprettelse — Klienten anmoder om et nyt eksportjob (UUID-baseret)
2. Frame-upload — Frames uploades i batches (eller streames via WebSocket)
3. FFmpeg-kodning — Frames samles til WebM-video med VP9-codec
4. Alpha-kanal — Bruger yuva420p pixelformat for fuld gennemsigtighedsunderstøttelse
5. Fremdriftssporing — Fremdriftsopdateringer i realtid under kodning
6. Download — Færdig video tilgængelig til download med gennemsigtighedsverifikation

WebSocket-alternativ

Til eksport i realtid kan frames streames direkte via WebSocket i stedet for HTTP batch-upload, med live fremdriftsopdateringer gennem indfangnings-, upload- og kodningsfaserne.

Nøglefunktioner

1. Keyframe-animation — Tidslinjebaseret animation med keyframes pr. egenskab
2. 30+ Easing-funktioner — Komplet easing-bibliotek for professionelle animationskurver
3. Gennemsigtig videoeksport — VP9 WebM med fuld alpha-kanal understøttelse
4. Hardware-accelereret Canvas — Pixi.js WebGL-gengivelse for flydende forhåndsvisning i realtid
5. Flere objekttyper — Rektangler, cirkler og tekst med uafhængig animation
6. Forhåndsvisning i realtid — Afspil, pause og tidslinjestyring af animationer øjeblikkeligt
7. Batch- & Streamingeksport — HTTP batch-upload eller WebSocket realtids frame-streaming
8. Konfigurerbart output — Opløsning, FPS og bitrate-indstillinger for eksport
9. Type-sikker Monorepo — Delte TypeScript-typer på tværs af frontend og backend
10. Brugerdefinerede baggrunde — Justerbar baggrundsfarve og alpha med billede/video-understøttelse