zoukankan      html  css  js  c++  java
  • 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"
      ]
    }
  • 相关阅读:
    html5 canvas头像裁剪上传
    仿qq空间相册的图片批量上传
    仿美图秀秀的自由拼图
    actionscript3头像裁剪上传
    让ie6 7 8 9支持html5 websocket
    美化图片滤镜
    仿优酷频道首页的图片切换效果
    html5版canvas自由拼图
    php简易灌水
    php图片防盗链的小测试
  • 原文地址:https://www.cnblogs.com/linn/p/3405875.html
Copyright © 2011-2022 走看看