您的位置：首页 > 移动开发 > Cocos引擎

cocos creator学习10——骨骼动画

2018-03-22 17:05 459 查看

骨骼动画组件

组件属性列表


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(){

4000
cc.log("play_once");
});
},

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： cocos creator

相关文章推荐

新的分享

章节导航