cocos creator学习10——骨骼动画

骨骼动画组件

组件属性列表

sp.Skeleton	控制面板属性
Skeleton Data	骨骼的控制文件.json文件
Default Skin	默认皮肤
Animation	正在播放的动画
Loop	是否循环播放
Premuliplied Alpha	是否使用贴图预乘
TimeScale	播放动画的时间比例系数
Debug Slots	是否显示 Slots的调试信息
Debug Bone	是否显示Bone的调试信息

骨骼动画组件方法

---

常用方法	功能
clearTrack(trackIndex)	清理对应Track的动画
clearTracks()	清除所有 track 的动画状态
setAnimation(trackIndex,“anim_name”,is_loop)	清除管道所有动画后，再重新播放
addAnimation(trackIndex,“anim_name”,is_loop)	往管道里面添加一个动画

使用示例

通过按钮实现播放不同骨骼动画

实现代码：

 onLoad () {
        var spine = this.node.getChildByName("JXM");
        var ske = spine.getComponent(sp.Skeleton);
        this.ske = ske;
    },

    start () {

    },

    enterclick:function(){
        this.ske.clearTracks();//清理所有播放队列的动画
	    this.ske.setAnimation(0,"in",false);  //in是在Animation的属性列表中的一个
        this.ske.addAnimation(0,"idle_1",true);
    },
    enterclick1:function(){
        this.ske.clearTracks();//清理所有播放队列的动画
        this.ske.setAnimation(0,"err_1",false);
        this.ske.addAnimation(0,"idle_1",true);
    },
    enterclick2:function(){
        this.ske.clearTracks();//清理所有播放队列的动画
        this.ske.setAnimation(0,"ok_1",false);
        this.ske.addAnimation(0,"idle_1",true);
    },

setAnimation()会自动清理管道
addAnimation() 不会清理管道
把setAnimation()替换成addAnimation() 运行效果

    onLoad () {
        var spine = this.node.getChildByName("JXM");
        var ske = spine.getComponent(sp.Skeleton);
        this.ske = ske;
    },

    start () {

    },

    enterclick:function(){
        this.ske.clearTracks();//清理所有播放队列的动画
        this.ske.setAnimation(0,"in",false);
        this.ske.addAnimation(0,"idle_1",true);
    },
    enterclick1:function(){
   //     this.ske.clearTracks();//清理所有播放队列的动画
//     this.ske.setAnimation(0,"err_1",false);
	   this.ske.addAnimation(0,"err_1",false); // setAnimation改成addAnimation
        this.ske.addAnimation(0,"idle_1",true);
    },
    enterclick2:function(){
    //    this.ske.clearTracks();//清理所有播放队列的动画
        this.ske.setAnimation(0,"ok_1",false);
        this.ske.addAnimation(0,"idle_1",true);
    },
    // update (dt) {},
});

可以看出如果直接addAnimation() 它会在其他骨骼动画播放完后才开始播放它对应的骨骼动画

骨骼动画事件监听

监听方法	触发条件
setStartListener(listener)	用来设置开始播放动画的事件监听
setEndListener(listener)	用来设置动画播放完后的事件监听
setCompleteListener(listener)	用来设置动画播放一次循环结束后的事件监听

 start () {
        this.ske.setAnimationListener(function(){
            cc.log("动画开始播放的事件");
        });
        this.ske.setEndListener(function(){
            cc.log("setEnd");
        });
        this.ske.setCompleteListener(function(){
            cc.log("play_once");
        });
    },