用仿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;
}
}
}
该添加的都添加了,接下来,就来简单实现一个人物的行走图
先来给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小屋
推荐阅读
-
用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件
-
用仿ActionScript的语法来编写html5——第八篇,图片处理+粒子效果
-
用仿ActionScript的语法来编写html5——第九篇,仿URLLoader读取文件
-
用仿ActionScript的语法来编写html5——第七篇,自定义按钮
-
用仿ActionScript的语法来编写html5——第六篇,TextField与输入框
-
用仿ActionScript的语法来编写html5——第五篇,Graphics绘图
-
用仿ActionScript的语法来编写html5——第二篇,利用Sprite来实现动画
-
用仿ActionScript的语法来编写html5——第一篇,显示一张图片
-
用仿ActionScript的语法来编写html5——终篇,LegendForHtml5Programming1.0开源库件
-
用仿ActionScript的语法来编写html5——第一篇,显示一张图片