第07章：相机姿态、时间轴与动画导出

SuperSplat 不仅能编辑模型，还能制作相机漫游动画，并导出为图片或视频。本章对应源码 src/camera-poses.ts、src/timeline.ts、src/track-manager.ts、src/ui/timeline-panel.ts 以及 src/render.ts 与视频/图片设置对话框。

1. 动画系统的整体结构

SuperSplat 的动画基于“时间轴（Timeline）+ 动画轨道（AnimTrack）”的解耦设计：

Timeline（timeline.ts）：管理播放状态——总帧数 frames、帧率 frameRate、当前帧、是否播放、平滑度 smoothness。它只负责“时间”，不关心具体动什么；
AnimTrack（anim-track.ts 接口）：具体的动画轨道。相机动画就是一种轨道 CameraAnimTrack（camera-poses.ts），它订阅时间轴事件，在每个时间点计算相机位姿；
TrackManager（track-manager.ts）：管理所有轨道。

这种设计意味着动画系统是可扩展的：将来可以加入除相机之外的其他轨道类型，复用同一套时间轴。

2. 相机姿态（关键帧）

相机动画由一系列姿态（Pose） 关键帧组成。每个 Pose 的数据结构（camera-poses.ts）：

type Pose = {
    name: string,
    frame: number,      // 该关键帧所在的帧
    position: Vec3,     // 相机位置
    target: Vec3,       // 相机看向的目标点
    fov?: number        // 可选视场角
};

制作相机动画的基本流程：

在时间轴上移动到某一帧；
在视口中把相机调整到想要的视角（位置 + 朝向）；
添加关键帧：快捷键 Enter（track.addKey）；
移动到另一帧，调整相机，再次 Enter 添加；
重复，形成多个关键帧；
删除关键帧：Shift + Enter（track.removeKey）。

3. 时间轴面板操作

打开时间轴面板：Ctrl + T（timelinePanel.toggle）。面板（src/ui/timeline-panel.ts）提供：

总帧数（frames）：默认 180 帧（setFrames）；
帧率（frameRate）：默认 30 FPS（setFrameRate），决定动画时长 = frames / frameRate（默认即 6 秒）；
平滑度（smoothness）：默认 1，控制关键帧之间样条插值的平滑程度；
当前帧指示器：可拖动“擦洗（scrub）”预览。

播放控制快捷键：

操作	快捷键	事件
播放 / 暂停	`Space`	`timeline.togglePlay`
上一帧 / 下一帧	`,` / `.`	`timeline.prevFrame` / `nextFrame`
上一个 / 下一个关键帧	`<` / `>`	`timeline.prevKey` / `nextKey`
添加关键帧	`Enter`	`track.addKey`
删除关键帧	`Shift + Enter`	`track.removeKey`

4. 插值与平滑

相机在关键帧之间的运动采用三次样条（CubicSpline，src/anim/spline.ts） 插值，由 CameraAnimTrack 在收到时间轴事件时实时计算：

events.on('timeline.time', (time) => this.evaluate(time));
events.on('timeline.frame', (frame) => this.evaluate(frame));
events.on('timeline.smoothness', () => this.rebuildSpline());

当关键帧增删或平滑度改变时会 rebuildSpline() 重建样条。位置与目标点分别插值，使相机沿平滑曲线运动，而非生硬的直线段。提高 smoothness 会让运镜更柔和，降低则更贴近关键帧的折线。

5. 导出图片

SuperSplat 通过 src/render.ts 进行离屏渲染，可导出当前视角的高分辨率图片。图片导出设置对话框（src/ui/image-settings-dialog.ts）通常允许指定：

输出分辨率（宽 × 高）；
背景（透明或纯色）；
其他渲染参数。

适合用于生成模型的展示封面、缩略图或宣传图。

6. 导出视频

制作好相机动画后，可导出视频（src/ui/video-settings-dialog.ts，底层使用 mediabunny 编码）。视频设置一般包括：

分辨率与帧率（与时间轴帧率配合）；
时长 / 帧范围（由 frames 决定）；
编码格式与质量；
背景设置。

导出时，编辑器会逐帧渲染相机动画并编码为视频文件，得到一段平滑的模型漫游影片——非常适合在不支持实时 3DGS 的平台（如社交媒体）上展示成果。

7. 实战：制作一段环绕展示动画

Ctrl + T 打开时间轴，设置 frames=180、frameRate=30（6 秒）；
第 0 帧：把相机摆到模型正面，F 对焦，按 Enter 加关键帧；
第 60 帧：旋转到侧面，Enter；
第 120 帧：旋转到背面，Enter；
第 179 帧：回到正面附近，Enter，形成近似环绕；
调整 smoothness 让运镜顺滑；
Space 预览，必要时用 </> 跳到关键帧微调；
导出视频（或先导出几张关键图片）。

8. 本章小结

本章讲解了 SuperSplat 的动画与导出影像能力：

动画系统由 Timeline（时间）与 AnimTrack（内容）解耦组成，相机动画是 CameraAnimTrack；
相机关键帧（Pose）记录位置、目标、可选 FOV，用 Enter/Shift+Enter 增删；
时间轴控制总帧数、帧率、平滑度，支持播放、逐帧、跳关键帧；
关键帧间用三次样条平滑插值；
可导出高分辨率图片与相机漫游视频（mediabunny 编码）。

下一章我们进入最终环节——导出格式、压缩与发布上线。