Cocos2d-JS动画

简介: <span style="font-size:14px;">与动作密不可分的还有动画,动画又可以分为场景过渡动画和帧动画。场景过渡动画我们在以往介绍过,这一个我们只介绍帧动画。<br>帧动画<br>帧动画就是按一定时间间隔、一定的顺序、一帧一帧地显示帧图片。我们的美工要为精灵的运动绘制每一帧图片,因此帧动画会由很多帧组成,按照一定的顺序切换这些图片就可以了。<br>在Cocos2d-JS中播放
与动作密不可分的还有动画,动画又可以分为场景过渡动画和帧动画。场景过渡动画我们在以往介绍过,这一个我们只介绍帧动画。
帧动画
帧动画就是按一定时间间隔、一定的顺序、一帧一帧地显示帧图片。我们的美工要为精灵的运动绘制每一帧图片,因此帧动画会由很多帧组成,按照一定的顺序切换这些图片就可以了。
在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

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

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

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




目录
相关文章
|
2月前
|
前端开发 JavaScript UED
使用JavaScript实现动画效果
【4月更文挑战第21天】使用JavaScript实现动画效果
37 10
|
2月前
|
缓存 编解码 JavaScript
在JavaScript小游戏开发中,如何优化游戏性能,比如减少重绘、提高动画流畅度?
提升JavaScript游戏性能的关键点包括:使用requestAnimationFrame优化动画流畅度;减少DOM操作,利用DocumentFragment或虚拟DOM;使用Canvas/WebGL高效渲染;优化图像资源,压缩图片和使用雪碧图;分层渲染与视口裁剪减少无效绘制;借助Web Workers进行后台计算;缓存计算结果;合理添加事件监听器并采用事件委托;定期进行性能分析以找到并解决瓶颈。不断测试与调整是优化的关键。
58 4
|
17天前
|
JavaScript 前端开发 数据可视化
js 实现动画的两种方案对比:setTimeout vs RAF (requestAnimationFrame)
js 实现动画的两种方案对比:setTimeout vs RAF (requestAnimationFrame)
20 2
|
20天前
|
前端开发 JavaScript API
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(下)
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(下)
15 0
|
20天前
|
监控 JavaScript 前端开发
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(上)
只会用插件可不行,这些前端动画技术同样值得收藏-JavaScript篇(上)
19 0
|
20天前
|
前端开发 JavaScript
前端 JS 经典:数字变化动画
前端 JS 经典:数字变化动画
18 0
|
21天前
|
JavaScript
vue + d3.js(v6) 绘制【柱状图/条形图】(含动画和交互)
vue + d3.js(v6) 绘制【柱状图/条形图】(含动画和交互)
11 0
|
21天前
|
JavaScript 前端开发
vue页面滚动动画——wow.js教程
vue页面滚动动画——wow.js教程
32 0
|
26天前
|
前端开发 JavaScript
HTML+CSS+JS 倒计时动画效果
HTML+CSS+JS 倒计时动画效果
|
2月前
|
JavaScript 前端开发
JavaScript实现缓慢动画的封装
JavaScript实现缓慢动画的封装
20 0