Cocos2d-JS动画

原创
2015/03/30 10:53
阅读数 333

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



帧动画相关类图





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


帧动画实例

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

[html] view plaincopy在CODE上查看代码片派生到我的代码片

  1. ctor: function () {  

  2.        this._super();  

  3.        var size = cc.director.getWinSize();  

  4.   

  5.   

  6.        var bg = new cc.Sprite(res.Background_png);  

  7.        bg.x = size.width / 2;  

  8.        bg.y = size.height / 2;  

  9.        this.addChild(bg);  

  10.   

  11.   

  12.        var frameCache = cc.spriteFrameCache;  

  13.        frameCache.addSpriteFrames(res.run_plist, res.run_png);  

  14.   

  15.   

  16.        this.sprite = new cc.Sprite("#h1.png");  

  17.        this.sprite.x = size.width / 2;  

  18.        this.sprite.y = size.height / 2;  

  19.        this.addChild(this.sprite);  

  20.   

  21.   

  22.        //toggle菜单  

  23.        var goNormalSprite = new cc.Sprite("#go.png");  

  24.        var goSelectedSprite = new cc.Sprite("#go.png");  

  25.        var stopSelectedSprite = new cc.Sprite("#stop.png");  

  26.        var stopNormalSprite = new cc.Sprite("#stop.png");  

  27.   

  28.   

  29.        var goToggleMenuItem = new cc.MenuItemSprite(goNormalSprite, goSelectedSprite);  

  30.        var stopToggleMenuItem = new cc.MenuItemSprite(stopSelectedSprite, stopNormalSprite);  

  31.   

  32.   

  33.        var toggleMenuItem = new cc.MenuItemToggle(  

  34.            goToggleMenuItem,  

  35.            stopToggleMenuItem,  

  36.            this.onAction, this);  

  37.        toggleMenuItem.x = 930;  

  38.        toggleMenuItem.y = size.height - 540;  

  39.   

  40.   

  41.        var mn = new cc.Menu(toggleMenuItem);  

  42.        mn.x = 0;  

  43.        mn.y = 0;  

  44.        this.addChild(mn);  

  45.   

  46.   

  47.        return true;  

  48.    }  

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

[html] view plaincopy在CODE上查看代码片派生到我的代码片

  1. onAction: function (sender) {  

  2.   

  3.         if (this.isPlaying != true) {  

  4.   

  5.             ///////////////动画开始//////////////////////  

  6.             var animation = new cc.Animation();                             ①  

  7.             for (var i = 1; i <= 4; i++) {  

  8.                 var frameName = "h" + i + ".png";                               ②  

  9.                 cc.log("frameName = " + frameName);  

  10.                 var spriteFrame = cc.spriteFrameCache.getSpriteFrame(frameName);        ③  

  11.                 animation.addSpriteFrame(spriteFrame);                          ④  

  12.             }  

  13.   

  14.             animation.setDelayPerUnit(0.15);           //设置两个帧播放时间          ⑤  

  15.             animation.setRestoreOriginalFrame(true);    //动画执行后还原初始状态       ⑥  

  16.   

  17.             var action = cc.animate(animation);                                 ⑦  

  18.             this.sprite.runAction(cc.repeatForever(action));                        ⑧  

  19.             //////////////////动画结束///////////////////  

  20.   

  21.             this.isPlaying = true;  

  22.   

  23.         } else {  

  24.             this.sprite.stopAllActions();                                       ⑨  

  25.             this.isPlaying = false;  

  26.         }  

  27.     }  

上述第①行代码是创建一个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

智捷课堂现推出Cocos会员,敬请关注:http://v.51work6.com/courseInfoRedirect.do?action=netDetialInfo&courseId=844465&amp;categoryId=0

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

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

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


展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部