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

帧动画相关类图

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

帧动画实例

下面我们再看看具体的程序代码,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动画的更多相关文章

  1. 【06-23】js动画学习笔记01

    <html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...

  2. css动画与js动画的区别

    CSS动画 优点: (1)浏览器可以对动画进行优化.   1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...

  3. CSS VS JS动画,哪个更快[译]

    英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...

  4. [cocos2d] 调用动画方法

    利用texture atlases生成动画 中讲到如何添加动画,如果想要调用已添加的动画怎么办? 在1.0.1版本以前的cocos2d添加动画的方法为: CCAnimation *anim = [CC ...

  5. JS动画理论

    动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...

  6. css与 js动画 优缺点比较

    我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...

  7. [学习笔记]js动画实现方法,作用域,闭包

    一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...

  8. css3动画与js动画的一些理解

    http://zencode.in/19.CSS-vs-JS%E5%8A%A8%E7%94%BB%EF%BC%9A%E8%B0%81%E6%9B%B4%E5%BF%AB%EF%BC%9F.html 首 ...

  9. js动画(四)

    终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...

  10. css动画特效与js动画特效(一)------2017-03-24

    1.用css做动画效果: 放鼠标才会发生 利用hover <head> <style> #aa{ background-color: red; width: 100px; he ...

随机推荐

  1. ANativeWindow是个什么东西

    公司经常组织一些培训,培训的都是些奇技淫巧.什么设计模式啦,开发策略啦,git啦,repo啦,另外就是培训一些开发流程的东东,例如CMMI啦.可是,却忘记了,程序员终究要归结到三个问题上: 1.解决什 ...

  2. spring mvc 3.0 ModelAndView模型视图类

    见名知意,从名字上我们可以知道ModelAndView中的Model代表模型,View代表视图.即,这个类把要显示的数据存储到了Model属性中,要跳转的视图信息存储到了view属性.我们看一下Mod ...

  3. 【Oracle】ORA-00600: [kfgFinalize_2]

    环境: OS:OEL5.6 RAC:10.2.0.1.0 [root@rac2 ~]# crs_stat -t Name           Type           Target    Stat ...

  4. /proc/sys/vm/ 内存参数

    linux下proc里关于磁盘性能的参数 http://blog.csdn.net/eroswang/article/details/6126646  我们在磁盘写操作持续繁忙的服务器上曾经碰到一个特 ...

  5. [转]SQL快速入门

    原文出处:http://blog.csdn.net/xxd851116/article/details/5688263 一.基础 1.说明:创建数据库CREATE DATABASE database- ...

  6. 入门之--linux配置php

    [下载php源码]:从php的官方网站下载php的安装源码包. [解压安装包]:下载的安装包是经过压缩的gz格式,在linux可以使用自带的工具tar进行解压,在安装包所在目录执行命令:tar -zx ...

  7. 架构设计:负载均衡层设计方案(5)——LVS单节点安装

    1.概述 上篇文章<架构设计:负载均衡层设计方案(4)——LVS原理>(http://blog.csdn.net/yinwenjie/article/details/46845997),我 ...

  8. Java SE ---控制流程:break与continue语句

    在java中,可以使用break和continue语句控制循环.     1. break语句:用于终止循环,就是跳出当前循环,执行循环后面的代码. .     2. continue语句:用于跳出当 ...

  9. Windows XP与Windows 7系统常见漏洞

    1.Windows XP系统常见漏洞 Windows XP系统常见的漏洞有UPNP服务漏洞.升级程序漏洞.帮助和支持中心漏洞.压缩文件夹漏洞.服务拒绝漏洞.Windows Media Player漏洞 ...

  10. Excel两行交换及两列交换,快速互换相邻表格数据的方法

    经常使用办公软件的人可能有遇到过需要将Excel相邻两行数据相互交换的情况,需要怎么弄才最方便呢?您还是像大家通常所做的那样先在Excel文件相应位置插入一个新的空白行然后在复制粘贴数据然后删除原来那 ...