Editor ng Animasyon na Batay sa Web na may Keyframe System at Transparent Video Export

Binuo namin ang isang editor ng animasyon na batay sa web gamit ang React at Pixi.js para sa hardware-accelerated rendering, isang keyframe engine na may higit sa 30 easing functions, at isang FFmpeg-powered na backend para sa pag-export ng mga WebM video na may buong VP9 alpha channel support.

Arkitektura

• Frontend: React na may TypeScript, Pixi.js para sa WebGL-accelerated canvas rendering
• State Management: Zustand para sa centralized scene state
• Animation Engine: Custom keyframe interpolation engine na may easing library
• Backend: Express.js na may WebSocket support para sa real-time frame streaming
• Video Encoding: FFmpeg (sa pamamagitan ng fluent-ffmpeg) para sa VP9 WebM encoding na may alpha channel
• Monorepo: pnpm workspace na may shared TypeScript types sa buong frontend at backend

Animation Engine

Keyframe System

Sinusuportahan ng core animation engine ang keyframe-based animation sa maraming properties:

• Posisyon — X/Y coordinates para sa mga landas ng paggalaw
• Pag-ikot — Degree-based rotation animation
• Kulay — Hex color interpolation na may makinis na transitions
• Alpha — Opacity animation para sa fade effects
• Sukat — Width, height, at radius scaling

Ang bawat keyframe ay nag-iimbak ng oras (sa milliseconds), isang subset ng mga animated properties, at isang napiling easing function. Ang engine ay nag-i-interpolate sa pagitan ng mga nakapalibot na keyframe sa anumang punto ng oras, na naglalapat ng naaangkop na easing curve.

Easing Library (Higit sa 30 Function)

Isang komprehensibong easing library na sumasaklaw sa lahat ng standard animation curves:

• Linear, Quadratic, Cubic, Quartic, Quintic
• Sinusoidal, Exponential, Circular
• Elastic (spring-like overshoot), Back (anticipation), Bounce
• Ang bawat isa ay available sa ease-in, ease-out, at ease-in-out variants

Interpolation

Para sa anumang ibinigay na timestamp, ang engine ay:

1. Hahanapin ang mga nakapalibot na keyframe (bago at pagkatapos)
2. Kalkulahin ang normalized progress sa pagitan ng mga ito (0 hanggang 1)
3. Ilalapat ang napiling easing function sa progress value
4. I-interpolate ang mga property values (linear para sa mga numero, color lerp para sa hex values)
5. Ibabalik ang kumpletong set ng animated properties para sa rendering

Canvas at Rendering

Mga Uri ng Object

• Rectangles — Configurable na width, height, color, alpha, rotation
• Circles — Configurable na radius, color, alpha, rotation
• Text — Configurable na font family, font size, content, color, alpha

Hardware-Accelerated Rendering

• Pixi.js WebGL rendering para sa makinis na 60fps preview playback
• Configurable na canvas resolution (default 1920x1080 sa 30fps)
• Transparent background support na may adjustable na background alpha
• Interactive object selection na may visual highlighting
• Real-time animation playback na may play, pause, at timeline scrubbing

Interface ng Editor

Toolbar

Mga button para sa paglikha ng object para sa pagdaragdag ng rectangles, circles, at text sa scene na may default properties na maaaring i-customize agad.

Properties Panel

Ang mga napiling object properties ay mae-edit sa real-time: position, size, color, alpha, rotation, at type-specific properties (text content, font settings).

Timeline

Visual timeline na nagpapakita ng:

• Keyframe markers sa kanilang time positions bawat object
• Playhead para sa kasalukuyang oras na may scrubbing
• Pagpili ng per-keyframe easing function
• Mga kontrol sa pagdaragdag/pagtanggal ng keyframe sa kasalukuyang playhead position

Video Export Pipeline

Frame Capture

1. Ang tagal ng animasyon at FPS ay nagtatakda ng kabuuang bilang ng frame
2. Ang bawat frame ay nire-render nang isa-isa sa buong resolution
3. Ang nilalaman ng canvas ay kinukuha bilang PNG blob bawat frame
4. Ang mga frame ay kinokolekta para sa pag-upload sa encoding backend

Encoding Backend

Hinahawakan ng Express.js backend ang video encoding sa pamamagitan ng job-based system:

1. Paglikha ng Job — Humihiling ang client ng bagong export job (UUID-based)
2. Pag-upload ng Frame — Ang mga frame ay ina-upload nang pa-batch (o sini-stream sa pamamagitan ng WebSocket)
3. FFmpeg Encoding — Ang mga frame ay pinagsama-sama sa WebM video na may VP9 codec
4. Alpha Channel — Gumagamit ng yuva420p pixel format para sa buong transparency support
5. Pagsubaybay sa Progress — Real-time progress updates sa panahon ng encoding
6. Download — Available para sa download ang nakumpletong video na may transparency verification

Alternatibo ng WebSocket

Para sa real-time export, ang mga frame ay maaaring i-stream nang direkta sa pamamagitan ng WebSocket sa halip na HTTP batch upload, na may live progress updates sa buong capture, upload, at encoding phases.

Mga Pangunahing Feature

1. Keyframe Animation — Timeline-based animation na may per-property keyframes
2. Higit sa 30 Easing Functions — Kumpletong easing library para sa propesyonal na animation curves
3. Transparent Video Export — VP9 WebM na may buong alpha channel support
4. Hardware-Accelerated Canvas — Pixi.js WebGL rendering para sa makinis na real-time preview
5. Maraming Uri ng Object — Rectangles, circles, at text na may independiyenteng animasyon
6. Real-Time Preview — I-play, i-pause, at i-scrub ang mga animasyon kaagad
7. Batch at Streaming Export — HTTP batch upload o WebSocket real-time frame streaming
8. Configurable na Output — Resolution, FPS, at bitrate settings para sa export
9. Type-Safe Monorepo — Shared TypeScript types sa buong frontend at backend
10. Custom na Backgrounds — Adjustable na background color at alpha na may image/video support