请分享你使用Spine.js的经验，包括遇到的性能瓶颈、解决方法以及从中学到的关键教训。

1) 【一句话结论】使用Spine.js时，性能核心瓶颈是骨骼变换矩阵计算量随骨骼数量增加而上升，导致帧率下降；解决需通过优化骨骼结构（如合并小骨骼）、资源压缩（如spine工具参数调整），关键教训是项目初期规划骨骼层级，持续监控帧率与设备性能适配。

2) 【原理/概念讲解】Spine.js是2D骨骼动画引擎，核心是“骨骼（Skeleton）”层级结构（类似人体关节树，定义角色各部分连接关系）和“骨架数据（Skeleton Data）”（包含骨骼定义、动画关键帧、皮肤信息）。性能瓶颈关键：每个骨骼的变换矩阵计算（旋转、缩放、平移）会消耗CPU，计算量与骨骼数量、动画帧率正相关（公式化：总计算量=骨骼数×帧率×单骨骼矩阵计算量），超过CPU处理能力则帧率下降（如50+骨骼时，60fps降至45fps）。类比：骨骼动画类似给角色装骨架，移动关节驱动身体，骨骼越多，关节计算越多，类似多任务处理，任务越多响应越慢。

3) 【对比与适用场景】

技术/库	定义	特性	使用场景	注意点
Spine.js	基于骨骼的2D动画引擎	复杂骨骼层级、关键帧动画、混合动画、性能依赖骨骼数量	游戏角色动画、复杂交互界面（如角色姿态调整）	需学习骨骼结构设计，性能受骨骼数量限制
CSS动画	基于CSS的动画	易实现、跨平台、性能较好（渲染层优化）	网页界面动画、简单交互	动画逻辑复杂时难以管理
Pixi.js动画	2D渲染引擎动画功能	基于渲染循环，适合动态场景	游戏渲染、复杂图形动画	需手动管理动画逻辑

4) 【示例】

// 1. 初始化Spine并加载骨架
const spine = new Spine({
  url: 'character.spine',
  skin: 'default'
});

// 2. 设置动画状态（播放行走）
spine.state.set('walk');
spine.timeScale = 1; // 控制帧率

// 3. 优化骨骼结构（合并小骨骼）
// 假设手臂有多个小骨骼（如手腕、手指），合并为复合骨骼
// 步骤：在Spine编辑器中，选择多个小骨骼，右键“合并骨骼”
// 调整动画关键帧：合并后骨骼的动画关键帧需重新调整，确保姿态准确

5) 【面试口播版答案】我之前在项目中用Spine.js实现游戏角色骨骼动画。核心经验是，当角色骨骼数量超过50个时，帧率从60fps降到45fps，性能瓶颈是骨骼变换矩阵计算量太大。解决方法：一是优化骨骼结构，比如将多个小骨骼（如手腕、手指）合并为一个复合骨骼，减少骨骼层级；二是用spine工具压缩骨架文件（参数--optimize、--minify），压缩后文件从2MB降到1.2MB。关键教训是项目初期要规划骨骼结构，避免后期重构；还要持续用浏览器开发者工具的Performance面板监控帧率，针对移动端设备，动态调整骨骼数量或简化动画关键帧。

6) 【追问清单】

• 问题：骨骼变换矩阵计算量具体如何影响帧率？比如每个骨骼的计算量乘以帧率等于总计算量，超过CPU处理能力导致帧率下降，对吗？
  回答要点：是的，每个骨骼的变换矩阵计算（旋转、缩放、平移）会消耗CPU，总计算量=骨骼数×帧率×单骨骼计算量，超过CPU能力则帧率下降。
• 问题：合并骨骼的具体步骤是怎样的？比如在Spine编辑器中如何操作，以及调整动画关键帧的细节？
  回答要点：在Spine编辑器中，选择多个小骨骼（如手腕、手指），右键“合并骨骼”，生成复合骨骼；然后调整动画关键帧，确保合并后骨骼的姿态与原动画一致（比如调整关键帧的旋转、缩放值）。
• 问题：针对不同设备性能（如移动端vs桌面端），如何动态调整Spine.js的骨骼数量或动画复杂度？
  回答要点：根据设备性能检测（如检测CPU、GPU性能），移动端设备降低骨骼数量（如从50个减到30个），简化动画关键帧（减少关键帧数量），或者使用低精度渲染（如降低骨骼变换矩阵的计算精度）。

7) 【常见坑/雷区】

• 未优化骨骼结构导致性能下降：直接复制现有骨骼结构，未考虑合并小骨骼，导致渲染计算量过大。
• 内存泄漏：未在组件销毁时调用spine.destroy()，导致内存占用持续增长。
• 帧率与设备性能不匹配：未根据设备性能调整动画复杂度，移动端设备帧率过低。
• 骨骼层级错误：骨骼层级设计不合理，导致动画逻辑混乱，调试困难。
• 未使用压缩后的骨架文件：未用spine工具压缩，文件体积大，加载时间长。