cocos creator學習10——骨骼動畫
阿新 • • 發佈：2019-01-23
骨骼動畫元件
元件屬性列表
| 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" 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");
});
},