Verwenden Sie eine ActionScript-ähnliche Syntax, um HTML5 zu schreiben – Teil 2, und verwenden Sie Sprite, um Animationen zu implementieren-H5-Tutorial-php.cn

Verwenden Sie eine ActionScript-ähnliche Syntax, um HTML5 zu schreiben – Teil 2, und verwenden Sie Sprite, um Animationen zu implementieren

黄舟

Freigeben： 2017-01-17 16:32:55

Original

1230 Leute haben es durchsucht

Im vorherigen Artikel habe ich es nachgeahmt, die Klassen LBitmap und LBitmapData hinzugefügt und sie zum Anzeigen statischer Bilder verwendet.
Dieses Mal wird Sprite verwendet, um Bilder dynamisch anzuzeigen.
Folgen Sie immer noch der Idee der Verarbeitung von Anzeigeobjekten im vorherigen Artikel und fügen Sie die LSprite-Klasse und die Show-Methode wie folgt hinzu:

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

Nach dem Login kopieren

Da Sprite Bilder und andere anzeigbare Objekte haben kann, Deshalb habe ich childList in seinem Konstruktor hinzugefügt, um alle darauf befindlichen Objekte zu speichern. Wenn Sie dann Ihre eigene Show-Methode aufrufen, führen Sie eine Schleife ihres LGlobal durch, um ihre Unterobjekte anzuzeigen.
Auf diese Weise kann der Code zum Anzeigen von Bildern in unserem vorherigen Artikel auch mit Sprite angezeigt werden. Der Code lautet wie folgt:

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

Nach dem Login kopieren

Wir wissen, dass Sprite in Actionscript das EnterFrame-Ereignis hinzufügen kann. Verwenden Um Bilder dynamisch anzuzeigen, werde ich es hier nachahmen, da die Show-Methode in der LSprite-Klasse eine ständige Schleife durchführt, sodass ich nur eine Methode in der Show-Methode kontinuierlich aufrufen muss, um eine Schleife zu erzeugen.
Ich gehe davon aus, dass es ein Array gibt, das alle Methoden speichert, die eine kontinuierliche Schleife ausführen, und dann kann ich dieses Array in der Show-Methode schleifen und so die Schleife aller Methoden erreichen, siehe unten

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

Nach dem Login kopieren

Von Natürlich reicht es nicht aus, nur anzunehmen, dass wir eine Methode haben, um dieses zyklische Ereignis hinzuzufügen, also brauchen wir auch die Methode addEventListener und die Methode removeEventListener, um dieses Ereignis zu entfernen

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

Nach dem Login kopieren

Alles, was hinzugefügt werden soll wurde hinzugefügt, fahren Sie fort. Als Nächstes implementieren wir einfach ein Laufdiagramm eines Zeichens
Fügen Sie zunächst einige Methoden zur BitmapData-Klasse hinzu, um die Position des im Bild angezeigten Bereichs usw. zu ändern.

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

Nach dem Login kopieren

Okay, bereiten Sie jetzt ein Wanderdiagramm für einen Charakter vor und lassen Sie es sich bewegen

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

Nach dem Login kopieren

Das Obige besteht darin, eine ActionScript-ähnliche Syntax zum Schreiben von HTML5 zu verwenden. Der zweite Teil besteht darin, Sprite zum Realisieren von Animationsinhalten zu verwenden. Bitte achten Sie darauf zu PHP für weitere verwandte Inhalte auf der chinesischen Website (m.sbmmt.com)!