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 ...
随机推荐
- Android程序员学WEB前端(2)-HTML(2)-锚点链接列表表单-Sublime
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76522417觉得博文有用,请点赞,请评论,请关注,谢谢!~锚点 链接 列表 表单 &l ...
- React-Native基础_2.样式Style
2.样式Style 基本使用 方式1 直接在View 上面写style 内容 <View style={{ backgroundColor: '#07811d', flex: 1 }}> ...
- xshell配置密码公钥登录
1:生成公钥 2:密钥类型选择为rsa,长度为2048,并点击下一步,如下所示: 这里的密码是给密钥设置了密码,那么在使用这个密钥时也要输入密码,也可以设置为空 3:保存密钥 (1):当你选择了输入密 ...
- 启动和连接MySQL服务
1.服务端启动 1.查看MySQL状态 sudo /etc/init.d/mysql status sudo /etc/init.d/mysql start | stop | restart sudo ...
- HDU - 6172:Array Challenge (BM线性递推)
题意:给出,三个函数,h,b,a,然后T次询问,每次给出n,求sqrt(an); 思路:不会推,但是感觉a应该是线性的,这个时候我们就可以用BM线性递推,自己求出前几项,然后放到模板里,就可以求了. ...
- windows上安装Gradle并配置环境变量
安装Gradle 下载Gradle,然后配置运行环境就可以了,有一点要注意的是gradle使用的是Groovy语言,而这个语言依赖于java,因此你必须安装配置java环境. 首先下载gradle,我 ...
- CentOS 7.4中firewall防火墙详解和配置以及切换为iptables防火墙
转载:https://blog.csdn.net/xlgen157387/article/details/52672988 一.firewall介绍 CentOS 7中防火墙是一个非常的强大的功能,在 ...
- 搭建Hadoop2.6.0+Eclipse开发调试环境(以及log4j.properties的配置)
上一篇在win7虚拟机下搭建了hadoop2.6.0伪分布式环境.为了开发调试方便,本文介绍在eclipse下搭建开发环境,连接和提交任务到hadoop集群. 1. 环境 Eclipse版本Luna ...
- 重温CLR（十五） 托管堆和垃圾回收
本章要讨论托管应用程序如何构造新对象,托管堆如何控制这些对象的生存期,以及如何回收这些对象的内存.简单地说,本章要解释clr中的垃圾回收期是如何工作的,还要解释相关的性能问题.另外,本章讨论了如何设计 ...
- 关于matlab中定点数overflow的处理办法
定点数overflow的处理有两种办法:1,saturate,也就是说如果超过定点的最大值就取最大值,例如最大值是6结果是8,那么就取6:2,wrap,就是循环,如下图所示