Cocos2d-JS提供了很多特效,这些特效事实上属于间隔动作,特效类cc.GridAction类,也称为网格动作,它的类图如下图所示。

网格动作类图

网格动作
cc.GridAction它有两个主要的子类cc.Grid3DAction和cc.TiledGrid3DAction,cc.TiledGrid3DAction系列的子类中会有瓦片效果,如下图所示是Waves3D特效(cc.Grid3DAction子类),如后图所示是WavesTiles3D特效(cc.TiledGrid3DAction子类),比较这两个效果我们会看到瓦片效果的特别之处是界面被分割成多个方格。

Waves3D特效
WavesTiles3D特效

网格动作都是采用3D效果给用户的体验是非常震撼和绚丽,但是也给内存和CPU造成了巨大的压力和负担,如果不启用Open GL的深度缓冲,3D效果就会失真,但是启用的话对于显示性能会造成负面影响。
实例:特效演示
下面我们通过一个实例介绍几个特效的使用,这个实例如下图所示,上图是一个操作菜单场景,选择菜单可以进入到下图动作场景,在下图动作场景中点击Go按钮可以执行我们选择的特性动作,点击Back按钮可以返回到菜单场景。

特效实例

MyActionScene.js中的ctor构造函数代码如下:

  1. ctor: function (flagTag) {
  2. this._super();
  3. this.flagTag = flagTag;
  4. this.gridNodeTarget = cc.NodeGrid.create();                              ①
  5. this.addChild(this.gridNodeTarget);
  6. cc.log("MyActionLayer init flagTag " + this.flagTag);
  7. var size = cc.director.getWinSize();
  8. var bg = new cc.Sprite(res.Background_png);
  9. bg.x = size.width / 2;
  10. bg.y = size.height / 2;
  11. this.gridNodeTarget.addChild(bg);
  12. var sprite = new cc.Sprite(res.hero_png);
  13. sprite.x = size.width / 2;
  14. sprite.y = size.height / 2;
  15. this.gridNodeTarget.addChild(sprite, 1, SP_TAG);
  16. var backMenuItem = new cc.MenuItemImage(res.Back_up_png, res.Back_down_png,
  17. function () {
  18. cc.director.popScene();
  19. }, this);
  20. backMenuItem.x = 140;
  21. backMenuItem.y = size.height - 65;
  22. var goMenuItem = new cc.MenuItemImage(res.Go_up_png, res.Go_down_png,
  23. this.onMenuCallback, this);
  24. goMenuItem.x = 820;
  25. goMenuItem.y = size.height - 540;
  26. var mn = new cc.Menu(backMenuItem, goMenuItem);
  27. this.gridNodeTarget.addChild(mn, 1);
  28. mn.x = 0;
  29. mn.y = 0;
  30. mn.anchorX = 0.5;
  31. mn.anchorY = 0.5;
  32. return true;
  33. }

上述代码第①行是创建NodeGrid类型成员变量gridNodeTarget,NodeGrid是网格动作管理类。MyActionScene.js中的onMenuCallback函数代码如下:

  1. onMenuCallback: function (sender) {
  2. cc.log("Tag = " + this.flagTag);
  3. var size = cc.director.getWinSize();
  4. switch (this.flagTag) {
  5. case ActionTypes.kFlipX3D:
  6. this.gridNodeTarget.runAction(cc.flipX3D(3.0));                  ①
  7. break;
  8. case ActionTypes.kPageTurn3D:
  9. this.gridNodeTarget.runAction(cc.pageTurn3D(3.0, cc.size(15, 10)));      ②
  10. break;
  11. case ActionTypes.kLens3D:
  12. this.gridNodeTarget.runAction(cc.lens3D(3.0, cc.size(15, 10),
  13. cc.p(size.width / 2, size.height / 2), 240));       ③
  14. break;
  15. case ActionTypes.kShaky3D:
  16. this.gridNodeTarget.runAction(cc.shaky3D(3.0, cc.size(15, 10), 5, false));   ④
  17. break;
  18. case ActionTypes.kWaves3D:
  19. this.gridNodeTarget.runAction(cc.waves3D(3.0, cc.size(15, 10), 5, 40));  ⑤
  20. break;
  21. case ActionTypes.kJumpTiles3D:
  22. this.gridNodeTarget.runAction(cc.jumpTiles3D(3.0, cc.size(15, 10), 2, 30));  ⑥
  23. break;
  24. case ActionTypes.kShakyTiles3D:
  25. this.gridNodeTarget.runAction(cc.shakyTiles3D(3.0, cc.size(16, 12), 5, false));⑦
  26. break;
  27. case ActionTypes.kWavesTiles3D:
  28. this.gridNodeTarget.runAction(cc.wavesTiles3D(3.0, cc.size(15, 10), 4, 120));    ⑧
  29. break;
  30. }
  31. }

上述代码onMenuCallback函数中是运行特效动作,第①行是使用FlipX3D实现X轴3D翻转特效,cc.flipX3D函数的参数是持续时间。
第②行是使用PageTurn3D实现翻页特效特效,cc.pageTurn3D函数的第一个参数是持续时间,第二个参数是网格的大小。
第③行是使用Lens3D实现凸透镜特效,cc.lens3D函数第一个参数是持续时间,第二个参数是网格大小,第三个参数网透镜中心点,第四个参数是透镜半径。
第④行是使用Shaky3D实现晃动特效,cc.shaky3D函数第一个参数是持续时间,第二个参数是网格的大小,第三个参数晃动的范围,第四个参数是否伴有Z轴晃动。
第⑤行是使用Waves3D实现3D波动特效,cc.waves3D函数第一个参数是持续时间,第二个参数是网格的大小,第三个参数波动次数,第四个参数是振幅。
第⑥行是使用JumpTiles3D实现晃动特效,3D瓦片跳动特效,cc.jumpTiles3D函数第一个参数是持续时间,第二个参数是网格的大小,第三个参数跳动次数,第四个参数是跳动幅度。
第⑦行是使用ShakyTiles3D实现3D瓦片晃动特效,cc.shakyTiles3D函数第一个参数是持续时间,第二个参数是网格的大小,第三个参数晃动的范围,第四个参数是否伴有Z轴晃动。

第⑧行是使用WavesTiles3D实现3D瓦片波动特效,cc.wavesTiles3D函数第一个参数是持续时间,第二个参数是网格的大小,第三个参数动次数,第四个参数是振幅。

更多内容请关注最新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. cocos2d js ClippingNode 制作标题闪亮特效

    1.效果图: 之前在<Android 高仿 IOS7 IPhone 解锁 Slide To Unlock>中制作了文字上闪亮移动的效果,这次我们来看下怎样在cocos2d js 中做出类似 ...

  2. 滚动变色的文字js特效

    Js实现滚动变色的文字效果,在效果展示页面,可看到文字在交替变色显示,以吸引人的注意,效果真心不错哦,把代码拷贝到你的网站后,修改成想要的文字就OK了. 查看效果:http://keleyi.com/ ...

  3. 150个JS特效脚本

    收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...

  4. <一>初探js特效魅力之全选不选反选04

    初探js特效魅力04 我们在进入到公司里面工作的时候,做一个同一个项目,经常是大家分工合作,当我们写css时,一般不写在行间,因为这样会被误操作,也就是被乱删了都不知道,这样的后果是很难检查的 ,因为 ...

  5. <一>初探js特效魅力之选项卡05

    初探js特效魅力05 接下来为大家介绍的选项卡的切换 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...

  6. 带左右箭头切换的自动滚动图片JS特效

    效果图 按钮 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  7. 鼠标经过显示二级菜单的js特效

    本文章来给大家推荐一个不错的鼠标经过显示二级菜单js特效效果,有需要了解的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...

  8. cocos2d js jsb XMLHttpRequest 中文乱码

    1.首先讲下怎样使用XMLHttpRequest 下面所说的是在cocos2d-x 2.2.2 或者 2.3 版本号中. 首先要明确cocos2d js事实上分两个版本号,一个是html5的版本号,另 ...

  9. cocos2d js的一些tip

    cocos2d-js-v3.2-rc0 cc.director.end();//退出app cc.Application.getInstance().openURL("http://www. ...

  10. 又到圣诞节,让你的网页下起雪(js特效)

    又到圣诞节,让你的网页下起雪(js特效) 在4年多前,我写过一个特效,就是让你的网页下起雨,它的效果就是在你打开的网站,雨点下满你的屏幕,恩,大概效果如下图: 当然这个效果还有一些附带项,比如风速.风 ...

随机推荐

  1. c#winform使用WebBrowser 大全[超长文转载]

    1.主要用途:使用户可以在窗体中导航网页. 2.注意:WebBrowser 控件会占用大量资源.使用完该控件后一定要调用 Dispose 方法,以便确保及时释放所有资源.必须在附加事件的同一线程上调用 ...

  2. 比较长的sql语句

    SELECT o. * FROM hq_goods g LEFT JOIN hq_orders o ON o.goods_id = g.id WHERE o.user_id =73 AND o.sta ...

  3. 通过输入方式在Android上进行微博OAuth登录

    在微博认证方式里,基本的OAuth认证是必须要调整到跳转到第三方页面上进行授权的,例如下面的例子:     1.从http://open.weibo.com/wiki/index.php/SDK#An ...

  4. vs2012运行c语言出现:无法查找或打开 PDB 文件

    1.点 调试2.然后 选项和设置3.右边勾上 启用源服务器支持4.左边点 符号5.把微软符号服务器勾6.运行的时候等一下 莫慌!!7.问题解决

  5. 大一C语言结课设计之《学生信息管理系统》

    第一次写这么长的程序,代码仅供參考,有问题请留言. /* ** 学生信息管理系统 ** IDE:Dev-Cpp 4.9.9.2 ** 2014-6-15 */ #include <stdio.h ...

  6. MySQL高可用之MHA的搭建 转

     http://www.cnblogs.com/muhu/p/4045780.html http://www.cnblogs.com/gomysql/p/3675429.html http://www ...

  7. Linux 混杂设备、外部中断和输入子系统

    混杂设备也是一种字符设备,主设备号固定为10.相对于普通字符设备驱动,它不需要自己去生成设备文件. 1.声明使用的头文件 #include <linux/miscdevice.h> 2.定 ...

  8. 在加载模块时出现cannot insert '*.ko': Device or resource busy错误

    制作了一个模块,在加载是出现了cannot insert '*.ko': Device or resource busy错误. 原因: 是由于模块使用的是静态分配设备号,而这个设备号已经被系统中的其他 ...

  9. 图解java8 stream 的几个转换方法

    图片摘自:http://ifeve.com/stream/ 1.distinct 对于stream中包含的元素进行去重复操作(去重复依赖元素的equals方法) 2.filter 对于stream中包 ...

  10. 《MFC游戏开发》笔记五 定时器和简单动画

    本系列文章由七十一雾央编写,转载请注明出处. http://blog.csdn.net/u011371356/article/details/9332377 作者:七十一雾央 新浪微博:http:// ...