Web-Based Animation Editor with Keyframe System & Transparent Video Export
A creative tools team needed a browser-based animation editor that allowed designers to create smooth, keyframe-driven animations with multiple objects and export them as videos with full alpha channel transparency — enabling seamless overlay on other video content.
讨论您的项目
挑战
Creating animated assets with transparent backgrounds for video production was cumbersome:
- Desktop-Only Tools — Existing animation tools (After Effects, Motion) required expensive licenses and desktop installation
- No Alpha Channel Export — Most web-based animation tools exported opaque videos without transparency support
- Complex Keyframing — Designers needed intuitive keyframe-based animation with easing control, not just CSS transitions
- Real-Time Preview — Editors needed to see animations play back smoothly before exporting
- Multiple Object Types — Animations required shapes and text with independent animation timelines
- Export Quality — Output needed to be production-grade video files usable in professional editing workflows
我们的解决方案
We built a web-based animation editor using React and Pixi.js for hardware-accelerated rendering, a keyframe engine with 30+ easing functions, and an FFmpeg-powered backend for exporting WebM videos with full VP9 alpha channel support.
Architecture
- Frontend: React with TypeScript, Pixi.js for WebGL-accelerated canvas rendering
- State Management: Zustand for centralized scene state
- Animation Engine: Custom keyframe interpolation engine with easing library
- Backend: Express.js with WebSocket support for real-time frame streaming
- Video Encoding: FFmpeg (via fluent-ffmpeg) for VP9 WebM encoding with alpha channel
- Monorepo: pnpm workspace with shared TypeScript types across frontend and backend
Animation Engine
Keyframe System
The core animation engine supports keyframe-based animation across multiple properties:
- Position — X/Y coordinates for movement paths
- Rotation — Degree-based rotation animation
- Color — Hex color interpolation with smooth transitions
- Alpha — Opacity animation for fade effects
- Size — Width, height, and radius scaling
Each keyframe stores the time (in milliseconds), a subset of animated properties, and a selected easing function. The engine interpolates between surrounding keyframes at any point in time, applying the appropriate easing curve.
Easing Library (30+ Functions)
A comprehensive easing library covering all standard animation curves:
- Linear, Quadratic, Cubic, Quartic, Quintic
- Sinusoidal, Exponential, Circular
- Elastic (spring-like overshoot), Back (anticipation), Bounce
- Each available in ease-in, ease-out, and ease-in-out variants
Interpolation
For any given timestamp, the engine:
- Finds the surrounding keyframes (before and after)
- Calculates normalized progress between them (0 to 1)
- Applies the selected easing function to the progress value
- Interpolates property values (linear for numbers, color lerp for hex values)
- Returns the complete set of animated properties for rendering
Canvas & Rendering
Object Types
- Rectangles — Configurable width, height, color, alpha, rotation
- Circles — Configurable radius, color, alpha, rotation
- Text — Configurable font family, font size, content, color, alpha
Hardware-Accelerated Rendering
- Pixi.js WebGL rendering for smooth 60fps preview playback
- Configurable canvas resolution (default 1920x1080 at 30fps)
- Transparent background support with adjustable background alpha
- Interactive object selection with visual highlighting
- Real-time animation playback with play, pause, and timeline scrubbing
Editor Interface
Toolbar
Object creation buttons for adding rectangles, circles, and text to the scene with default properties that can be customized immediately.
Properties Panel
Selected object properties editable in real-time: position, size, color, alpha, rotation, and type-specific properties (text content, font settings).
Timeline
Visual timeline showing:
- Keyframe markers at their time positions per object
- Playhead for current time with scrubbing
- Per-keyframe easing function selection
- Add/remove keyframe controls at the current playhead position
Video Export Pipeline
Frame Capture
- Animation duration and FPS determine total frame count
- Each frame is rendered individually at full resolution
- Canvas content captured as PNG blob per frame
- Frames collected for upload to the encoding backend
Encoding Backend
The Express.js backend handles video encoding through a job-based system:
- Job Creation — Client requests a new export job (UUID-based)
- Frame Upload — Frames uploaded in batches (or streamed via WebSocket)
- FFmpeg Encoding — Frames assembled into WebM video with VP9 codec
- Alpha Channel — Uses yuva420p pixel format for full transparency support
- Progress Tracking — Real-time progress updates during encoding
- Download — Completed video available for download with transparency verification
WebSocket Alternative
For real-time export, frames can be streamed directly via WebSocket instead of HTTP batch upload, with live progress updates throughout capture, upload, and encoding phases.
Key Features
- Keyframe Animation — Timeline-based animation with per-property keyframes
- 30+ Easing Functions — Complete easing library for professional animation curves
- Transparent Video Export — VP9 WebM with full alpha channel support
- Hardware-Accelerated Canvas — Pixi.js WebGL rendering for smooth real-time preview
- Multiple Object Types — Rectangles, circles, and text with independent animation
- Real-Time Preview — Play, pause, and scrub through animations instantly
- Batch & Streaming Export — HTTP batch upload or WebSocket real-time frame streaming
- Configurable Output — Resolution, FPS, and bitrate settings for export
- Type-Safe Monorepo — Shared TypeScript types across frontend and backend
- Custom Backgrounds — Adjustable background color and alpha with image/video support