挑战
为视频制作创建带有透明背景的动画资产一直很麻烦：
- 桌面专用工具 — 现有的动画工具（After Effects、Motion）需要昂贵的许可证和桌面安装
- 无 Alpha 通道导出 — 大多数基于网络的动画工具导出不透明视频，不支持透明度
- 复杂的关键帧 — 设计师需要直观的基于关键帧的动画和缓动控制，而不仅仅是 CSS transitions
- 实时预览 — 编辑器需要在导出前流畅地预览动画播放
- 多种对象类型 — 动画需要具有独立动画时间轴的形状和文本
- 导出质量 — 输出需要是可在专业编辑工作流程中使用的生产级视频文件
我们的解决方案
我们构建了一个基于网络的动画编辑器，使用 React 和 Pixi.js 进行硬件加速渲染，一个包含 30 多种缓动函数的关键帧引擎，以及一个由 FFmpeg 驱动的后端，用于导出具有完整 VP9 alpha channel 支持的 WebM 视频。
架构
- 前端：使用 TypeScript 的 React，Pixi.js 用于 WebGL 加速的 canvas 渲染
- 状态管理：Zustand 用于集中式场景状态
- 动画引擎：自定义 keyframe interpolation engine，带 easing library
- 后端：Express.js，支持 WebSocket 用于实时 frame streaming
- 视频编码：FFmpeg（通过 fluent-ffmpeg）用于带有 alpha channel 的 VP9 WebM 编码
- 单体仓库：pnpm workspace，前端和后端共享 TypeScript types
动画引擎
关键帧系统
核心动画引擎支持跨多个属性的基于关键帧的动画：
- 位置 — 用于运动路径的 X/Y 坐标
- 旋转 — 基于角度的旋转动画
- 颜色 — 带平滑过渡的 Hex color interpolation
- Alpha — 用于淡入淡出效果的 Opacity animation
- 大小 — 宽度、高度和半径缩放
每个关键帧存储时间（毫秒）、一部分动画属性和一个选定的 easing function。引擎在时间轴上的任何时刻，根据周围的关键帧进行插值，并应用适当的 easing curve。
缓动库（30+ 函数）
一个包含所有标准动画曲线的综合缓动库：
- Linear, Quadratic, Cubic, Quartic, Quintic
- Sinusoidal, Exponential, Circular
- Elastic (spring-like overshoot), Back (anticipation), Bounce
- 每种都提供 ease-in, ease-out 和 ease-in-out 变体
插值
对于任何给定的时间戳，引擎会执行以下操作：
- 找到周围的关键帧（之前和之后）
- 计算它们之间（0 到 1）的标准化进度
- 将选定的 easing function 应用于进度值
- 插值属性值（数字使用 linear，Hex 值使用 color lerp）
- 返回完整的动画属性集以进行渲染
画布与渲染
对象类型
- 矩形 — 可配置的宽度、高度、颜色、alpha、旋转
- 圆形 — 可配置的半径、颜色、alpha、旋转
- 文本 — 可配置的 font family、font size、内容、颜色、alpha
硬件加速渲染
- Pixi.js WebGL rendering，实现流畅的 60fps 预览播放
- 可配置的 canvas resolution（默认 1920x1080，30fps）
- 支持 transparent background，可调整 background alpha
- 交互式对象选择，带 visual highlighting
- 实时动画播放，支持播放、暂停和 timeline scrubbing
编辑器界面
工具栏
对象创建按钮，用于向场景中添加矩形、圆形和文本，具有可立即自定义的默认属性。
属性面板
实时编辑选定对象的属性：position、size、color、alpha、rotation 以及特定类型属性（text content、font settings）。
时间轴
可视化时间轴显示：
- 每个对象关键帧在其时间位置的标记
- 当前时间的 Playhead，可 scrubbing
- 每个关键帧的 easing function 选择
- 在当前 Playhead 位置添加/移除关键帧的控制
视频导出管道
帧捕获
- 动画时长和 FPS 决定总帧数
- 每个帧都以 full resolution 单独渲染
- 每帧 canvas 内容捕获为 PNG blob
- 收集帧以上传到 encoding backend
编码后端
Express.js 后端通过基于 job 的系统处理视频编码：
- 作业创建 — 客户端请求新的 export job（基于 UUID）
- 帧上传 — 帧以 batches 方式上传（或通过 WebSocket 流传输）
- FFmpeg 编码 — 帧组装成带有 VP9 codec 的 WebM 视频
- Alpha 通道 — 使用 yuva420p pixel format 提供完整的 transparency support
- 进度跟踪 — Encoding 期间的 Real-time progress updates
- 下载 — 完成的视频可供下载，并进行 transparency verification
WebSocket 替代方案
对于 real-time export，帧可以直接通过 WebSocket 流传输，而不是 HTTP batch upload，并在 capture、upload 和 encoding phases 期间提供 live progress updates。
主要功能
- 关键帧动画 — 基于 timeline 的动画，支持 per-property keyframes
- 30+ 缓动函数 — 专业的 animation curves easing library
- 透明视频导出 — 支持完整 alpha channel 的 VP9 WebM
- 硬件加速画布 — Pixi.js WebGL rendering，实现流畅的 real-time preview
- 多种对象类型 — 具有独立动画的 Rectangles、circles 和 text
- 实时预览 — 即时 Play、pause 和 scrub 动画
- 批量和流式导出 — HTTP batch upload 或 WebSocket real-time frame streaming
- 可配置输出 — 可导出 Resolution、FPS 和 bitrate settings
- 类型安全单体仓库 — 前端和后端共享 TypeScript types
- 自定义背景 — 可调整 background color 和 alpha，支持 image/video
成果
技术栈
常见问题
MicrocosmWorks 实现了一个基于 canvas 的渲染引擎，在关键帧之间配置了缓动曲线，支持 position、scale、rotation 和 opacity 属性的 linear、bezier、ease-in-out 和自定义曲线插值。该编辑器在浏览器中以高达 60fps 的速度实时渲染逐帧预览，并包含一个交互式时间轴，设计师可以通过拖动控制点来直观地调整关键帧位置和缓动曲线。
MicrocosmWorks 构建了一个服务器端渲染管道，使用 FFmpeg 合成每一帧并保留 alpha 通道，并导出为带有 VP9 alpha 的 WebM 或带有透明度的 Apple ProRes 4444，因为 H.264 编解码器原生不支持 alpha 通道。基于浏览器的编辑器会显示实时预览，背景为棋盘格，表示透明度，最终渲染在服务器端处理，以确保所有帧的质量一致。
是的，MicrocosmWorks 构建了一个多层合成引擎，该引擎支持 Z 轴排序的图层，包含自定义字体的文本、栅格图像和矢量图像、视频片段和形状图元，每个都具有独立的关键帧动画轨道。图层面板提供熟悉的 Photoshop 式控件，包括可见性切换、不透明度滑块、混合模式和分组，使其对那些已经熟悉 Adobe 工作流程的设计师来说非常直观。
MicrocosmWorks 对编辑器进行了优化，利用 WebGL 实现硬件加速合成，并使用 Web Workers 进行非阻塞式关键帧计算，从而在现代硬件上，对于多达 20-30 个图层的合成，实现了流畅的实时预览性能。对于最终的导出渲染，繁重的工作在服务器端进行，专用 GPU 资源确保了无论用户的设备能力如何，都能获得一致的输出质量。
MicrocosmWorks 承接定制动画编辑器项目，开发费率为每小时 $20-$40。一个功能齐全的编辑器，包括关键帧时间轴、多层合成和透明视频导出功能，通常需要 4-6 个月的开发时间。这比基于收取每用户许可费的商业 SDKs 进行开发显著更具成本效益，并且让您完全拥有代码库，以便进行长期的产品开发。