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

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

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;
    }
}      

原創文章請随便轉載。願和大家分享，并且一起進步。-- 江 coder