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 ...
随机推荐
- JAVA交换两个变量的值-（不使用第三变量）
以下方法的根本原理就是: 借助第三个变量 c = a; a = b; b = c; 运算符-不借助第三变量: a = a+b; b = a-b; a = a-b; 为运算符-不借助第三个变量: (此种 ...
- Kotlin Reference (八) Classes and Objects
most from reference 类 Kotlin的类的声明使用关键字class class Invoice { } 类声明由类名.类头(指定其类型参数,构造函数等)和类体组成,由大括号括起来. ...
- key相同合并Map
public class Demo11 { public static void main(String[] args) { ConcurrentHashMap<Integer, Map< ...
- windows cmd 命令行 —— 进程与服务
1. 进程查看与操作 tasklist tskill pid 2. 服务查看与操作 net start net stop
- 博通BCM53101M以太网交换芯片原理解析
Quality of Service 服务质量 BCM53101M的QoS为每个端口提供6个内部队列以支持6种不同的流量类别(traffic class, TC).在流量拥塞的情况下,可通过拥塞管理, ...
- Cannot setup mail box on Android
Error: “You don’t have permission to sync with this server” Solution: “You have 10 phone partnershi ...
- PHP中echo(),print(),print_r()之间的区别？
echo是PHP语句, print和print_r是函数,语句没有返回值,函数可以有返回值(即便没有用) print只能打印出简单类型变量的值(如int,string) print_r可以打印出复杂类 ...
- IOI2002 POJ1054 The Troublesome Frog 讨厌的青蛙 （离散化+剪枝）
Description In Korea, the naughtiness of the cheonggaeguri, a small frog, is legendary. This is a we ...
- 如何用OpenCV跟踪鼠标操作
转载:如何用OpenCV跟踪鼠标操作 http://blog.skyoung.org/2014/05/01/how-to-track-mouse/ 在视频第一帧手动标记出目标的位置是在线视觉跟踪中最基 ...
- Navicat工具导出mySQL数据库某个视图结构的.sql脚本
用Navicat工具怎么都导不出来mySQL数据库的某个视图.sql脚本,即使导出来也只是包含视图记录,不包含视图结构.经过一番研究,终于克服,操作如下: 1.在某个数据库中,新建备份,如下图 2.选 ...