Cocos2d-x开发实例介绍帧动画使用

下面我们通过一个实例介绍一下帧动画的使用，这个实例如下图所示，点击Go按钮开始播放动画，这时候播放按钮标题变为Stop，点击Stop按钮可以停止播放动画。

下面我们再看看具体的程序代码，首先看一下看HelloWorldScene.h文件，它的代码如下：

1. #ifndef __HELLOWORLD_SCENE_H__
2. #define __HELLOWORLD_SCENE_H__
3. #include "cocos2d.h"
4. class HelloWorld : public cocos2d::Layer
5. {
6. bool isPlaying; //播放标识                                                                                                  ①
7. cocos2d::Sprite* sprite;                                                                                                        ②
8. public:
9. static cocos2d::Scene* createScene();
10. virtual bool init();
11. voidOnAction(cocos2d::Ref* pSender);                                                                                       ③
12. CREATE_FUNC(HelloWorld);
13. };
14. #endif // __HELLOWORLD_SCENE_H__

第①行代码是声明一个布尔变量isPlaying，用来保存播放状态，true时候说明正在播放，false时候说明停止播放。第②行代码cocos2d::Sprite*sprite是声明一个精灵变量。第③行声明了一个函数，用来在选择不同菜单时候的回调。

1. HelloWorldScene的实现代码HelloWorldScene.ccp文件，其中HelloWorld::init()函数代码如下：
2. bool HelloWorld::init()
3. {
4. if( !Layer::init() )
5. {
6. returnfalse;
7. }
8. SizevisibleSize = Director::getInstance()->getVisibleSize();
9. Pointorigin = Director::getInstance()->getVisibleOrigin();
10. SpriteFrameCache::getInstance()->addSpriteFramesWithFile("run.plist");
11. autobackground = Sprite::createWithSpriteFrameName("background.png");
12. background->setAnchorPoint(Point::ZERO);
13. this->addChild(background,0);
14. sprite= Sprite::createWithSpriteFrameName("h1.png");
15. sprite->setPosition(Point(visibleSize.width/2,visibleSize.height /2));
16. this->addChild(sprite);
17. isPlaying= false;
18. //toggle菜单
19. autogoSprite = Sprite::createWithSpriteFrameName("go.png");                                                 ①
20. autostopSprite = Sprite::createWithSpriteFrameName("stop.png");                                           ②
21. autogoToggleMenuItem = MenuItemSprite::create(goSprite, goSprite);                                    ③
22. auto stopToggleMenuItem = MenuItemSprite::create(stopSprite,stopSprite);                            ④
23. auto toggleMenuItem = MenuItemToggle::createWithCallback(
24. CC_CALLBACK_1(HelloWorld::OnAction,this),
25. goToggleMenuItem , stopToggleMenuItem, NULL);                                             ⑤
26. toggleMenuItem->setPosition(Director::getInstance()->convertToGL(Point(930,540)));                   ⑥
27. auto mn = Menu::create(toggleMenuItem, NULL);
28. mn->setPosition(Point::ZERO);
29. this->addChild(mn);
30. returntrue;
31. }

上述代码第①行是创建Go按钮精灵，对应的第③行代码是创建Go按钮（菜单项）。代码第②行是创建Stop按钮精灵，对应的第④行代码是创建Stop按钮（菜单项）。在第⑤行代码是创建Go和Stop是两种状态切换的开关菜单项。第⑥行代码是设置开关菜单项的位置。

HelloWorldScene的实现代码HelloWorldScene.ccp文件，其中HelloWorld::OnAction(Ref*pSender)函数代码如下：

1. void HelloWorld::OnAction(Ref* pSender)
2. {
3. if(!isPlaying) {
4. ///////////////动画开始//////////////////////
5. Animation*animation = Animation::create();                                                                    ①
6. for(int i=1; i<= 4; i++)
7. {
8. __String*frameName = __String::createWithFormat("h%d.png",i);                                    ②
9. log("frameName= %s",frameName->getCString());
10. SpriteFrame*spriteFrame = SpriteFrameCache::getInstance()->
11. getSpriteFrameByName(frameName->getCString());                                  ③
12. animation->addSpriteFrame(spriteFrame);                                                                           ④
13. }
14. animation->setDelayPerUnit(0.15f);           //设置两个帧播放时间                             ⑤
15. animation->setRestoreOriginalFrame(true);    //动画执行后还原初始状态                   ⑥
16. Animate*action = Animate::create(animation);                                                                          ⑦
17. sprite->runAction(RepeatForever::create(action));                                                         ⑧
18. //////////////////动画结束///////////////////
19. isPlaying= true;
20. }else {
21. sprite->stopAllActions();                                                                                               ⑨
22. isPlaying= false;
23. }
24. }

上述第①行代码是创建一个Animation对象，它是动画对象，然后我们要通过循环将各个帧图片放到Animation对象中。第②行是获得帧图片的文件名，String类型是Cocos2d-x字符串数据类型。第③行代码是通过帧名创建精灵帧对象，第④行代码把精灵帧对象添加到Animation对象中。

第⑤行代码是animation->setDelayPerUnit(0.15f)是设置两个帧播放时间，我们这个动画播放是4帧。第⑥行代码animation->setRestoreOriginalFrame(true)是动画执行完成是否还原到初始状态。第⑦行代码是通过一个Animation对象创建Animate对象，第⑧行代码sprite->runAction(RepeatForever::create(action))是执行动画动作，无限循环方式。

第⑨行代码sprite->stopAllActions()停止所有的动作。

更多内容请关注Cocos2d-x系列图书《Cocos2d-x实战（卷Ⅰ）：C++开发》

本书交流讨论网站：http://www.cocoagame.net

欢迎加入cocos2d-x技术讨论群：257760386、327403678