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 ...
随机推荐
- Premake 生成 Makefile 的缺省配置
Premake 生成 Makefile 的缺省配置(金庆的专栏 2017.7)premake5.exe --os=linux gmake生成的 Makefile 中有个 config, 用 make ...
- NSPort
NSPort是一个描述通信通道的抽象类.通信发生在两个NSPort对象之中,这两个NSPort对象通常属于不同的进程或任务.分发对象系统使用NSPort对象来返回或发送NSProtMessage对象. ...
- Realm的常规使用与线程中的坑
结识 Realm 的催化剂 在我们公司的项目迭代中,由于在之前的聊天这个模块关于用户信息的传值有问题,而之前因为项目经过很多开发者的手,且不提整体的架构有多混乱,就单说缓存这块,就是乱的不行,有的地方 ...
- [IC]Lithograph(2)光刻技术的分辨率与分辨率增强技术
接上一篇介绍IC制造的基本过程,光刻的基本过程.这篇文章继续介绍光刻过程中的一些概念. 该系列文章的目录如下: [IC]Lithograph(0)半导体制造的基本过程 [IC]Lithograph(1 ...
- Ubuntu网络代理问题
问题描述 新开机的电脑,不开lantern就上不了网.很气. 解决过程 首先当然是寻求解决方案了.未果 然后就是妥协,每次先开一次lantern.(其实也不是很麻烦是吧,哎,是的是的) 今天早晨友人来 ...
- Vue之拦截与响应拦截
vue中有一个拦截方法,当我们发起请求或者请求回来的时候,我们需要做一定的数据过滤或者拦截 下面是在开发项目时进行的一个axios的请求封装: 拦截器:就是我们在请求之前进行的一个操作比如说,我们可以 ...
- 【Python爬虫学习笔记（1）】urllib2库相关知识点总结
1. urllib2的opener和handler概念 1.1 Openers: 当你获取一个URL你使用一个opener(一个urllib2.OpenerDirector的实例).正常情况下,我们使 ...
- 使用 MSBuild 响应文件 (rsp) 来指定 dotnet build 命令行编译时的大量参数
在为开源项目 easiwin/MSTestEnhancer 进行持续集成编译时,需要在编译命令中传入较多的参数.这对于新接手此项目的人来说,成本还是高了一点儿.本文将介绍 MSBuild 响应文件 ( ...
- 我常用的几个第三方 Python 库
转自:http://blog.csdn.net/gzlaiyonghao/article/details/2966811 wxPython 如果你之前是 windows 程序员,用 MFC 或者 WI ...
- 使用npm install报错- operation not permitted解决
原文:https://blog.csdn.net/weixin_41715295/article/details/79508104 这几天使用npm install时一直报错-4048 operati ...