Cocos2d-html5帧动画
单独获取plist里面一个文件：
cc.SpriteFrameCache.getInstance().addSpriteFrames(s_test_plist);
var spriteTest2 = cc.Sprite.createWithSpriteFrameName("image 69.png");
spriteTest2.setPosition(cc.p(100,100));
this.addChild(spriteTest2,0,4);
动画：
//动画帧
var spriteFrameCache = cc.SpriteFrameCache.getInstance();
var frameCache = spriteFrameCache.addSpriteFrames(s_plist, s_plist_png); //第一个参数plist文件，第二个参数plist对应的png图片
var animFrames = []; // 将所有帧存入一个数组
for (var i=46;i<=73;i++) {
//采用循环添加动画的每一帧
var str = "image " + i + ".png";
var frame =spriteFrameCache.getSpriteFrame("image " + i + ".png");
if (frame) {
cc.log(str);
animFrames.push(frame);
}
}
// 创建动画，设置播放间隔
var animation = cc.Animation.create(animFrames, 0.1);
// animation.setDelayPerUnit(0.1);
//设置动画播放完成是否保持在第一帧，true为保持在第一帧，false为保持在最后一帧
//animation.setRestoreOriginalFrame(false);
// 单独显示一个动画
var sprite4 = cc.Sprite.createWithSpriteFrame(spriteFrameCache.getSpriteFrame("image 47.png"));//plist里面对于的图片名称
sprite4.setPosition(cc.p(100,100));
this.addChild(sprite4); sprite4.runAction(cc.RepeatForever.create(cc.Animate.create(animation)));
合并后的png和plist
{
"armature_data": [
{
"strVersion": "1.0.2.0",
"version": 1.02,
"name": "NewProject2",
"bone_data": [
{
"name": "Layer1",
"parent": "",
"x": 1.0,
"y": 0.0,
"z": 1,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0,
"arrow_x": 0.0,
"arrow_y": 0.0,
"effectbyskeleton": false,
"display_data": [
{
"name": "image 47.png",
"displayType": 0,
"skin_data": [
{
"x": 0.0,
"y": 0.0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0
}
]
},
{
"name": "image 49.png",
"displayType": 0,
"skin_data": [
{
"x": 0.0,
"y": 0.0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0
}
]
},
{
"name": "image 51.png",
"displayType": 0,
"skin_data": [
{
"x": 0.0,
"y": 0.0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0
}
]
},
{
"name": "image 53.png",
"displayType": 0,
"skin_data": [
{
"x": 0.0,
"y": 0.0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0
}
]
},
{
"name": "image 55.png",
"displayType": 0,
"skin_data": [
{
"x": 0.0,
"y": 0.0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0
}
]
},
{
"name": "image 57.png",
"displayType": 0,
"skin_data": [
{
"x": 0.0,
"y": 0.0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0
}
]
},
{
"name": "image 59.png",
"displayType": 0,
"skin_data": [
{
"x": 0.0,
"y": 0.0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0
}
]
},
{
"name": "image 61.png",
"displayType": 0,
"skin_data": [
{
"x": 0.0,
"y": 0.0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0
}
]
},
{
"name": "image 63.png",
"displayType": 0,
"skin_data": [
{
"x": 0.0,
"y": 0.0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0
}
]
},
{
"name": "image 65.png",
"displayType": 0,
"skin_data": [
{
"x": 0.0,
"y": 0.0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0
}
]
},
{
"name": "image 67.png",
"displayType": 0,
"skin_data": [
{
"x": 0.0,
"y": 0.0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0
}
]
},
{
"name": "image 69.png",
"displayType": 0,
"skin_data": [
{
"x": 0.0,
"y": 0.0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0
}
]
},
{
"name": "image 71.png",
"displayType": 0,
"skin_data": [
{
"x": 0.0,
"y": 0.0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0
}
]
},
{
"name": "image 73.png",
"displayType": 0,
"skin_data": [
{
"x": 0.0,
"y": 0.0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0
}
]
}
]
}
]
}
],
"animation_data": [
{
"name": "NewProject2",
"mov_data": [
{
"name": "Animation3",
"dr": 85,
"lp": false,
"to": 0,
"drTW": 0,
"twE": 0,
"sc": 1.0,
"mov_bone_data": [
{
"name": "Layer1",
"dl": 0.0,
"frame_data": [
{
"dI": 0,
"x": 0.0,
"y": 0.0,
"z": 0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0,
"fi": 0,
"twE": 0,
"tweenFrame": true
},
{
"dI": 1,
"x": 0.0,
"y": 0.0,
"z": 0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0,
"fi": 5,
"twE": 0,
"tweenFrame": true
},
{
"dI": 2,
"x": 0.0,
"y": 0.0,
"z": 0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0,
"fi": 10,
"twE": 0,
"tweenFrame": true
},
{
"dI": 3,
"x": 0.0,
"y": 0.0,
"z": 0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0,
"fi": 15,
"twE": 0,
"tweenFrame": true
},
{
"dI": 0,
"x": 0.0,
"y": 0.0,
"z": 0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0,
"fi": 20,
"twE": 0,
"tweenFrame": true
},
{
"dI": 1,
"x": 0.0,
"y": 0.0,
"z": 0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0,
"fi": 25,
"twE": 0,
"tweenFrame": true
},
{
"dI": 2,
"x": 0.0,
"y": 0.0,
"z": 0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0,
"fi": 30,
"twE": 0,
"tweenFrame": true
},
{
"dI": 3,
"x": 0.0,
"y": 0.0,
"z": 0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0,
"fi": 35,
"twE": 0,
"tweenFrame": true
},
{
"dI": 4,
"x": 0.0,
"y": 0.0,
"z": 0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0,
"fi": 40,
"twE": 0,
"tweenFrame": true
},
{
"dI": 5,
"x": 0.0,
"y": 0.0,
"z": 0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0,
"fi": 45,
"twE": 0,
"tweenFrame": true
},
{
"dI": 6,
"x": 0.0,
"y": 0.0,
"z": 0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0,
"fi": 50,
"twE": 0,
"tweenFrame": true
},
{
"dI": 7,
"x": 0.0,
"y": 0.0,
"z": 0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0,
"fi": 55,
"twE": 0,
"tweenFrame": true
},
{
"dI": 8,
"x": 0.0,
"y": 0.0,
"z": 0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0,
"fi": 60,
"twE": 0,
"tweenFrame": true
},
{
"dI": 9,
"x": 0.0,
"y": 0.0,
"z": 0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0,
"fi": 65,
"twE": 0,
"tweenFrame": true
},
{
"dI": 10,
"x": 0.0,
"y": 0.0,
"z": 0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0,
"fi": 70,
"twE": 0,
"tweenFrame": true
},
{
"dI": 11,
"x": 0.0,
"y": 0.0,
"z": 0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0,
"fi": 75,
"twE": 0,
"tweenFrame": true
},
{
"dI": 12,
"x": 0.0,
"y": 0.0,
"z": 0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0,
"fi": 80,
"twE": 0,
"tweenFrame": true
},
{
"dI": 13,
"x": 0.0,
"y": 0.0,
"z": 0,
"cX": 1.0,
"cY": 1.0,
"kX": 0.0,
"kY": 0.0,
"fi": 85,
"twE": 0,
"tweenFrame": true
}
]
}
]
}
]
}
],
"texture_data": [
{
"name": "image 47",
"width": 50.0,
"height": 50.0,
"pX": 0.5,
"pY": 0.5,
"plistFile": ""
},
{
"name": "image 49",
"width": 0.0,
"height": 0.0,
"pX": 0.5,
"pY": 0.5,
"plistFile": ""
},
{
"name": "image 51",
"width": 0.0,
"height": 0.0,
"pX": 0.5,
"pY": 0.5,
"plistFile": ""
},
{
"name": "image 53",
"width": 0.0,
"height": 0.0,
"pX": 0.5,
"pY": 0.5,
"plistFile": ""
},
{
"name": "image 55",
"width": 0.0,
"height": 0.0,
"pX": 0.5,
"pY": 0.5,
"plistFile": ""
},
{
"name": "image 57",
"width": 0.0,
"height": 0.0,
"pX": 0.5,
"pY": 0.5,
"plistFile": ""
},
{
"name": "image 59",
"width": 0.0,
"height": 0.0,
"pX": 0.5,
"pY": 0.5,
"plistFile": ""
},
{
"name": "image 61",
"width": 0.0,
"height": 0.0,
"pX": 0.5,
"pY": 0.5,
"plistFile": ""
},
{
"name": "image 63",
"width": 0.0,
"height": 0.0,
"pX": 0.5,
"pY": 0.5,
"plistFile": ""
},
{
"name": "image 65",
"width": 0.0,
"height": 0.0,
"pX": 0.5,
"pY": 0.5,
"plistFile": ""
},
{
"name": "image 67",
"width": 0.0,
"height": 0.0,
"pX": 0.5,
"pY": 0.5,
"plistFile": ""
},
{
"name": "image 69",
"width": 0.0,
"height": 0.0,
"pX": 0.5,
"pY": 0.5,
"plistFile": ""
},
{
"name": "image 71",
"width": 0.0,
"height": 0.0,
"pX": 0.5,
"pY": 0.5,
"plistFile": ""
},
{
"name": "image 73",
"width": 0.0,
"height": 0.0,
"pX": 0.5,
"pY": 0.5,
"plistFile": ""
}
],
"config_file_path": [
"NewProject20.plist"
]
}
Cocos2d-html5帧动画的更多相关文章
- cocos2dx 3.x(实现帧动画(人物动画,跑马灯效果)的几种方法)
//创建一个跑酷的精灵 auto sprite = Sprite::create("1.png"); //设置精灵的坐标 sprite->setPosition(Ve ...
- cocos2d 播放GIF动画类
cocos2d 播放GIF动画类 以前项目中曾经用到过,后来因为GIF图像的质量较差,被弃用了,把公司名字去掉分享下,根据网上资料改编的cocos2d-iphone版的. // // CCSprite ...
- Cocos2d-x开发实例介绍帧动画使用
下面我们通过一个实例介绍一下帧动画的使用,这个实例如下图所示,点击Go按钮开始播放动画,这时候播放按钮标题变为Stop,点击Stop按钮可以停止播放动画. 下面我们再看看具体的程序代码,首先看一下看H ...
- HTML5 Canvas动画效果演示
HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...
- 使用javascript和css模拟帧动画的几种方法浅析
我们平时在开发前端页面的时候,经常会播放一段帧序列.这段帧序列就像gif图片那样,反复循环播放.那大家可能会说,直接用gif图片就好了,干嘛还去模拟呢?那是因为要做得更加灵活,我们要做到以下几点: 1 ...
- 7款让人惊叹的HTML5粒子动画特效(转载)
1.HTML5 Canvas粒子模拟效果 这是一款利用HTML5 Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案, ...
- 7款让人惊叹的HTML5粒子动画特效
HTML5的很大一个优势就是可以更加便捷高效地制作网页粒子动画特效,特别是Canvas特性,可以实现在网页上绘制任何图形和动画.本文要分享7款让人惊叹的HTML5粒子动画特效,这些粒子特效都提供源代码 ...
- Css3帧动画深入探寻，讲点项目中实际会碰到的问题
先加个副标题XD --如何解决background-size为100%下处理@keyframes 正是在项目中遇到副标题,才引起我更深入的探寻 先略带一下基本的css3动画 css3的动画实现是通过属 ...
- cocos2dx帧动画
//帧动画的创建 //方式一,通过多张图片来创建 auto sprite1 = Sprite::create("grossini_dance_05.png"); sprite1-& ...
- 10大炫酷的HTML5文字动画特效欣赏
文字是网页中最基本的元素,在CSS2.0时代,我们只能在网页上展示静态的文字,只能改变他的大小和颜色,显得枯燥无味.随着HTML5的发展,现在网页中的文字样式变得越来越丰富了,甚至出现了文字动画,HT ...
随机推荐
- pcm ulaw alaw转换
static byte ALawCompressTable[] = { 1, 1, 2, 2, 3, 3, 3, 3, 4, 4, 4, 4, 4, 4, 4, 4, 5, 5, 5, 5, 5, 5 ...
- RTP协议学习
RTP协议是承载在UDP协议之上的应用协议 http://blog.csdn.net/chen495810242/article/details/39207305 http://blog.51cto. ...
- 如何从github下载项目的源代码，包含git客户端，直接下载，vs下载
有好多小伙伴可能刚刚接触github,还不知道如果和github下载项目,此处写个博客统一的声明.从多种方式下载源代码,加深对git的理解. 首先先解释下git的含义,git是一个源代码的管理工具,通 ...
- UNIX环境高级编程 文件I/O
大多数文件I/O 只需要用到 5个函数 : open , read , write , lseek , close 本章描述的都是不带缓冲的I/O(read write 都调用内核中的一个系统调 ...
- socket创建TCP服务端和客户端
看情况选择相对应的套接字*面向连接的传输--tcp协议--可靠的--流式套接字(SOCK_STREAM)*面向无连接的传输--udp协议--不可靠的--数据报套接字(SOCK_DGRAM) 在liun ...
- HDU2473 Junk-Mail Filter 【可删除的并查集】
HDU2473 Junk-Mail Filter Problem Description Recognizing junk mails is a tough task. The method used ...
- IOS Number 处理（int-->NSNumber,NSNumber-->nsinteger,string -->double,CGFloat --> dobule）
1 小结: 1)int-->NSNumber:numberWithInt 2)NSNumber-->nsinteger:integerValue 3)string -->double ...
- kong nginx 配置文件说明&&借鉴
备注: 只是简单的进行说明配置文件,不会牵扯到源码 1. 配置文件位置 // 通过ps 查找 ps -ef |grep nginx /usr/local/openresty/nginx/ ...
- 【Oracle】OGG单向复制配置
实验环境: 源端: Ip:192.168.40.10 DataBase:Oracle 11.2.0.1.0 ORCL OS:OEL5.6 OGG:fbo_ggs_Linux_x86_ora11g_32 ...
- FastAdmin 开发时出错的调试
第一步:打开 FastAdmin Debug 打开 Debug. 第二步:打开浏览器控制器 打开浏览器控制器,并按 F5 重新加载页面. 第三步:在 network 查看详细错误信息 点击红色链接,可 ...