Cocos2d-JS动画

时间：2021-03-17 03:00:39

与动作密不可分的还有动画，动画又可以分为场景过渡动画和帧动画。场景过渡动画我们在以往介绍过，这一个我们只介绍帧动画。
帧动画
帧动画就是按一定时间间隔、一定的顺序、一帧一帧地显示帧图片。我们的美工要为精灵的运动绘制每一帧图片，因此帧动画会由很多帧组成，按照一定的顺序切换这些图片就可以了。
在Cocos2d-JS中播放帧动画涉及到两个类：cc.Animation和cc.Animate，类图如下图所示，cc.Animation是动画类，它保存有很多动画帧，cc.Animate类是动作类它继承于cc.ActionInterval类，属于间隔动作类，它的作用是将cc.Animation定义的动画转换成为动作进行执行，这样我们就看到动画播放的效果了。

Cocos2d-JS动画
帧动画相关类图

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

Cocos2d-JS动画

帧动画实例

下面我们再看看具体的程序代码，app.js中的HelloWorldLayer的构造代码代码如下：

  1. ctor: function () {
  2. this._super();
  3. var size = cc.director.getWinSize();
  4. var bg = new cc.Sprite(res.Background_png);
  5. bg.x = size.width / 2;
  6. bg.y = size.height / 2;
  7. this.addChild(bg);
  8. var frameCache = cc.spriteFrameCache;
  9. frameCache.addSpriteFrames(res.run_plist, res.run_png);
  10. this.sprite = new cc.Sprite("#h1.png");
  11. this.sprite.x = size.width / 2;
  12. this.sprite.y = size.height / 2;
  13. this.addChild(this.sprite);
  14. //toggle菜单
  15. var goNormalSprite = new cc.Sprite("#go.png");
  16. var goSelectedSprite = new cc.Sprite("#go.png");
  17. var stopSelectedSprite = new cc.Sprite("#stop.png");
  18. var stopNormalSprite = new cc.Sprite("#stop.png");
  19. var goToggleMenuItem = new cc.MenuItemSprite(goNormalSprite, goSelectedSprite);
  20. var stopToggleMenuItem = new cc.MenuItemSprite(stopSelectedSprite, stopNormalSprite);
  21. var toggleMenuItem = new cc.MenuItemToggle(
  22. goToggleMenuItem,
  23. stopToggleMenuItem,
  24. this.onAction, this);
  25. toggleMenuItem.x = 930;
  26. toggleMenuItem.y = size.height - 540;
  27. var mn = new cc.Menu(toggleMenuItem);
  28. mn.x = 0;
  29. mn.y = 0;
  30. this.addChild(mn);
  31. return true;
  32. }

app.js中的HelloWorldLayer中的onAction函数代码如下：

  1. onAction: function (sender) {
  2. if (this.isPlaying != true) {
  3. ///////////////动画开始//////////////////////
  4. var animation = new cc.Animation();                             ①
  5. for (var i = 1; i <= 4; i++) {
  6. var frameName = "h" + i + ".png";                               ②
  7. cc.log("frameName = " + frameName);
  8. var spriteFrame = cc.spriteFrameCache.getSpriteFrame(frameName);        ③
  9. animation.addSpriteFrame(spriteFrame);                          ④
  10. }
  11. animation.setDelayPerUnit(0.15);           //设置两个帧播放时间          ⑤
  12. animation.setRestoreOriginalFrame(true);    //动画执行后还原初始状态       ⑥
  13. var action = cc.animate(animation);                                 ⑦
  14. this.sprite.runAction(cc.repeatForever(action));                        ⑧
  15. //////////////////动画结束///////////////////
  16. this.isPlaying = true;
  17. } else {
  18. this.sprite.stopAllActions();                                       ⑨
  19. this.isPlaying = false;
  20. }
  21. }

上述第①行代码是创建一个Animation对象，它是动画对象，然后我们要通过循环将各个帧图片放到Animation对象中。第②行是获得帧图片的文件名。第③行代码是通过帧名创建精灵帧对象，第④行代码把精灵帧对象添加到Animation对象中。
第⑤行代码animation.setDelayPerUnit(0.15)是设置两个帧播放时间，我们这个动画播放是4帧。第⑥行代码animation.setRestoreOriginalFrame(true)是动画执行完成是否还原到初始状态。第⑦行代码是通过一个Animation对象创建Animate对象，第⑧行代码this.sprite.runAction(cc.repeatForever(action))是执行动画动作，无限循环方式。

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

更多内容请关注最新Cocos图书《Cocos2d-x实战：JS卷——Cocos2d-JS开发》

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

欢迎加入Cocos2d-x技术讨论群：257760386

更多精彩视频课程请关注智捷课堂Cocos课程：http://v.51work6.com

《Cocos2d-x实战 JS卷》现已上线，各大商店均已开售：

京东：http://item.jd.com/11659698.html

欢迎关注智捷iOS课堂微信公共平台，了解最新技术文章、图书、教程信息
Cocos2d-JS动画

相关文章