基于同一个真实产品叙事实验得到的升级路径。
默认策略
| 对比维度 | CSS + SVG | Motion | GSAP |
|---|---|---|---|
| 最适合的角色 | 原生能力基线 | React 交互 | 精细编排 |
| 控制模型 | 状态 + 关键帧 | 组件 + 动画值 | 显式时间轴 |
| 布局 / 挂载状态 | 手动处理 | 一等能力 | 需要手动测量 |
| 时间轴定位 | 需要 WAAPI 桥接 | 支持 | 一等能力 |
| 路由独占 gzip | 约 0.9 kB | 约 52 kB | 约 1.3 kB + 27 kB 懒加载 |
| 中断处理 | 适合简单状态 | 优秀 | 单一时钟下优秀 |
| 调试方式 | DevTools 样式面板 | React + 动画作用域 | 时间轴 + 标签 |
| 创作能力上限 | 短小编排 | 产品交互 | 高密度序列 |
保持职责局部化：CSS 负责持久的状态反馈，Motion 负责 React 交互，GSAP 负责经过明确设计的主时间轴。
只有每个图层都明确服从一个时钟时，混合使用才是安全的。不要让 CSS、Motion 和 GSAP 同时写入同一个 transform 属性。
三套参考实现启用“减弱动态效果”后都会立即显示完成状态；信息获取不依赖观看完整动画。
播放控制必须支持键盘操作，每个舞台还要在视觉 SVG 图层之外保留语义化文本。