用仿ActionScript的文法來編寫html5——第二篇，利用Sprite來實現動畫

標籤：blog   rip   個人   調用   動態顯示   object   ade   sprite   ons   

上一篇，我已經模仿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 loadervar 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;    }}

效果看下面的url,看不到效果的請下載支援html5的瀏覽器
http://fsanguo.comoj.com/html5/jstoas01/index.html
源碼的話，直接用瀏覽器就可以查看了，地球人都知道


下一篇，該研究滑鼠事件了

用仿ActionScript的文法來編寫html5——第二篇，利用Sprite來實現動畫