Verkkopohjainen animaatioeditori kuvakehysjärjestelmällä ja läpinäkyvällä videoviennillä

Rakensimme verkkopohjaisen animaatioeditorin käyttäen React- ja Pixi.js-kirjastoja laitteistokiihdytettyyn renderointiin, kuvakehysmoottorin yli 30 easing function -toiminnolla ja FFmpeg-pohjaisen backend-järjestelmän WebM-videoiden vientiin täydellä VP9 alpha channel -tuella.

Arkkitehtuuri

• Frontend: React TypeScriptillä, Pixi.js WebGL-kiihdytettyyn canvas-renderointiin
• Tilanhallinta: Zustand keskitettyyn kohtauksen tilaan
• Animaatiomoottori: Mukautettu keyframe-interpolointimoottori easing-kirjastolla
• Backend: Express.js WebSocket-tuella reaaliaikaiseen kehysten suoratoistoon
• Videon koodaus: FFmpeg (fluent-ffmpeg:n kautta) VP9 WebM -koodaukseen alpha channel -tuella
• Monorepo: pnpm workspace ja jaetut TypeScript-tyypit frontendin ja backendin välillä

Animaatiomoottori

Kuvakehysjärjestelmä

Animaatiomoottorin ydin tukee kuvakehyspohjaista animaatiota useiden ominaisuuksien osalta:

• Sijainti — X/Y-koordinaatit liikeradoille
• Kierto — Asteisiin perustuva kiertoanimaatio
• Väri — Heksavärin interpolointi sujuvilla siirtymillä
• Alpha — Läpinäkyvyysanimaatio haalistusefekteihin
• Koko — Leveyden, korkeuden ja säteen skaalaus

Jokainen kuvakehys tallentaa ajan (millisekunteina), osajoukon animoituja ominaisuuksia ja valitun easing function -toiminnon. Moottori interpoloi ympäröivien kuvakehysten välillä milloin tahansa, soveltaen sopivaa easing curve -käyrää.

Easing-kirjasto (yli 30 toimintoa)

Kattava easing-kirjasto, joka kattaa kaikki standardi animaatiokäyrät:

• Linear, Quadratic, Cubic, Quartic, Quintic
• Sinusoidal, Exponential, Circular
• Elastic (jousimainen ylitys), Back (ennakointi), Bounce
• Jokainen saatavilla ease-in, ease-out ja ease-in-out -muunnoksina

Interpolointi

Minkä tahansa annetun aikaleiman osalta moottori:

1. Etsii ympäröivät kuvakehykset (ennen ja jälkeen)
2. Laskee normalisoidun edistymisen niiden välillä (0–1)
3. Soveltaa valitun easing function -toiminnon edistymisarvoon
4. Interpoloi ominaisuusarvot (lineaarinen numeroille, color lerp heksa-arvoille)
5. Palauttaa täydellisen joukon animoituja ominaisuuksia renderointia varten

Canvas ja renderointi

Objektityypit

• Suorakulmiot — Konfiguroitava leveys, korkeus, väri, alpha, kierto
• Ympyrät — Konfiguroitava säde, väri, alpha, kierto
• Teksti — Konfiguroitava font family, font size, sisältö, väri, alpha

Laitteistokiihdytetty renderointi

• Pixi.js WebGL-renderointi sujuvaan 60fps esikatselun toistoon
• Konfiguroitava canvas-resoluutio (oletus 1920x1080 30fps:llä)
• Läpinäkyvän taustan tuki säädettävällä taustan alphalla
• Interaktiivinen objektin valinta visuaalisella korostuksella
• Reaaliaikainen animaation toisto toisto-, tauko- ja aikajanan selauksella

Editorin käyttöliittymä

Työkalurivi

Objektinluontipainikkeet suorakulmioiden, ympyröiden ja tekstin lisäämiseksi kohtaukseen oletusominaisuuksilla, joita voidaan mukauttaa välittömästi.

Ominaisuuspaneli

Valitun objektin ominaisuudet muokattavissa reaaliaikaisesti: sijainti, koko, väri, alpha, kierto ja tyyppikohtaiset ominaisuudet (tekstin sisältö, fonttiasetukset).

Aikajana

Visuaalinen aikajana, joka näyttää:

• Kuvakehysmerkit niiden aika-asemissa per objekti
• Toistopää nykyiselle ajalle selauksella
• Kuvakehyskohtainen easing function -valinta
• Lisää/poista kuvakehyspainikkeet nykyisessä toistopään sijainnissa

Videon vientiprosessi

Kehysten kaappaus

1. Animaation kesto ja FPS määrittävät kehysten kokonaismäärän
2. Jokainen kehys renderöidään yksilöllisesti täydellä resoluutiolla
3. Canvas-sisältö kaapataan PNG blobina kehystä kohden
4. Kehykset kerätään siirrettäväksi koodaus-backendille

Koodaus-backend

Express.js-backend käsittelee videokoodauksen työperusteisen järjestelmän kautta:

1. Työn luominen — Asiakas pyytää uutta vientityötä (UUID-pohjainen)
2. Kehysten lataus — Kehykset ladataan erinä (tai striimataan WebSocketin kautta)
3. FFmpeg-koodaus — Kehykset kootaan WebM-videoksi VP9-koodekilla
4. Alpha Channel — Käyttää yuva420p-pikselimuotoa täyden läpinäkyvyyden tukemiseen
5. Edistymisen seuranta — Reaaliaikaiset edistymispäivitykset koodauksen aikana
6. Lataus — Valmis video ladattavissa läpinäkyvyyden varmistuksella

WebSocket-vaihtoehto

Reaaliaikaista vientiä varten kehykset voidaan suoratoistaa suoraan WebSocketin kautta HTTP-erälatauksen sijaan, ja live-edistymispäivitykset ovat käytettävissä kaappaus-, lataus- ja koodausvaiheissa.

Tärkeimmät ominaisuudet

1. Kuvakehysanimaatio — Aikajana-pohjainen animaatio ominaisuuskohtaisilla kuvakehyksillä
2. Yli 30 Easing Function -toimintoa — Kattava easing-kirjasto ammattimaisille animaatiokäyrille
3. Läpinäkyvä videovienti — VP9 WebM täydellä alpha channel -tuella
4. Laitteistokiihdytetty Canvas — Pixi.js WebGL-renderointi sujuvaan reaaliaikaiseen esikatseluun
5. Useita objektityyppejä — Suorakulmiot, ympyrät ja teksti itsenäisellä animaatiolla
6. Reaaliaikainen esikatselu — Toista, keskeytä ja selaa animaatioita välittömästi
7. Erä- ja suoratoistovienti — HTTP-erälataus tai WebSocket-reaaliaikainen kehysten suoratoisto
8. Konfiguroitava tulostus — Resoluutio-, FPS- ja bittinopeusasetukset vientiin
9. Tyypitysturvallinen Monorepo — Jaetut TypeScript-tyypit frontendin ja backendin välillä
10. Mukautetut taustat — Säädettävä taustaväri ja alpha kuva-/videotuella