cocos2d中的動畫在每一個遊戲當中，都有很多各種各樣的動畫效果，比如街頭霸王中的旋風腿，植物大戰殭屍中豌豆的扭動、殭屍的走路、***動作等，雖然簡單的移動動作也可以實現這些功能，但是這樣看上去非常的笨拙和不真實。那麼這些效果到底是如何實現的呢？其實很簡單，我們只需要將一系列圖片按照特定的順序排列，然後在精靈對象上執行特定的動畫動作就可以了。
1 cocos2d中動畫相關的類
在cocos2d中實現動畫，需要了解以下幾個類。 q CCAnimate：該類爲一種特殊的動作，也稱爲動畫動作。 q CCAnimation：該類封裝了一個精靈幀序列和各個精靈幀之間的延遲時間，作爲精靈播放動畫的參數。 q CCAnimationCache：該類是一個單例，作爲一個緩存池來緩存CCAnimation動畫。
2 簡單動畫效果
接下來我們通過示例演示在cocos2d中實現動畫效果。在Xcdoe中使用cocos2d模板創建一個項目，命名爲“AnimationTest”，加入準備好的圖片資源，本例爲8張植物大戰殭屍中的殭屍圖片，利用這些單獨的圖片創建動畫，完成一個殭屍走路的動畫效果。實現代碼如下。
程序清單：codes/13/13.11/AnimationTest/AnimationTest/HelloWorldLayer.m
-(id) init
{
if( (self=[super init]) ) {
CGSize winSize = [[CCDirector sharedDirector] winSize];
CCSprite* bgSprite = [CCSprite spriteWithFile:@"gamebg.png"];
bgSprite.position = ccp(winSize.width/2,winSize.height/2);
[self addChild:bgSprite];
// 創建殭屍精靈，並設置座標位置在屏幕之外
CCSprite* zSprite = [CCSprite spriteWithFile:@"z_00_01.png"];
zSprite.position = ccp(winSize.width+zSprite.contentSize.width/2,winSize.height/2);
[self addChild:zSprite];
// 創建CCAnimation動畫，指定動畫幀的內容
CCAnimation* anim = [CCAnimation animation];
[anim addSpriteFrameWithFilename:@"z_00_01.png"];
[anim addSpriteFrameWithFilename:@"z_00_02.png"];
[anim addSpriteFrameWithFilename:@"z_00_03.png"];
[anim addSpriteFrameWithFilename:@"z_00_04.png"];
[anim addSpriteFrameWithFilename:@"z_00_05.png"];
[anim addSpriteFrameWithFilename:@"z_00_06.png"];
[anim addSpriteFrameWithFilename:@"z_00_07.png"];
[anim addSpriteFrameWithFilename:@"z_00_08.png"];
// 創建animAction動畫，restoreOriginalFrame:YES
// 可以讓精靈對象在動畫執行完後恢復到最初狀態
id animAction = [CCAnimate actionWithDuration:1.5f animation:anim
restoreOriginalFrame:YES];
// 定義一個動作，重複執行CCAnimate動畫
id repeatanimAction = [CCRepeatForever actionWithAction:animAction];
// 定義一個動作，讓精靈對象移動到特定的位置
id moveTo = [CCMoveTo actionWithDuration:10.0f
position:ccp(-zSprite.contentSize.width/2,winSize.height/2)];
// 殭屍精靈重複執行動畫動作和移動動作
[zSprite runAction:repeatanimAction];
[zSprite runAction:moveTo];
}
return self;
}
3 使用精靈表單實現動畫效果
上一節實現了一個簡單的動畫效果，在實際開發工作當中，通常會使用更加高效的方式來完成動畫，就是使用我們前面介紹過的精靈表單。上一節使用單獨的精靈，每次都需要調用OpenGL ES的繪圖命令，速度會大大降低；而如果使用精靈表單，無論紋理圖集上有多少精靈，只需要調用一次繪圖命令即可。所以使用精靈表單，可以大大提升遊戲的性能。
首先按照13.9.6節制作精靈表單的步驟，將所有的圖片製作成精靈表單。
① 加載圖片。把所有的精靈圖片拖動到Zwoptex的空白處，然後單擊工具條上的“Layout”按鈕，顯示效果如圖13.49所示。
② 單擊工具條上的“publish Settings”按鈕，在Texture下的“Save To File”處設置生成的PNG文件名和路徑，在Coordinates下的“Save To File”處設置生成的plist文件名和路徑，完成後單擊“Done”按鈕保存設置。
③ 單擊上方左側的“Publist”按鈕生成所需要的plist文件和PNG文件。
接下來我們使用精靈表單來實現動畫效果。在Xcdoe中使用cocos2d模板創建一個項目，命名爲“AnimationCacheTest”，加入準備好的plist文件和圖片資源。實現代碼如下。
程序清單：codes/13/13.11/AnimationCacheTest/AnimationCacheTest/HelloWorldLayer.m
-(id) init
{
if( (self=[super init]) ) {
CGSize winSize = [[CCDirector sharedDirector] winSize];
// ①讀取plist文件將精靈幀紋理添加到精靈幀緩存當中
[[CCSpriteFrameCache sharedSpriteFrameCache]
addSpriteFramesWithFile:@"animation.plist"];
// ②創建一個精靈表單
CCSpriteBatchNode* batchNode = [CCSpriteBatchNode
batchNodeWithFile:@"animation.png"];
// ③將精靈表單作爲層的子節點添加到層當中
[self addChild:batchNode];
// ④創建背景精靈添加到精靈表單中
CCSprite* bgSprite = [CCSprite spriteWithSpriteFrameName:@"gamebg.png"];
bgSprite.position = ccp(winSize.width/2,winSize.height/2);
[batchNode addChild:bgSprite];
// ⑤創建殭屍精靈，設置座標位置在屏幕之外
CCSprite* zSprite = [CCSprite spriteWithSpriteFrameName:@"z_00_01.png"];
zSprite.position = ccp(winSize.width+zSprite.contentSize.width,winSize.height/2);
// ⑥創建一個數組用來保存動畫
NSMutableArray* array = [NSMutableArray array];
// 遍歷所有圖片，然後從精靈幀緩存中獲取與圖片名稱相對應的精靈幀保存到數組當中
for(int i = 1;i<=8;i++){
NSString* fileName = [NSString stringWithFormat:@"z_00_0%i.png",i];
CCSpriteFrame* frame = [[CCSpriteFrameCache sharedSpriteFrameCache]
spriteFrameByName:fileName];
[array addObject:frame];
}
// ⑦創建一個動畫並設計成重複動作
id animation = [CCAnimation animationWithSpriteFrames:array delay:0.1f];
id animate = [CCAnimate actionWithAnimation:animation];
id repeate = [CCRepeatForever actionWithAction:animate];
// ⑧創建一個CCMoveTo讓精靈移動到特定的位置
id moveTo = [CCMoveTo actionWithDuration:10.0f
position:ccp(-zSprite.contentSize.width/2,winSize.height/2)];
// ⑨讓殭屍精靈運行動畫和移動動作
[zSprite runAction:repeate];
[zSprite runAction:moveTo];
// ⑩將殭屍精靈添加到精靈表單中
[bgSprite addChild:zSprite];
}
return self;
}
上面程序中，編號①代碼讀取animation.plist文件將精靈幀紋理添加到精靈幀緩存當中。編號②代碼根據animation.png文件創建一個精靈表單。編號③代碼將精靈表單作爲層的子節點添加到層當中。編號④代碼創建背景精靈添加到精靈表單中。編號⑤代碼創建殭屍精靈，並設置座標位置。
編號⑥代碼創建一個數組，並遍歷所有圖片，然後從精靈幀緩存中獲取與圖片名稱相對應的精靈幀保存到數組當中。編號⑦代碼創建動畫對象並傳入精靈圖片幀數組，同時指定動畫的播放速度，然後將動畫設計成一個重複的動作。編號⑧代碼創建一個CCMoveTo讓精靈移動到特定的位置。
編號⑨代碼讓殭屍精靈執行動畫和移動的動作。編號⑩代碼將殭屍精靈添加到精靈表單中。
通過以上步驟，我們就完成了通過精靈表單創建cocos2d動畫效果的過程。單擊“Run”按鈕執行AnimationCacheTest項目，模擬器顯示和直接使用圖片幀創建動畫的效果一樣。使用精靈表單可以大大提升遊戲的性能，在實際的項目開發當中應該更多地採用精靈表單的方式加載所有的精靈對象。