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

CocosCreator目前支持的Animation回调事件有：

• play : 开始播放时
• stop : 停止播放时
• pause : 暂停播放时
• resume : 恢复播放时
• lastframe : 假如动画循环次数大于 1，当动画播放到最后一帧时
• finished : 动画播放完成时

首先确保节点已经添加了cc.Animation组件，并且至少添加了一个Animation Clip，假设该clip名称为’run’。

在 onStart 获取Animation对象并保存起来

onStart() {
    this.animCtrl = this.node.getComponent(cc.Animation);
}

在需要处播放动画

this.animCtrl.play('run');

注册回调有2种方法，一种是对 cc.AnimationState 注册回调，如下：

// 对单个 cc.AnimationState 注册回调
var animState = this.animCtrl.getAnimationState('run');
if (animState) {
    animState.on('stop', (event) => {
        // 处理停止播放时的逻辑
        let clip = event.detail;
        ...
    }, this);
}

另外一种是对 cc.Animation 注册回调，如下：

// 注册播放动画结束的回调
this.animCtrl.on('stop', this.onAnimStop, this);

onAnimStop回调函数的实现，用来动画停止播放时的处理

onAnimStop: function(event) {
    let animState = event.detail;
    if (animState.name === 'run' && event.type === 'stop') {
        // 注销回调函数
        this.animCtrl.off('stop', this.onAnimStop, this);
        ...
    }
}

这2种注册回调方法的区别是，对 cc.AnimationState 注册回调，它仅会在该 clip 发生相应事件时进入回调，方便对不同 clip 做不同处理。而对 cc.Animation 注册回调，则会在每个 clip 发生相应事件时都会进入回调，方便做全局处理。一般情况下，我们使用第一种，对 cc.AnimationState 注册回调就可以了。