企业官网建设流程全解析

StykAnimate 是一款免费开源的简笔画动画应用，支持 Windows、Linux 和浏览器。它的核心设计是把「可编辑的文档模型」「后台 Worker 计算」与「WebGPU 渲染器」三层彻底分离——即使更换渲染器或传输层，也不会改变文件语义和编辑命令。下面带你用 5 分钟看懂这三者如何协同工作。

总体架构：一条清晰的分工线

StykAnimate 的架构总纲写得很直白（见 docs/ARCHITECTURE.md）：

分离可编辑文档、后台工作与呈现层。更换渲染器或传输，不应改变文件语义或编辑器命令。

整个应用可以抽象为三个角色：

文档模型：动画数据的唯一事实来源

编辑器核心是一个 Editor 类，它持有：

• 可变的原生 Pivot 文档：图形 ID、线段记录、关键帧、媒体表；
• 有界的命令历史：默认 80 步、48 MiB 字节预算的撤销/重做；
• 独立的派生缓存：关键帧、时间轴、几何缓存被单独失效，摆姿势时不会触发全项目重算。

一个关键设计决策是：选中状态、视口变换、渲染缓存与动画数据完全分离。你拖动视图、点选角色不会弄脏文档，因此不会误触发"未保存"标记。

几何语义统一收敛在 src/pivot/geometry.mjs：增量几何只携带被修改的对象槽位，整图拖拽时只更新每个对象的 GPU 平移量，松手才提交一次坐标——这就是大项目编辑仍然跟手的原因。

💡 保存格式方面，原生.styk文件采用"JSON 骨架 + 二进制分节"的压缩容器，大型工程体积约减半、重开时间大幅缩短，细节见 docs/native-file-format.md。

Worker 层：把重活搬离主线程

StykAnimate 几乎把所有可能卡 UI 的工作都放进了独立线程/进程：

• 编解码进程（Python）：Electron 通过回环服务启动常驻 codec 进程，专门负责读取/写入 Pivot 与 Stick Nodes 文件（backend/server.py）。导入大工程时，UI 传输的是 256 KiB 的分片包而非整棵场景树，接收端带确认机制。
• 播放 Worker：playback-worker.mjs 在后台评估精确的原生 tick，把场景编译为类型化图元数据包，并用 OffscreenCanvas 光栅化兼容对象。
• 导出/缩略图 Worker：保存、视频导出、胶片条预览各自有专属 worker，互不阻塞。

缓存侧，PlaybackCache 与 PreparedFrameCache 维护 CPU/GPU 双端有界 LRU，保留额度由硬件探测值在 playback-budget.mjs 中统一规划。

WebGPU 渲染器：从几何记录到像素

WebGPURenderer 的工作方式与传统"每帧在 CPU 上重绘场景"截然不同：

1. 几何即 GPU 存储缓冲：线段、圆、多边形等根本地记录被编译进 storage buffer，图元覆盖、渐变、变换和裁剪全部由 WGSL 着色器完成；
2. 播放 = 绑定而非重算：缓存命中的播放帧直接绑定已上传的 buffer 提交，主线程不做场景评估或三角化；
3. 高缩放保细节：不透明原生描边在高倍缩放下保持矢量，其余位图素材按原始像素网格裁剪，而不是整场景压成一张大图。

内存吃紧时，系统会按 ADAPTIVE-PREVIEW.md 的策略自动降低光栅细节并分档恢复，而不是简单崩溃或掉帧——UI 上会显示"预览质量已降低"提示。

协同走查：一帧动画的完整旅程

把三层串起来，播放一帧的旅程是：

时间轴 seek → 播放控制器向 worker 请求精确 tick → playback-worker 评估姿态、编译类型化数据包 → 数据包经有界 LRU 缓存（未命中则准备，命中则直接绑定） → WebGPU 渲染器提交 buffer，呈现画面 → 缺包时挂起传输等待准备，绝不静默跳过原生 tick

编辑路径同样解耦：画布手势 → Editor 命令 → 历史条目（一次拖拽 = 一条历史）→ 只失效受影响对象的几何与缓存。Worker 镜像通过增量补丁同步（最多 64 KiB 分片、带 ACK），文档修订变化才整体失效缓存。

保存时，DocumentExporter拿有界快照而非structuredClone整份文档，worker 内完成规范化、校验、序列化，再以 256 KiB 确认分片写盘——中途取消会保留旧文件。

快速上手：按这份清单读架构

想亲手验证行为时，仓库的tests/与scripts/下有成体系的浏览器测试和性能基准（例如node tests/renderer-ui-performance.mjs --fps=60），配合 README 中的npm run serve就能在浏览器里体验同款编辑器。

一句话总结：StykAnimate 的性能秘诀不在某处黑科技，而在于"数据、计算、呈现"三层的严格边界——文档模型只描述动画，Worker 只负责算，WebGPU 只负责画。这套分层也意味着你可以单独替换任何一层，而文件与编辑语义纹丝不动。