技术笔记 · 根据 SIGNAL Studio 的公开实现整理。
实时预览通常按屏幕刷新节奏绘制。预览卡顿时，可以跳到当前时间继续播放。导出视频时，每一帧的位置由输出帧率决定。以 60 FPS 为例，第 120 帧对应第 2 秒，浏览器的绘制速度只影响要等多久。
给渲染器传入时间
把数字滚动、故障效果和关键帧插值写成对同一时间点的计算，预览和导出就能走同一套渲染逻辑。预览传入播放头的当前值，离线导出按帧编号取样。
// 示例：按固定时间步长取样
for (let frame = 0; frame < frameCount; frame += 1) {
const seconds = frame / framesPerSecond;
renderAt(seconds, canvas);
await writeFrame(canvas, seconds);
}将渲染和编码分开
同一张 Canvas 可以交给视频编码器，也可以保存为一张 PNG。PNG 帧序列适合检查单帧，MP4 适合连续播放并携带音轨。SIGNAL Studio 也支持 GIF，GIF 导出仅包含画面。浏览器支持的编码配置和设备可承受的分辨率决定了可用的 MP4 导出选项。