用仿ActionScript的语法来编写html5——第二篇，利用Sprite来实现动画

百变鹏仔 2个月前 (10-19) #H5教程

文章标签来实现

上一篇，我已经模仿as，加入了lbitmap和lbitmapdata类，并且用它们实现了静态图片的显示。
这次用sprite来动态显示图片。
依然遵循上一篇对显示对象的处理的思路，添加lsprite类，并追加show方法，如下：

function LSprite(){      var self = this;      self.type = "LSprite";      self.x = 0;      self.y = 0;      self.visible=true;      self.childList = new Array()  }  LSprite.prototype = {      show:function (cood){          if(cood==null)cood={x:0,y:0};          var self = this;          if(!self.visible)return;          LGlobal.show(self.childList,{x:self.x+cood.x,y:self.y+cood.y});      },      addChild:function (DisplayObject){          var self  = this;          self.childList.push(DisplayObject);      }  }

因为Sprite上可以有图片等其他的可显示对象，所以我在其构造函数里，添加了childList，用来保存它上面的所有对象。然后在调用它本身的show方法的时候，将其LGlobal循环现实其子对象。
这样一来，我们上一篇中显示图片的代码，也可以利用Sprite来显示了，代码如下：

function main(){      loader = new LLoader();      loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);      loader.load("1.png","bitmapData");  }  function loadBitmapdata(event){      var bitmapdata = new LBitmapData(loader.content);      var mapimg = new LBitmap(bitmapdata);            var backLayer = new LSprite();      addChild(backLayer);      backLayer.addChild(mapimg);  }

我们知道，actionscript中的Sprite可以添加EnterFrame事件，用来动态显示图片，我这里也来模仿一下，因为在LSprite类中show方法是不断循环的,所以，我只需要在show方法中不断调用一个方法，就能让其循环。
我假设有一个数组，里面存储了所有不断循环的所有方法，然后我就可以在show方法中循环这个数组，这样就达到了所有方法的循环，看下面

function LSprite(){      var self = this;      self.type = "LSprite";      self.x = 0;      self.y = 0;      self.visible=true;      self.childList = new Array()      self.frameList = new Array();  }  LSprite.prototype = {      show:function (cood){          if(cood==null)cood={x:0,y:0};          var self = this;          if(!self.visible)return;          LGlobal.show(self.childList,{x:self.x+cood.x,y:self.y+cood.y});          self.loopframe();      },      loopframe:function (){          var self = this;          var key;          for(key in self.frameList){              self.frameList[key]();          }      },      addChild:function (DisplayObject){          var self  = this;          self.childList.push(DisplayObject);      }  }

光假设当然是不行的，我们需要有添加这个循环事件的方法，所以我们还需要addEventListener方法，以及移除这个事件的removeEventListener方法

addEventListener:function (type,listener){          var self = this;          if(type == LEvent.ENTER_FRAME){              self.frameList.push(listener);          }      },      removeEventListener:function (type,listener){          var self = this;          var i,length = self.frameList.length;          for(i=0;i<length;i++){              if(type == LEvent.ENTER_FRAME){                  self.frameList.splice(i,1);                  break;              }          }      }

该添加的都添加了，接下来，就来简单实现一个人物的行走图
先来给BitmapData类添加几个方法，用来改变图片显示的区域位置等

立即学习“前端免费学习笔记（深入）”；

LBitmapData.prototype = {          setProperties:function (x,y,width,height){              var self = this;              self.x = x;              self.y = y;              self.width = width;              self.height = height;          },          setCoordinate:function (x,y){              var self = this;              self.x = x;              self.y = y;          }      }

好了，现在准备一张人物的行走图，这就让它动起来

var list = new Array();  var index = 0;  var mapimg;  var loader  var imageArray;  var animeIndex = 0;  var dirindex = 0;  var dirarr = new Array({x:0,y:1},{x:-1,y:0},{x:1,y:0},{x:0,y:-1});  function main(){      loader = new LLoader();      loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);      loader.load("1.png","bitmapData");  }  function loadBitmapdata(event){      var bitmapdata = new LBitmapData(loader.content,0,0,70,92);      imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,8,8);      mapimg = new LBitmap(bitmapdata);      mapimg.x = 100;      mapimg.bitmapData.setCoordinate(0,0);      index = 0;      var backLayer = new LSprite();      addChild(backLayer);      backLayer.addChild(mapimg);      backLayer.addEventListener(LEvent.ENTER_FRAME, onframe)  }      function onframe(){      index++;      if(index >= imageArray[0].length){          index = 0;      }      mapimg.bitmapData.setCoordinate(imageArray[dirindex][index].x,imageArray[dirindex][index].y);            mapimg.x += dirarr[dirindex].x*3;      mapimg.y += dirarr[dirindex].y*3;      if(animeIndex++ > 20){          dirindex++;          if(dirindex > 3)dirindex = 0;          animeIndex = 0;      }  }

文章推荐

用仿ActionScript的语法来编写html5——第二篇，利用Sprite来实现动画

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集