cocos 使用帧事件用原生动画包装spine动画

目的: 为了把动效和逻辑分开, 采用一种统一的方式去播放动效, 而不关心动效的具体实现 用一个节点把这条龙包一下, 添加一个动画 在0, 5, 7 秒添加事件帧 双击可以传入函数和参数

目的: 为了把动效和逻辑分开, 采用一种统一的方式去播放动效, 而不关心动效的具体实现

 

用一个节点把这条龙包一下, 添加一个动画

 

在0, 5, 7 秒添加事件帧

 

双击可以传入函数和参数

 

在0秒循环播放行走的动画, 5s播放站立动画, 7s不执行动作, 是为了看动画时间

我们直接使用父节点播放动画, 可以看到整个动画的执行时间是7s

    const spine = this.dragon.getComponent(sp.Skeleton);    const anime = this.node      .getChildByName("spineWrap")      .getComponent(cc.Animation);    console.log(anime);    anime.play("walk");    console.time("anime");    anime.on("finished", () => {      console.log("finished");      console.timeEnd("anime");    });

 

playSpine

const { ccclass, property } = cc._decorator;@ccclassexport default class NewClass extends cc.Component {  playSpine(nodeName, spineName, loop = false, mix = 0.3) {    const node = this.node.getChildByName(nodeName);    console.log("playSpine", nodeName, spineName, loop, mix);    if (!node) {      console.error("node节点不存在", nodeName, this.node);    }    const skeleton = node.getComponent(sp.Skeleton);    if (!skeleton) {      console.error("spine节点不存在", nodeName, this.node);    }    // 如果有正在播放的动画    if (skeleton.animation) {      skeleton.setMix(skeleton.animation, spineName, mix);    }    // add是两者混合, set是中断    // skeleton.addAnimation(0, spineName, loop);    skeleton.setAnimation(0, spineName, loop);  }}