开发日志｜Studio 动效系统：从崩溃修复到定位交互重构

实习开发日志作者 wwxdsg

记录 Studio 动效系统、交互细节与工程排障过程。

今天这轮开发我主要做了四件事：稳定性修复、工程整理、UI 清理、定位交互升级。
这篇日志只保留技术主线，不展开分支状态和业务流程。

1. 稳定性修复：先止血，再扩展

音频可视化组件崩溃

AudioSpectrum / AudioWaveformLine 在无音频 src 时会直接报错：

TypeError: url must be a string

问题根因很明确：组件内部默认 src 一定存在，结果在 undefined 场景下触发了 fetch(undefined)。

修复策略是把 src 变成可选，并加入降级路径：

1. 有 src：保持原有真实音频分析逻辑
2. 无 src：进入演示模式，用 sin 波形驱动可视化

这样做的价值不只是不崩溃。更重要的是，编辑器在“无真实素材”的设计阶段也能正常预览，交互链路完整可用。

2. 工程整理：把变更从“能跑”变成“可维护”

前期动效开发提交较碎，语义分散，不利于后续评审与回溯。我做了语义归并，把核心变更收敛到两个主题：

1. 高级动效扩充 + 视觉优化 + 场景套件
2. 参数化配置 + 布局定位系统 + 新增组件

同时处理了多轨道时间轴相关改动带来的冲突。处理原则是“能力并存”而非二选一：

1. 多轨道逻辑保留
2. 场景套件逻辑保留
3. 共享数据结构不改语义，只做兼容拼接

这一步的重点不是“把冲突消掉”，而是保证两条演进路线不互相污染。

3. UI 清理：统一入口，减少重复配置

动效配置能力已经集中在右侧图层面板（ElementInspector + LayerPanel），左栏继续保留一套动效选择 UI 会造成重复心智负担。

所以我清理了 keyframe-card.tsx 的冗余实现，包括：

1. 动效预览相关 import 和弹层
2. MotionEffectsSection 及其整段逻辑
3. 背景/文字/叠层的本地动效数据数组

这次清理是“删 UI，不删能力”：

1. keyframe.motionEffects 数据字段仍保留
2. 渲染层读取逻辑不变
3. 现有动画效果不受影响

4. 定位交互升级：从参数输入到可视化操控

这部分是今天最有体感提升的一块。

第一版：缩略画布 + 九宫格

我先把 GeometrySection 的 X/Y/W/H 输入改为可视化控件：

1. 16:9 缩略画布支持点击/拖动定位
2. 3×3 九宫格快速落位
3. 25% / 50% / 100% 大小档
4. 透明度滑杆

这版解决了“数值可调但不直观”的问题。

第二版（最终）：文本框式拖拽

随后升级为更符合设计直觉的交互模型：

1. 拖动框内部：移动 x / y
2. 拖动四角：同时缩放与位移
3. 拖动四边：单轴缩放
4. 九宫格：快速对齐预设位置
5. 大小档：快速设定占比

实现上，使用 useRef 保存拖拽起始状态，onMouseMove 在父容器统一捕获，8 个 handle 单独声明 cursor 方向。
数据层依然沿用 StudioLayer.x / y / width / height，避免破坏既有结构。

5. 当日新增动效组件

今天接入了 3 个组件：

1. MinimalIntro（PK-003）：极简风开场
2. MinimalOutro（PK-004）：极简风收尾
3. TechGridIntro（PK-005）：科技网格开场

这三类组件的接入意义在于补齐开场-收尾-科技风的常用组合，直接提升模板可用性。

6. 今日结论

这轮迭代最核心的收获，不是“又加了几个动效”，而是三件事：

1. 系统在无素材场景下仍可稳定运行
2. 动效配置入口收敛为单一主路径
3. 图层定位从“参数编辑”升级为“直接操控”

从工程角度看，这让 Studio 动效系统更接近一个可持续演进的产品，而不是持续堆功能的实验场。