Cocos Creator中Spine动画setTrackCompleteListener回调丢失问题解析

问题现象

在Cocos Creator 3.8.6版本中使用Spine动画时，开发者发现通过setTrackCompleteListener方法设置的回调函数会出现意外丢失的情况。具体表现为：

1. 第一次动画播放时，complete回调能够正常触发
2. 第二次及后续播放时，回调函数不再被触发
3. 如果改用setCompleteListener方法则一切正常

问题复现

通过以下代码可以稳定复现该问题：

testTrackComplete() {
    this.spine.clearAnimation();
    const trackEntry = this.spine.setAnimation(0, "Start3", false);
    this.spine.setTrackCompleteListener(trackEntry, () => {
        console.log("track complete");
        setTimeout(() => {
            this.testTrackComplete();
        }, 1000);
    });
}

这段代码本应实现动画的循环播放，但实际上只会执行两次（回调只触发一次）。

问题根源分析

经过深入分析，发现问题出在Spine动画系统的事件处理机制上：

1. 事件触发顺序异常：当第一次动画播放完成后，本该立即触发dispose事件清理监听器，但实际上dispose事件被延迟到第二次动画开始后才触发。

2. 监听器清理时机不当：dispose事件触发时，会执行以下清理操作：

   this._trackSet.delete(id);
   curTrack.listener = null as any;
   

   而此时第二次动画已经注册了新的监听器，导致新监听器被意外清理。

3. 原生与脚本层交互问题：Cocos Creator的TypeScript层和C++原生层在两个不同的上下文中运行，导致事件触发时机出现偏差。

技术细节

1. TrackEntry生命周期：每个Spine动画轨道(Track)都有一个对应的TrackEntry对象，它负责管理动画状态和事件监听。

2. 事件类型：

   • complete：动画正常播放完成时触发
   • end：动画播放结束时触发（包括中断情况）
   • dispose：轨道资源被释放时触发

3. 预期执行流程：

   第1次播放 → 注册监听 → 触发complete → 清理监听
   第2次播放 → 注册监听 → 触发complete → 清理监听
   

4. 实际执行流程：

   第1次播放 → 注册监听 → 触发complete
   第2次播放 → 注册监听
   第1次dispose → 清理监听（包括第2次的）
   

解决方案

1. 临时解决方案：

   • 避免在回调中使用clearAnimation()方法
   • 改用setCompleteListener替代setTrackCompleteListener

2. 根本解决方案：

   • 修复事件触发时序问题，确保dispose事件在正确的时机触发
   • 改进TrackEntry管理机制，避免跨动画周期的干扰

最佳实践建议

1. 对于简单的循环动画，考虑使用setAnimation的loop参数设为true

2. 如果需要精确控制动画流程：

   playAnimation() {
       const entry = this.spine.setAnimation(0, "anim", false);
       this.spine.setCompleteListener(() => {
           // 处理完成逻辑
           this.playAnimation();
       });
   }
   

3. 注意TrackEntry对象的生命周期，避免在dispose后继续使用

总结

这个问题揭示了Cocos Creator中Spine动画系统在事件处理机制上的一个缺陷，特别是在跨脚本层和原生层交互时的时序问题。开发者在使用时需要特别注意监听器的生命周期管理，避免在可能被清理的上下文中注册关键回调。