Componente de animación de animación de CocosCreator.

Documentación oficial: Manual Cocos Creator 3.8 - Sistema de animación

La documentación oficial tiene operaciones detalladas relacionadas con el editor, y aquí solo se registran las operaciones de código comunes.

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

Reproducir y detener API relacionadas:

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;// 获取动画的帧率

Devolución de llamada de reproducción de animación:

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

Devolución de llamada de reproducción al vincular varias animaciones:

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

Problemas encontrados: este método no está declarado en el archivo Creator.d.ts de las versiones 2.3 e inferiores, lo que hace que se vuelva popular. Añádelo tú mismo.

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;

Eventos de devolución de llamada registrables [copiados de documentos oficiales]:

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);

Operación práctica-> Código para crear una animación de marco de imagen y agregar devolución de llamada para pasar parámetros:

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');

Cargar un componente AnimationClip de forma asincrónica

    //播放烟雾特效
    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();
            });
        }
    },

No es fácil de organizar, así que presta atención a la colección para no perderte.

————————————————
Enlace original: https://blog.csdn.net/qq_34790132/article/details/120597147

Componente de animación de animación de CocosCreator.

Supongo que te gusta