Cocos2d-html5帧动画
2023-09-27 14:29:13 时间
单独获取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" ] }
相关文章
- CSS动画实例：旋转的圆角正方形
- Css3 - 动画旋转
- XamarinAndroid组件教程设置自定义子元素动画(二)
- 款炫酷实用的HTML5带发光动画
- 添加购物车动画
- 《HTML5+JavaScript动画基础》——第1章 动画的基本概念 1.1动画
- 《HTML5+JavaScript动画基础》——1.3 动态动画与静态动画
- 《HTML5+JavaScript动画基础》——2.6 小结
- SwiftUI 界面大全之文本折叠书签动画组件3D（中文教程含源码）
- HTML5 3D 粒子波浪动画特效DEMO演示
- SwiftUI 文本组件之滚动动画数字组件 实现充满情感的微交互
- HTML5 Canvas爱心表白动画特效
- Flutter Hero 实现共享元素转场动画
- 建筑 物件 开心背单词 读句子,单词,字母,看图例, 翻译,看动画
- 10款jQuery/CSS3动画应用 超有用
- 【历史上的今天】3 月 29 日：“机器人三定律”问世；电脑动画首次获得奥斯卡；Caldera Linux 沉浮史
- IOS学习资源收集--关于动画的代码学习资源总汇（很棒的动画效果哦）
- 《慕客网：IOS动画案例之会跳动的登入界面（上）》学习笔记 －Sketch的使用
- 《慕客网：IOS－动画入门》学习笔记
- 网站建设中前端常用的jQuery+easing缓动的动画