cocos2d-x提供的動畫主要可分為暫態動畫和延時動畫,前者就是不需要時間轉換即時展現的動作,其基類是CCActionInstant類;而後者則指動作完成需要一段時間,故須定義動作執行時間作參數,其基類為CCActionInterval類。
Ø
暫態動畫
實現x翻轉和y翻轉
原圖(iconccc.png)
使用下面的代碼實現x和y翻轉
CCSprite *sprite=CCSprite::create("iconccc.png"); //創建精靈
sprite->setPosition(ccp(200,200)); //設置物件之錨點位置
addChild(sprite,1); //添加至場景
CCActionInstant *AIx=CCFlipX::actionWithFlipX(1); //定義對x軸作翻轉動作
CCActionInstant *AIy=CCFlipY::actionWithFlipY(1);
//定義對y軸作翻轉動作
sprite->runAction(AIx); //運行
sprite->runAction(AIy);
運行效果:
在此處有個概念順道提述一下:設置物件之錨點位置,除用ccp()外尚可利用CCPoint()或 CCPointMake()函式,全部均是傳遞兩個float參數以指定錨點位置(預設為物件之中心點),若定義為CCPointZero則是指定在(0,,0)原點位置。
Ø
延時動畫
cocos2d-x對此類型動畫之類別定義有個簡單的命名規則以作區別:
u CCXxxxTo - 絕對動作,執行的結果與當前的狀態關係無關
u CCXxxxBy - 相對動作,執行動作依存於當前的狀態上,即執行的結果與當前狀態具有相關性
至於常用於遊戲之動畫類別列舉如下:
.移動至 - CCMoveTo
.移動 - CCMoveBy
.跳躍至 - CCJumpTo :其設定參數為終點位置、跳躍高度和跳躍次數
.跳躍 - CCJumpBy
.貝賽爾曲線 – CCBezierBy:其 設定參數為P0-起點、P1-起點切線方向、P2-終點切線方向及P3-終點,可參考如下圖說明。
.移動 - CCMoveBy
.跳躍至 - CCJumpTo :其設定參數為終點位置、跳躍高度和跳躍次數
.跳躍 - CCJumpBy
.貝賽爾曲線 – CCBezierBy:其 設定參數為P0-起點、P1-起點切線方向、P2-終點切線方向及P3-終點,可參考如下圖說明。
.放大至 - CCScaleTo :若設定參數為小數則為縮小動作,反之則為放大
.放大 - CCScaleBy
.旋轉至 - CCRotateTo
.旋轉 - CCRotateBy
.閃爍 - CCBlink
.色調變換至 - CCTintTo
.色調變換 - CCTintBy
.漸變至 - CCFadeTo
.扇入 - CCFadeIn
.扇出 - CCFadeOut
.放大 - CCScaleBy
.旋轉至 - CCRotateTo
.旋轉 - CCRotateBy
.閃爍 - CCBlink
.色調變換至 - CCTintTo
.色調變換 - CCTintBy
.漸變至 - CCFadeTo
.扇入 - CCFadeIn
.扇出 - CCFadeOut
應用代碼如下:
CCActionInterval *AIr=CCRotateBy::actionWithDuration(2,270); //定義旋轉動畫270度,時間為2秒
sprite->runAction(AIr); //運行
除前述之動畫類別外,尚有一些組合動畫類別,分述如下:
u
CCSequence
此類別是繼承CCActionInterval之 CCFiniteTimeAction子類別衍生而來,本身可被CCNode物件執行,其使用時機乃為線性排列定義若干個動作,然後依照先後次序逐個進行,應用代碼如下: CCActionInterval
*ac=CCRotateBy::actionWithDuration(2,270);
CCActionInterval *bc=CCBlink::actionWithDuration(3,10);
CCActionInterval *mc=CCMoveTo::actionWithDuration(2,CCPoint(300,200));
CCActionInterval *jc=CCJumpTo::actionWithDuration(3,CCPoint(400,400),20,4);
CCFiniteTimeAction *se=CCSequence::actions(ac,bc,mc,jc,NULL); //串聯組合動畫
sprite->runAction(se); //運行,動畫依序執行
u CCSpawn
此類別亦是繼承CCActionInterval之CCFiniteTimeAction子類別衍生而來,其可要求動作同時出現,如:移動式翻轉、變色、縮放等。但需要特別注意的是,同步執行最後完成的時間由基本動作中使用時間最大者來決定,應用代碼如下:
CCActionInterval *ac=CCRotateBy::actionWithDuration(2,270);
CCActionInterval *sc=CCScaleBy::actionWithDuration(2,2,2);
CCFiniteTimeAction *se=CCSpawn::actions(ac,sc,NULL); //串聯組合動畫
sprite
->runAction(se); //運行,動畫同時進行
u CCRepeat
此類別是繼承CCActionInterval衍生而來,其可用來將某一動作作有限次數之重複,應用代碼如下: CCActionInterval
*ac=CCRotateBy::actionWithDuration(2,270); CCActionInterval
*sc=CCScaleBy::actionWithDuration(2,2,2);
CCFiniteTimeAction *se=CCSpawn::actions(ac,sc,NULL); //串聯組合動畫
CCActionInterval *rc=CCRepeat::actionWithAction(se,4); //定義動畫重複執行次數
sprite
->runAction(rc); //運行,動畫重複執行
u reverse()
反向執行某個動作,只限於支持針對序列動作的反向執行。此反向執行動作並不是一個專門的類,而是CCFiniteTimeAction提供的一個操作方法。須注意的是:並非所有的類都支持反向執行動作,如CCXxxxTo類不支持反向執行動作,而CCXxxxBy類通常可支援,應用代碼如下:
CCActionInterval *ac=CCRotateBy::actionWithDuration(2,270);
CCActionInterval *sc=CCScaleBy::actionWithDuration(2,2,2);
CCFiniteTimeAction *se=CCSpawn::actions(ac,sc,NULL); //串聯組合動畫
CCFiniteTimeAction *rrc=se->reverse(); //定義反向執行動作
CCFiniteTimeAction *lc=CCSequence::actions(se,rrc,NULL); //串聯組合動畫
sprite ->runAction(lc); //運行,動畫將被還原
u CCDelayTime
通過CCDelayTime類,可為序列動作中增加一個時間間歇,應用代碼如下: CCActionInterval
*ac=CCRotateBy::actionWithDuration(2,270);
CCActionInterval *sc=CCScaleBy::actionWithDuration(2,2,2);
CCFiniteTimeAction *se=CCSpawn::actions(ac,sc,NULL);
CCFiniteTimeAction *rrc=se->reverse();
CCFiniteTimeAction *lc=CCSequence::actions(se,CCDelayTime::actionWithDuration(3),rrc,NULL);
sprite ->runAction(lc); //運行,動畫執行將間隔停歇一段時間
u CCCallFunc
可在運行動畫過程中進行函式呼叫,此函式無返回值,參數為CCObject*,通常用於自訂之動畫設計,應用代碼如下: CCActionInterval
*ac=CCRotateBy::actionWithDuration(2,270);
CCActionInterval *sc=CCScaleBy::actionWithDuration(2,2,2);
CCFiniteTimeAction *se=CCSpawn::actions(ac,sc,NULL);
CCFiniteTimeAction *rrc=se->reverse();
CCFiniteTimeAction *func=CCCallFunc::actionWithTarget(this,callfunc_selector(HelloWorld::backFunc)); //定義呼叫函式
CCFiniteTimeAction *lc=CCSequence::actions(se,func,CCDelayTime::actionWithDuration(3),rrc,NULL);
sprite ->runAction(lc); //運行,此會在se動畫運行完成後調用函數
.png)

