CocosCreator之Animation动画组件

官方文档：Cocos Creator 3.8 手册 - 动画系统

官方文档有详细的编辑器相关操作，此处仅记录代码常用操作。

let comp_anim = this.spt_effect.node.getComponent(cc.Animation);//获取动画
comp_anim.stop();//停止播放
comp_anim.play();//播放动画
comp_anim.play("动画名字");//播放动画

播放与停止相关API：

var anim = this.getComponent(cc.Animation);
anim.play('test');// 指定播放 test 动画
anim.play();// 如果没有指定播放哪个动画，并且有设置 defaultClip 的话，则会播放 defaultClip 动画
anim.play('test', 1);// 指定从 1s 开始播放 test 动画
anim.play('test2');// 使用 play 接口播放一个动画时，如果还有其他的动画正在播放，则会先停止其他动画
anim.pause('test');// 指定暂停 test 动画
anim.pause();// 暂停所有动画
anim.resume('test');// 指定恢复 test 动画
anim.resume();// 恢复所有动画
anim.stop('test');// 指定停止 test 动画
anim.stop();// 停止所有动画
//动画信息相关
var animState = anim.play('test');
var clip = animState.clip;// 获取动画关联的 clip
var name = animState.name;// 获取动画的名字
var speed = animState.speed;// 获取动画的播放速度
var duration = animState.duration;// 获取动画的播放总时长
var time = animState.time;// 获取动画的播放时间
var repeatCount = animState.repeatCount;// 获取动画的重复次数
var wrapMode = animState.wrapMode// 获取动画的循环模式
var playing = animState.isPlaying;// 获取动画是否正在播放
var paused = animState.isPaused;// 获取动画是否已经暂停
var frameRate = animState.frameRate;// 获取动画的帧率

动画播放回调：

//cc.Animation.EventType.FINISHED
this.anim_card_huansan.on(cc.Animation.EventType.FINISHED, () => {
    this.node.active = false;
});

绑定多个动画时的播放回调：

this.comp_animat.on(cc.Animation.EventType.FINISHED, (type, state) => {
    cc.log('当前结束的动画名字:' + state._name);
})

遇到的问题：2.3及以下版本的creator.d.ts文件内没有声明此方法导致爆红，请自行添加。

on(type: string, callback: (event: Event.EventCustom) => void, target?: any, useCapture?: boolean): (event: Event.EventCustom) => void;
on<T>(type: string, callback: (event: T) => void, target?: any, useCapture?: boolean): (event: T) => void;
on(type: string, callback: (type: string, state: cc.AnimationState) => void, target?: any, useCapture?: boolean): (type: string, state: cc.AnimationState) => void;    

可注册的回调事件【官方文档抄来的】：

var animation = this.node.getComponent(cc.Animation);
 
// 注册
animation.on('play',      this.onPlay,        this);
animation.on('stop',      this.onStop,        this);
animation.on('lastframe', this.onLastFrame,   this);
animation.on('finished',  this.onFinished,    this);
animation.on('pause',     this.onPause,       this);
animation.on('resume',    this.onResume,      this);
 
// 取消注册
animation.off('play',      this.onPlay,        this);
animation.off('stop',      this.onStop,        this);
animation.off('lastframe', this.onLastFrame,   this);
animation.off('finished',  this.onFinished,    this);
animation.off('pause',     this.onPause,       this);
animation.off('resume',    this.onResume,      this);
 
// 对单个 cc.AnimationState 注册回调
var anim1 = animation.getAnimationState('anim1');
anim1.on('lastframe',    this.onLastFrame,      this);

实操->代码创建图片帧动画且加回调传参：

var animation = this.node.getComponent(cc.Animation);
// frames 这是一个 SpriteFrame 的数组.
var clip = cc.AnimationClip.createWithSpriteFrames(frames, 17);
clip.name = "anim_run";
clip.wrapMode = cc.WrapMode.Loop;
 
// 添加帧事件
clip.events.push({
    frame: 1,               // 准确的时间，以秒为单位。这里表示将在动画播放到 1s 时触发事件
    func: "frameEvent",     // 回调函数名称
    params: [1, "hello"]    // 回调参数
});
 
animation.addClip(clip);
animation.play('anim_run');

异步加载一个AnimationClip组件

    //播放烟雾特效
    PlaySmokeAnima(world_pos) {
        world_pos && (this.pos_smoke = world_pos);
        if (this.node_smoke) {
            let node_pos = this.node_smoke.parent.convertToNodeSpaceAR(this.pos_smoke);
            this.node_smoke.x = node_pos.x;
            this.node_smoke.y = node_pos.y + 30;
            this.pos_smoke = null;
 
            let comp_anim = this.node_smoke.getComponent(cc.Animation);
            comp_anim.stop();
            comp_anim.play();
        } else {
            this._InitNodeSmokeAnimation();
        }
    },
    //初始化烟雾动画节点--可能一次也不会用到，可能用到很多次，用时异步加载
    _InitNodeSmokeAnimation() {
        if (!this.node_smoke) {
            this.node_smoke = new cc.Node('node_smoke');
            let comp_spt = this.node_smoke.addComponent(cc.Sprite);
            let comp_anim = this.node_smoke.addComponent(cc.Animation);
            this.node_smoke.zIndex = 10;
            this.node_smoke.active = true;
            this.node.addChild(this.node_smoke);
            // this.node_smoke.scale = 3;//方便自己测试观察
 
            comp_anim.on(cc.Animation.EventType.FINISHED, () => {
                comp_spt.spriteFrame = null;
            });
            //异步加载
            cc.loader.loadRes("Anim/game_hu_smoke", cc.AnimationClip, (err, clip) => {
                if (err) return;
                comp_anim.addClip(clip);
                comp_anim['_defaultClip'] = clip;
                comp_anim['_currentClip'] = clip;
                this.PlaySmokeAnima();
            });
        }
    },

整理不易，关注收藏不迷路。

————————————————
原文链接：https://blog.csdn.net/qq_34790132/article/details/120597147