在cocos creator遊戲引擎中如果要實現動畫播放會有兩種方式:
- 通過動畫編輯器實現補間動畫
- 使用幀動畫組件實現動畫播放
在這裏我推薦大家使用幀動畫組件，一個是因爲方便快捷，一個組件寫好全局通用。二是因爲如果要實現一個人物動畫播放後回調，相比之下，動畫編輯器只能在編輯器中插入函數進行回調，而這種函數的回調如果其他人看你代碼的時候其實是很難發現這個調用的，所以這裏我更推薦幀動畫，那麼接下來我就帶大家一起實現這個幀動畫組件從而實現動畫的播放效果。
首先準備好我們的資源放到res的文件夾下:
然後創建一個空節點並掛載一個sprite組件，接下來我們創建一個叫anim的腳本組件,打開後我們公開一個spriteFrame數組的接口，創建一個用於控制動畫播放速度的變量speed和一個控制是否播放動畫的變量if_play_anim:
然後聲明一個顯示播放時間的變量,並獲取到我們的cc.Sprite組件,再創建一個循環播放的函數play_cycle_anim(),在onload的時候通過if_play_anim來判斷是否開啓播放:
再來實現一下播放的函數,然後通過update來實現圖片的輪換, 代碼的功能已經寫到註釋上了:
但這裏要注意的是函數之所以再初始化一次時間條是因爲,onload中時間條的只在第一次運行的時候會初始化，如果後續通過其他組件關閉了這個播放接口，再一次調用時play_time可能還是保留在上一次的數值段,所以我們需要在函數中再進行一次初始化：
這裏我們的組件默認使用循環播放 , 如果要實現只播放一次的效果可以通過寫個函數或公開一個變量接口來控制。其他功能可以依據項目的需求在基礎上進行修改和添加。下面是全部代碼:
cc.Class({
extends: cc.Component,
properties: {
sprite_frames: {
default: [],
type: cc.SpriteFrame,
},
speed:0.1,
if_play_anim:false, // 是否播放動畫
},
onLoad () {
this.play_times = 0; // 播放的時間
this.anim_sprite = this.node.getComponent(cc.Sprite);
if (this.if_play_anim)
this.play_cycle_anim();
},
start () {
},
play_cycle_anim:function(){
//如果組件上沒有掛載任何圖片則直接返回
if (this.sprite_frames.length <= 0) {
return;
}
this.play_times = 0;
//初始化圖片爲第一張
this.anim_sprite.spriteFrame = this.sprite_frames[0];
},
update (dt) {
if(this.if_play_anim){
this.play_times += dt; //疊加已經過去的時間
var index = Math.floor(this.play_times / this.speed); //通過速度控制圖片的更換
while(index >= this.sprite_frames.length) {
//如果index等於圖片的總數量時重新切換到第一張圖片
index -= this.sprite_frames.length;
//重置時間條
this.play_time -= (this.sprite_frames.length * this.duration);
}
this.anim_sprite.spriteFrame = this.sprite_frames[index];
}
else{
}
},
});
感謝閱覽奎斯特文章。