Cocos2d-JS动画,cocos2djs帧动画

  次阅读 来源:互联网(转载协议) 2015-09-28 13:14 我要评论(0)

Cocos2d-JS动画,cocos2djs帧动画

与动作密不可分的还有动画,动画又可以分为场景过渡动画和帧动画。场景过渡动画我们在以往介绍过,这一个我们只介绍帧动画。帧动画帧动画就是按一定时间间隔、一定的顺序、一帧一帧地显示帧图片。我们的美工要为精灵的运动绘制每一帧图片,因此帧动画会由很多帧组成,按照一定的顺序切换这些图片就可以了。在Cocos2d-JS中播放帧动画涉及到两个类:cc.Animation和cc.Animate,类图如下图所示,cc.Animation是动画类,它保存有很多动画帧,cc.Animate类是动作类它继承于cc.ActionInterval类,属于间隔动作类,它的作用是将cc.Animation定义的动画转换成为动作进行执行,这样我们就看到动画播放的效果了。\帧动画相关类图实例:帧动画使用下面我们通过一个实例介绍一下帧动画的使用,这个实例如下图所示,点击Go按钮开始播放动画,这时候播放按钮标题变为Stop,点击Stop按钮可以停止播放动画。\帧动画实例下面我们再看看具体的程序代码,app.js中的HelloWorldLayer的构造代码代码如下: ctor: function () {

this._super();

var size = cc.director.getWinSize();

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

bg.x = size.width / 2;

bg.y = size.height / 2;

this.addChild(bg);

var frameCache = cc.spriteFrameCache;

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

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

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

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

this.addChild(this.sprite);

//toggle菜单

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

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

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

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

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

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

var toggleMenuItem = new cc.MenuItemToggle(

goToggleMenuItem,

stopToggleMenuItem,

this.onAction, this);

toggleMenuItem.x = 930;

toggleMenuItem.y = size.height - 540;

var mn = new cc.Menu(toggleMenuItem);

mn.x = 0;

mn.y = 0;

this.addChild(mn);

return true;

}app.js中的HelloWorldLayer中的onAction函数代码如下:onAction: function (sender) {

if (this.isPlaying != true) {

///////////////动画开始//////////////////////

var animation = new cc.Animation(); ①

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

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

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

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

animation.addSpriteFrame(spriteFrame); ④

}

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

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

var action = cc.animate(animation); ⑦

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

//////////////////动画结束///////////////////

this.isPlaying = true;

} else {

this.sprite.stopAllActions(); ⑨

this.isPlaying = false;

}

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

本站部分文章来源于网络以及网友投稿,本站只负责对文章进行整理、排版、编辑,是出于传递更多信息之目的,并不意味着赞同其观点或证实其内容的真实性。如果您有什么意见或建议,请联系QQ28-1688-302!

人工智能实验室
相关文章相关文章
  • Michael I. Jordan带你解读百万奖金ATEC蚂蚁人工智能大赛

    Michael I. Jordan带你解读百万奖金ATEC蚂蚁人工智能大赛

  • teamLab创始人猪子寿之: 抛去衣食住行,我还剩下什么?

    teamLab创始人猪子寿之: 抛去衣食住行,我还剩下什么?

  • Oculus公布原型机,大幅度提升可视角,能实现140°的视场水平

    Oculus公布原型机,大幅度提升可视角,能实现140°的视场水平

  • 2018深圳国际人工智能展览会 2018 shenzhen International Artif

    2018深圳国际人工智能展览会 2018 shenzhen International Artif

网友点评网友点评
阅读推荐阅读推荐

据外媒报道,STEER打造了首款完全自动驾驶停车技术,旨在使常规车辆转变为无人驾驶车辆。STEER的首款技术应用是4级自动驾驶及网络安全停车...

近日,美国软性机器抓手制造商 Soft Robotics 宣布,获得 2000 万美元的融资,本轮投资者包括 Scale Venture Partners,Calibrate Ventures...

据外媒报道,加州车管局发布了《2017自动驾驶脱离报告(California Autonomous Vehicle Disengagement Reports)》,其中谈及了脱离的具体...

用人机语音交互,来解决智能家居适老的问题;通过家庭门禁与安防套件、空气净化套件、可燃气体与有害气体监控套件等相互联动,在不同生活情...