上一篇，我已經模仿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實現動畫的內容，更多相關內容請關注PHP中文網（m.sbmmt.com）！
