单独获取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帧动画的更多相关文章

  1. cocos2dx 3.x(实现帧动画(人物动画,跑马灯效果)的几种方法)

    //创建一个跑酷的精灵
  auto sprite = Sprite::create("1.png");
 //设置精灵的坐标
 sprite->setPosition(Ve ...

  2. cocos2d 播放GIF动画类

    cocos2d 播放GIF动画类 以前项目中曾经用到过,后来因为GIF图像的质量较差,被弃用了,把公司名字去掉分享下,根据网上资料改编的cocos2d-iphone版的. // // CCSprite ...

  3. Cocos2d-x开发实例介绍帧动画使用

    下面我们通过一个实例介绍一下帧动画的使用,这个实例如下图所示,点击Go按钮开始播放动画,这时候播放按钮标题变为Stop,点击Stop按钮可以停止播放动画. 下面我们再看看具体的程序代码,首先看一下看H ...

  4. HTML5 Canvas动画效果演示

    HTML5 Canvas动画效果演示 主要思想: 首先要准备一张有连续帧的图片,然后利用HTML5 Canvas的draw方法在不同的时间 间隔绘制不同的帧,这样看起来就像动画在播放. 关键技术点: ...

  5. 使用javascript和css模拟帧动画的几种方法浅析

    我们平时在开发前端页面的时候,经常会播放一段帧序列.这段帧序列就像gif图片那样,反复循环播放.那大家可能会说,直接用gif图片就好了,干嘛还去模拟呢?那是因为要做得更加灵活,我们要做到以下几点: 1 ...

  6. 7款让人惊叹的HTML5粒子动画特效(转载)

    1.HTML5 Canvas粒子模拟效果 这是一款利用HTML5 Canvas模拟出来的30000个粒子动画,当你用鼠标在canvas画布上移动时,鼠标周围的一些粒子就会跟着你移动,并形成一定的图案, ...

  7. 7款让人惊叹的HTML5粒子动画特效

    HTML5的很大一个优势就是可以更加便捷高效地制作网页粒子动画特效,特别是Canvas特性,可以实现在网页上绘制任何图形和动画.本文要分享7款让人惊叹的HTML5粒子动画特效,这些粒子特效都提供源代码 ...

  8. Css3帧动画深入探寻,讲点项目中实际会碰到的问题

    先加个副标题XD --如何解决background-size为100%下处理@keyframes 正是在项目中遇到副标题,才引起我更深入的探寻 先略带一下基本的css3动画 css3的动画实现是通过属 ...

  9. cocos2dx帧动画

    //帧动画的创建 //方式一,通过多张图片来创建 auto sprite1 = Sprite::create("grossini_dance_05.png"); sprite1-& ...

  10. 10大炫酷的HTML5文字动画特效欣赏

    文字是网页中最基本的元素,在CSS2.0时代,我们只能在网页上展示静态的文字,只能改变他的大小和颜色,显得枯燥无味.随着HTML5的发展,现在网页中的文字样式变得越来越丰富了,甚至出现了文字动画,HT ...

随机推荐

  1. 【HEVC学习与研究】29、解码第一个Coding Quadtree结构(1)

    ctu tree属性 http://blog.csdn.net/shaqoneal/article/details/26088817

  2. Vim技能修炼教程(7) - 可视模式

    可视模式 可视模式是与正常模式.插入模式一起并列的模式.它的作用就像图形化编辑器下用鼠标来选择一个块. 在vim下,使用正常模式和ex命令,连搜带跳行的,未必就比用鼠标慢. 我们先做一个例子找找感觉, ...

  3. RMI垃圾收集简介

    和单机系统类似, 分布式系统也需要自动清除不再有客户端引用的对象(remote object). 远程对象的自动垃圾回收机制, 将程序员从深坑中解放出来, 不再需要人工跟踪client所引用的对象了. ...

  4. css 添加伪元素 消除浮动 对父元素高度产生的影响

  5. cms与blog汇总

    CMS ecms phpcms dedecms dilicms(CI框架) finecms Joomla dayucms DZ PHPwind Data地方门户网站 Blog wordpress ty ...

  6. HDU - 6513 Reverse It (SYSU校赛C题)(组合数学+容斥)

    题目链接 题意:给定一个n*m的矩阵,可以选择至多两个子矩阵将其反转,求能形成多少种不同的矩阵. 任选一个矩阵有$C_{n+1}^{2}C_{m+1}^{2}$种方法,任选两个不同的矩阵有$C_{C_ ...

  7. BZOJ4540 Hnoi2016 序列 【莫队+RMQ+单调栈预处理】*

    BZOJ4540 Hnoi2016 序列 Description 给定长度为n的序列:a1,a2,-,an,记为a[1:n].类似地,a[l:r](1≤l≤r≤N)是指序列:al,al+1,-,ar- ...

  8. python(七):元类与抽象基类

    一.实例创建 在创建实例时,调用__new__方法和__init__方法,这两个方法在没有定义时,是自动调用了object来实现的.python3默认创建的类是继承了object. class A(o ...

  9. idea Java spring 入门 demo

    根据这个 来实现 理解 https://www.cnblogs.com/xing901022/p/3963962.html 这里没有说如何导入包,现在我们用 idea 来实现 新建项目结构后 RUN ...

  10. 《DSP using MATLAB》示例 Example 9.4

    代码: %% ------------------------------------------------------------------------ %% Output Info about ...