Cocos2d-js 使用cc.Animation實現跑酷
首先，瞭解一下cc.Animation作用是什麼，它是在cc.Sprite物件展示動畫時使用的一個cc.Animation物件。
構造方法：
cc.Animation(frames, delay, loops)
在cc.Sprite物件展示動畫時使用的一個cc.Animation物件.
cc.Animation物件包括cc.SpriteFrame物件和兩幀之間的時間.
你可以使用cc.Animate動作動畫化cc.Animation 物件.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
// 1. 建立一個空的動畫幀
var animation1 = new cc.Animation();
// 2. 分別使用精靈幀、延續時長、迴圈次數來建立動畫
var spriteFrames = [];
var frame = cc.spriteFrameCache.getSpriteFrame("grossini_dance_01.png");
spriteFrames.push(frame);
var animation1 = new cc.Animation(spriteFrames);
var animation2 = new cc.Animation(spriteFrames, 0.2);var animation2 = new cc.Animation(spriteFrames, 0.2, 2);
// 3. 分別使用動畫幀、延續時長、迴圈次數來建立動畫
var animationFrames = [];
var frame = new cc.AnimationFrame();
animationFrames.push(frame);
var animation1 = new cc.Animation(animationFrames);
var animation2 = new cc.Animation(animationFrames, 0.2);
var animation3 = new cc.Animation(animationFrames, 0.2, 2);
// 通過動畫來建立一個action
var action = cc.animate(animation1);
// 執行動畫
sprite.runAction(action);
|
常用的屬性和方法介紹：
addSpriteFrame(frame)
新增一個動畫幀，該幀預設為一個延時單位，總的動畫幀長也增加一個延時單位
addSpriteFrameWithFile(fileName)
使用圖片的檔名新增一個精靈幀. 其內部會建立一個cc.SpriteFrame並新增它，該動畫幀將自動新增一個延時單位
addSpriteFrameWithTexture(texture, rect)
通過texture和rect來建立一個精靈幀. 其內部會建立一個cc.SpriteFrame並新增它，該動畫幀將自動新增一個延時單位
clone()
克隆當前的動畫
getDelayPerUnit()
返回每一個延時單位的秒數
getDuration()
返回整個動畫的持續秒數. 它的結果等於總的延時單位數 * 每一個延時單位的時長
getFrames()
返回動畫幀陣列
getLoops()
返回動畫要迴圈執行的次數，0, 表示它不是一個動畫. 1, 表示已經被執行過一次 ..
getRestoreOriginalFrame()
當動畫完成時返回是否應該恢復原來的幀
getTotalDelayUnits()
返回cc.Animation總的延時單位數
initWithAnimationFrames(arrayOfAnimationFrames, delayPerUnit, loops)
使用精靈幀來初始化一個動畫，請使用建構函式傳參的方式來進行初始化，不要主動呼叫該方法
initWithSpriteFrames(frames, delay, loops)
通過幀與幀的一個延時來初始化cc.Animation, 但不要自己呼叫該方法,請使用建構函式傳參的方式來初始化.
release()
目前的javaScript繫結(JSB),在一些示例中,需要使用retain和release. 這是JSB的一個bug, 比較醜陋的一種解決方法是使用 retain/release. 所以,這2個方法是為了相容JSB. 這是一個hack,當JSB修復掉retain/release的bug後將它們將會被移除
如果你建立一個引擎物件並沒有在同一幀內將它新增到場景圖中,你將需要保留這個物件的引用
不然,JSB的自動釋放池會認為該物件未被使用這而直接將它釋放,
之後當你想使用該物件時,你將會得到一個"無效的原生物件"的錯誤.
retain方法通過增加一個引用計數來避免原生的物件被釋放掉,
當該認為不再需要這個物件時你需要手工呼叫release方法,否則,將會發生記憶體洩露.
在遊戲的開發程式碼中應保證retain與release方法的配對.
retain()
同上
setDelayPerUnit(delayPerUnit)
設定“延時單位”的秒數
setFrames(frames)
設定動畫幀陣列
setLoops(value)
設定動畫要迴圈執行的次數，0, 表示它不是一個動畫. 1, 表示已經被執行過一次
setRestoreOriginalFrame(restOrigFrame)
設定當動畫播放完畢之後是否恢復成初始的幀
cc.Animation的具體應用
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
//第一步 建立動畫幀
var background = this.bg = new cc.Sprite("res/bg.png");
background.setPosition(this._size.width/2,this._size.height/2);
background.setScale(const_radioW,const_radioH);
this.addChild(background);
this._animation = new cc.Animation();
for(var i = 0; i < bg_tree.length; i++){
this._animation.addSpriteFrame(new cc.SpriteFrame(bg_tree[i],cc.rect(0,0,background.width,background.height)));
}
//設定每一幀的延時秒數
this._animation.setDelayPerUnit(1/10);
var action = cc.animate(this._animation).repeatForever();
background.runAction(action);
//第二步 加速實現
this.bg.stopAllActions();
this._animation.setDelayPerUnit(1/15);
var action = cc.animate(this._animation).repeatForever();
|