骨骼动画组件
组件属性列表
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");
});
},