&nbs p;
上一篇，我已经模仿as，加入了LB IT map和LBitmapData类，并且用它们实现了静态图片的显示。
这次用 sprite 来动态显示图片。
依然遵循上一篇对显示对象的处理的思路，添加LS PR ite类，并追加show方法，如下：
function LSprite(){
VAR self = this ;
self.ty PE = "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 (Dis play Object){
var self = this;
self.childList.push(DisplayObject);
}
}
因为Sprite上可以有图片等其他的可显示对象，所以我在其构造函数里，添加了childList，用来保存它上面的所有对象。然后在调用它本身的show方法的时候，将其LGlobal循环现实其子对象。
这样一来，我们上一篇中显示图片的代码，也可以 利用 Sprite来显示了，代码如下：
function m ai n(){
loader = new LLoader();
loader.addEventListener(LEvent. complete ,loadBitmapdata);
loader.load("1.png","bitmapData");
}
function loadBitmapdata(event){
var bitmapdata = new LBitmapData(loader.content);
var map img = new LBitmap(bitmapdata);
var backLayer = new LSprite();
addChild(backLayer);
backLayer.addChild(mapimg);
}
我们 知道 ，actionscript中的Sprite可以添加EnterFr am e事件，用来动态显示图片，我这里也来模仿一下，因为在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);
br eak;
}
}
}
该添加的都添加了，接下来，就来 简单 实现一个 人物 的行走图
先来给BitmapData类添加几个方法，用来 改变 图片显示的区域位置等
LBitmapData.prototype = {
set Prop erties:function (x,y,width,h ei ght){
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 .COM PLETE,loadBitmapdata);
loader.load("1.png","bitmapData");
}
function loadBitmapdata(event){
var bitmapdata = new LBitmapData(loader.content,0,0,70,92);
imageArray = LGlobal.pideCoordinate(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 的浏览器
https://fsanguo.comoj.com/ht ML 5/jstoas01/index.html
源 码的话，直接用浏览器就可以查看了，地球人都知道
摘自 lufy小屋
上一篇，我已经模仿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.pideCoordinate(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的浏览器
https://fsanguo.comoj.com/html5/jstoas01/index.html
源码的话，直接用浏览器就可以查看了，地球人都知道
摘自 lufy小屋
觉得 可用，就经常来吧！ 欢迎评论哦！ html5教程 ，巧夺天工，精雕玉琢。小宝典献丑了！
总结
以上是 为你收集整理的 html5教程-用仿ActionScript的语法来编写html5――第二篇，利用Sprite来实现动画 全部内容，希望文章能够帮你解决 html5教程-用仿ActionScript的语法来编写html5――第二篇，利用Sprite来实现动画 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于html5教程-用仿ActionScript的语法来编写html5――第二篇，利用Sprite来实现的详细内容...