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

AS Code复制内容到剪贴板
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来显示了，代码如下：

JavaScript Code复制内容到剪贴板
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方法中循环这个数组，这样就达到了所有方法的循环，看下面

JavaScript Code复制内容到剪贴板
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方法
 
JavaScript Code复制内容到剪贴板
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类添加几个方法，用来改变图片显示的区域位置等

JavaScript Code复制内容到剪贴板
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;  
                }  
        }  
好了，现在准备一张人物的行走图，这就让它动起来
 
JavaScript Code复制内容到剪贴板
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;  
        }  


转载请注明：睿美印象网站建设工作室www.ruimeiyx.com