CocosCreator开发笔记(15)-如何处理Spine动画的结束回调

女爷i 2022-05-19 00:49 990阅读 0赞

CocosCreator提供了很方便的Spine动画接口，我们常常会在播放Spine动画完成后做一些处理，这就需要知道Spine动画播放完成的准确时机。

有两种注册结束回调的方法，一是使用 **setCompleteListener**，它是针对单个动画的，一般使用这个就可以了。示例代码如下：

playSpine: function(animName, loop, callback) {
        let spine = this.node.getComponent(sp.Skeleton);
        let track = spine.setAnimation(0, animName, loop);
        if (track) {
            // 注册动画的结束回调
            spine.setCompleteListener((trackEntry, loopCount) => { let name = trackEntry.animation ? trackEntry.animation.name : ''; if (name === animName && callback) { callback(); // 动画结束后执行自己的逻辑 } }); } },

二是使用 **setAnimationListener**，它可以处理所有的动画事件（该接口从Creator2.0开始可能会弃用）。示例代码如下：

playSpine: function(loop, callback) { 
        let spine = this.node.getComponent(sp.Skeleton);
        spine.setAnimation(0, 'run', loop); // 播放名为run的动画
        spine.setAnimationListener(this, this.spineEventCallback); // 注册回调
    },

Spine动画事件的回调函数实现如下：

spineEventCallback: function(skeletonNode, trackEntry, eventType, event, loopCount) { 
        // 如果动画播放完成且名字等于run，则销毁该节点
        if (eventType === sp.AnimationEventType.COMPLETE && trackEntry.animation && trackEntry.animation.name === 'run') {
            this.node.destroy();
        }
    },

引擎中对Spine事件类型的定义如下：

sp.AnimationEventType = cc.Enum({
          START: 0,
          INTERRUPT: 1,
          END: 2,
          DISPOSE: 3,
          COMPLETE: 4,
          EVENT: 5
        });

注：如果动画是循环的，则每完成一次循环都会触发COMPLETE。