下面我們通過一個例項介紹一下幀動畫的使用，這個例項如下圖所示，點選Go按鈕開始播放動畫，這時候播放按鈕標題變為Stop，點選Stop按鈕可以停止播放動畫。

下面我們再看看具體的程式程式碼，首先看一下看HelloWorldScene.h檔案，它的程式碼如下：

#ifndef __HELLOWORLD_SCENE_H__
#define __HELLOWORLD_SCENE_H__
 
#include "cocos2d.h"
 
class HelloWorld : public cocos2d::Layer
{
         bool isPlaying; //播放標識                                                                                                  ①
   cocos2d::Sprite* sprite;                                                                                                        ②
public:
 
   static cocos2d::Scene* createScene();
   virtual bool init(); 
   
    voidOnAction(cocos2d::Ref* pSender);                                                                                       ③
   
   CREATE_FUNC(HelloWorld);
 
};
 
#endif // __HELLOWORLD_SCENE_H__
 

第①行程式碼是宣告一個布林變數isPlaying，用來儲存播放狀態，true時候說明正在播放，false時候說明停止播放。第②行程式碼cocos2d::Sprite*sprite是宣告一個精靈變數。第③行聲明瞭一個函式，用來在選擇不同選單時候的回撥。

HelloWorldScene的實現程式碼HelloWorldScene.ccp檔案，其中HelloWorld::init()函式程式碼如下：
bool HelloWorld::init()
{
    if( !Layer::init() )
    {
         returnfalse;
    }
 
    SizevisibleSize = Director::getInstance()->getVisibleSize();
    Pointorigin = Director::getInstance()->getVisibleOrigin();
 
    SpriteFrameCache::getInstance()->addSpriteFramesWithFile("run.plist");
 
    autobackground = Sprite::createWithSpriteFrameName("background.png");
    background->setAnchorPoint(Point::ZERO);
    this->addChild(background,0);
 
    sprite= Sprite::createWithSpriteFrameName("h1.png");
    sprite->setPosition(Point(visibleSize.width/2,visibleSize.height /2));
    this->addChild(sprite);
 
    isPlaying= false;
   
         //toggle選單
    autogoSprite = Sprite::createWithSpriteFrameName("go.png");                                                 ①
    autostopSprite = Sprite::createWithSpriteFrameName("stop.png");                                           ②
    autogoToggleMenuItem = MenuItemSprite::create(goSprite, goSprite);                                    ③
 auto stopToggleMenuItem = MenuItemSprite::create(stopSprite,stopSprite);                            ④
 auto toggleMenuItem = MenuItemToggle::createWithCallback(
                    CC_CALLBACK_1(HelloWorld::OnAction,this),
                          goToggleMenuItem , stopToggleMenuItem, NULL);                                             ⑤
    toggleMenuItem->setPosition(Director::getInstance()->convertToGL(Point(930,540)));                   ⑥
   auto mn = Menu::create(toggleMenuItem, NULL);
   mn->setPosition(Point::ZERO);
   this->addChild(mn);
 
    returntrue;
}
 

上述程式碼第①行是建立Go按鈕精靈，對應的第③行程式碼是建立Go按鈕（選單項）。程式碼第②行是建立Stop按鈕精靈，對應的第④行程式碼是建立Stop按鈕（選單項）。在第⑤行程式碼是建立Go和Stop是兩種狀態切換的開關選單項。第⑥行程式碼是設定開關選單項的位置。

HelloWorldScene的實現程式碼HelloWorldScene.ccp檔案，其中HelloWorld::OnAction(Ref*pSender)函式程式碼如下：

void HelloWorld::OnAction(Ref* pSender)
{
   
    if(!isPlaying) {
 
         ///////////////動畫開始//////////////////////
         Animation*animation = Animation::create();                                                                    ①
         for(int i=1; i<= 4; i++)
         {
             __String*frameName = __String::createWithFormat("h%d.png",i);                                    ②
             log("frameName= %s",frameName->getCString());
             SpriteFrame*spriteFrame = SpriteFrameCache::getInstance()->
                                       getSpriteFrameByName(frameName->getCString());                                  ③
             animation->addSpriteFrame(spriteFrame);                                                                           ④
         }
 
         animation->setDelayPerUnit(0.15f);           //設定兩個幀播放時間                             ⑤
         animation->setRestoreOriginalFrame(true);    //動畫執行後還原初始狀態                   ⑥
 
         Animate*action = Animate::create(animation);                                                                          ⑦
         sprite->runAction(RepeatForever::create(action));                                                         ⑧
         //////////////////動畫結束///////////////////
 
         isPlaying= true;
 
    }else {       
         sprite->stopAllActions();                                                                                               ⑨
         isPlaying= false;
    }
}
 

上述第①行程式碼是建立一個Animation物件，它是動畫物件，然後我們要通過迴圈將各個幀圖片放到Animation物件中。第②行是獲得幀圖片的檔名，String型別是Cocos2d-x字串資料型別。第③行程式碼是通過幀名建立精靈幀物件，第④行程式碼把精靈幀物件新增到Animation物件中。

第⑤行程式碼是animation->setDelayPerUnit(0.15f)是設定兩個幀播放時間，我們這個動畫播放是4幀。第⑥行程式碼animation->setRestoreOriginalFrame(true)是動畫執行完成是否還原到初始狀態。第⑦行程式碼是通過一個Animation物件建立Animate物件，第⑧行程式碼sprite->runAction(RepeatForever::create(action))是執行動畫動作，無限迴圈方式。

第⑨行程式碼sprite->stopAllActions()停止所有的動作。