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()停止所有的动作。
本书交流讨论网站:http://www.cocoagame.net
更多精彩视频课程请关注智捷课堂Cocos课程:http://v.51work6.com
《Cocos2d-x实战 JS卷》现已上线,各大商店均已开售:
京东:http://item.jd.com/11659698.html
欢迎关注智捷iOS课堂微信公共平台,了解最新技术文章、图书、教程信息
Cocos2d-JS动画的更多相关文章
- 【06-23】js动画学习笔记01
<html> <head> <style> * { margin:0; padding:0; } #div1{ width:200px; height:200px; ...
- css动画与js动画的区别
CSS动画 优点: (1)浏览器可以对动画进行优化. 1. 浏览器使用与 requestAnimationFrame 类似的机制,requestAnimationFrame比起setTimeout ...
- CSS VS JS动画,哪个更快[译]
英文原文:https://davidwalsh.name/css-js-animation 原作者Julian Shapiro是Velocity.js的作者,Velocity.js是一个高效易用的js ...
- [cocos2d] 调用动画方法
利用texture atlases生成动画 中讲到如何添加动画,如果想要调用已添加的动画怎么办? 在1.0.1版本以前的cocos2d添加动画的方法为: CCAnimation *anim = [CC ...
- JS动画理论
动画(Animation) 动画意味着随着时间而变化,尤其指视觉上的变化,包括位置.形态等的变化.运动基本上表现为物体随时间,发生位置上的变化:形态基本表现为大小.颜色.透明度.形状等随时间的变化. ...
- css与 js动画 优缺点比较
我们经常面临一个抉择:到底使用JavaScript还是CSS动画,下面做一下对比 JS动画 缺点:(1)JavaScript在浏览器的主线程中运行,而主线程中还有其它需要运行的JavaScript脚本 ...
- [学习笔记]js动画实现方法,作用域,闭包
一,js动画基本都是依靠setInterval和setTimeout来实现 1,setInterval是间隔执行,过一段时间执行一次代码 setInterval(function(){},500);即 ...
- 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 首 ...
- js动画(四)
终于到了最后了,这里要告一段落了,整了个js运动框架,咳咳咳,好冷 啊啊啊啊啊啊,这天气.妈的,工资怎么也不发,啊,说好的 人与人之间的信任呢?哎,气诶,不到150字啊,又是这个梗..怎么办?说些什么 ...
- css动画特效与js动画特效(一)------2017-03-24
1.用css做动画效果: 放鼠标才会发生 利用hover <head> <style> #aa{ background-color: red; width: 100px; he ...
随机推荐
- Visual Studio原生开发的10个调试技巧(一)
最近碰巧读了Ivan Shcherbakov写的一篇文章,<11个强大的Visual Studio调试小技巧>.这篇文章只介绍了一些有关Visual Studio的基本调试技巧,但是还有其 ...
- CheckBoxList 只能选2个选项
// ////下面判断用户是否多选,每选择一次比较一次,看是否超过规定名额 //string ClickedItem = Request.Form["__EVENTTARGET"] ...
- iOS开发——数据持久化Swift篇&(四)CoreData
CoreData import CoreData class ViewController: UIViewController { override func viewDidLoad() { supe ...
- 利用yum工具安装应用程序
在安装gtk+编译环境的过程中,你会发现,RPM软件包之间的依赖关系非常复杂.在实际管理过程中,这种依赖关系可能会更加复杂.因此非常有必要寻找一种自动化安装工具,让安装工具自己处理这些关系复杂的依赖关 ...
- memmove和memcpy
1.memmove 函数原型:void *memmove(void *dest, const void *source, size_t count) 返回值说明:返回指向dest的void *指针 参 ...
- solr安全-tomcat
1.1. tomcat部署1 参考文档:solr安全机制 1.1.1. 加上安全机制的必要性 在前面有提到, Solr 本身是不加安全机制的, 所有的查詢.admin.update 這些指令都可以經由 ...
- Animation 动画详解(一)——alpha、scale、translate、rotate、set的xml属性及用法
一.概述 Android的animation由四种类型组成:alpha.scale.translate.rotate,对应android官方文档地址:<Animation Resources&g ...
- IOS webView快照
这个功能就是对网页的存储,存储成png格式的图片 且不失真 很棒的一个小方法.具体实现如下: - (void)webViewDidFinishLoad:(UIWebView *)webView1 { ...
- C#泛型(C#_编程指南)CSDN学习整理笔记
1.1. 泛型概述 2.0版C#语言和公共语言运行时(CLR)中增加了泛型.泛型将类型参数的概念引入.NETFramework,类型参数使得设计如下类和方法成为可能:这些类和方法将一个或多个类型的指定 ...
- Git 暂存区
可以用 git log 查看提交日志(附加的 --stat 参数可以看到每次提交的文件变更统计). $ cd /path/to/my/workspace/demo $ git log --stat 如 ...