首页 > 代码库 > 用仿ActionScript的语法来编写html5——第二篇，利用Sprite来实现动画

用仿ActionScript的语法来编写html5——第二篇，利用Sprite来实现动画

2024-08-14 19:20:58   220人阅读

本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：用仿ActionScript的语法来编写html5——第二篇，利用Sprite来实现动画

上一篇，我已经模仿as，加入了LBitmap和LBitmapData类，并且用它们实现了静态图片的显示。
这次用Sprite来动态显示图片。
依然遵循上一篇对显示对象的处理的思路，添加LSprite类，并追加show方法，如下：

[javascript] view plain copy
 
  1. function LSprite(){  
  2.     var self = this;  
  3.     self.type = "LSprite";  
  4.     self.x = 0;  
  5.     self.y = 0;  
  6.     self.visible=true;  
  7.     self.childList = new Array()  
  8. }  
  9. LSprite.prototype = {  
  10.     show:function (cood){  
  11.         if(cood==null)cood={x:0,y:0};  
  12.         var self = this;  
  13.         if(!self.visible)return;  
  14.         LGlobal.show(self.childList,{x:self.x+cood.x,y:self.y+cood.y});  
  15.     },  
  16.     addChild:function (DisplayObject){  
  17.         var self  = this;  
  18.         self.childList.push(DisplayObject);  
  19.     }  
  20. }  



因为Sprite上可以有图片等其他的可显示对象，所以我在其构造函数里，添加了childList，用来保存它上面的所有对象。然后在调用它本身的show方法的时候，将其LGlobal循环现实其子对象。
这样一来，我们上一篇中显示图片的代码，也可以利用Sprite来显示了，代码如下：

[javascript] view plain copy
 
  1. function main(){  
  2.     loader = new LLoader();  
  3.     loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  
  4.     loader.load("1.png","bitmapData");  
  5. }  
  6. function loadBitmapdata(event){  
  7.     var bitmapdata = new LBitmapData(loader.content);  
  8.     var mapimg = new LBitmap(bitmapdata);  
  9.       
  10.     var backLayer = new LSprite();  
  11.     addChild(backLayer);  
  12.     backLayer.addChild(mapimg);  
  13. }  



我们知道，actionscript中的Sprite可以添加EnterFrame事件，用来动态显示图片，我这里也来模仿一下，因为在LSprite类中show方法是不断循环的,所以，我只需要在show方法中不断调用一个方法，就能让其循环。
我假设有一个数组，里面存储了所有不断循环的所有方法，然后我就可以在show方法中循环这个数组，这样就达到了所有方法的循环，看下面

[javascript] view plain copy
 
  1. function LSprite(){  
  2.     var self = this;  
  3.     self.type = "LSprite";  
  4.     self.x = 0;  
  5.     self.y = 0;  
  6.     self.visible=true;  
  7.     self.childList = new Array()  
  8.     self.frameList = new Array();  
  9. }  
  10. LSprite.prototype = {  
  11.     show:function (cood){  
  12.         if(cood==null)cood={x:0,y:0};  
  13.         var self = this;  
  14.         if(!self.visible)return;  
  15.         LGlobal.show(self.childList,{x:self.x+cood.x,y:self.y+cood.y});  
  16.         self.loopframe();  
  17.     },  
  18.     loopframe:function (){  
  19.         var self = this;  
  20.         var key;  
  21.         for(key in self.frameList){  
  22.             self.frameList[key]();  
  23.         }  
  24.     },  
  25.     addChild:function (DisplayObject){  
  26.         var self  = this;  
  27.         self.childList.push(DisplayObject);  
  28.     }  
  29. }  



光假设当然是不行的，我们需要有添加这个循环事件的方法，所以我们还需要addEventListener方法，以及移除这个事件的removeEventListener方法

[javascript] view plain copy
 
  1. addEventListener:function (type,listener){  
  2.         var self = this;  
  3.         if(type == LEvent.ENTER_FRAME){  
  4.             self.frameList.push(listener);  
  5.         }  
  6.     },  
  7.     removeEventListener:function (type,listener){  
  8.         var self = this;  
  9.         var i,length = self.frameList.length;  
  10.         for(i=0;i<length;i++){  
  11.             if(type == LEvent.ENTER_FRAME){  
  12.                 self.frameList.splice(i,1);  
  13.                 break;  
  14.             }  
  15.         }  
  16.     }  



该添加的都添加了，接下来，就来简单实现一个人物的行走图
先来给BitmapData类添加几个方法，用来改变图片显示的区域位置等

[javascript] view plain copy
 
  1. LBitmapData.prototype = {  
  2.         setProperties:function (x,y,width,height){  
  3.             var self = this;  
  4.             self.x = x;  
  5.             self.y = y;  
  6.             self.width = width;  
  7.             self.height = height;  
  8.         },  
  9.         setCoordinate:function (x,y){  
  10.             var self = this;  
  11.             self.x = x;  
  12.             self.y = y;  
  13.         }  
  14.     }  



好了，现在准备一张人物的行走图，这就让它动起来

[javascript] view plain copy
 
    1. var list = new Array();  
    2. var index = 0;  
    3. var mapimg;  
    4. var loader  
    5. var imageArray;  
    6. var animeIndex = 0;  
    7. var dirindex = 0;  
    8. var dirarr = new Array({x:0,y:1},{x:-1,y:0},{x:1,y:0},{x:0,y:-1});  
    9. function main(){  
    10.     loader = new LLoader();  
    11.     loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);  
    12.     loader.load("1.png","bitmapData");  
    13. }  
    14. function loadBitmapdata(event){  
    15.     var bitmapdata = new LBitmapData(loader.content,0,0,70,92);  
    16.     imageArray = LGlobal.divideCoordinate(bitmapdata.image.width,bitmapdata.image.height,8,8);  
    17.     mapimg = new LBitmap(bitmapdata);  
    18.     mapimg.x = 100;  
    19.     mapimg.bitmapData.setCoordinate(0,0);  
    20.     index = 0;  
    21.     var backLayer = new LSprite();  
    22.     addChild(backLayer);  
    23.     backLayer.addChild(mapimg);  
    24.     backLayer.addEventListener(LEvent.ENTER_FRAME, onframe)  
    25. }  
    26.   
    27.   
    28. function onframe(){  
    29.     index++;  
    30.     if(index >= imageArray[0].length){  
    31.         index = 0;  
    32.     }  
    33.     mapimg.bitmapData.setCoordinate(imageArray[dirindex][index].x,imageArray[dirindex][index].y);  
    34.       
    35.     mapimg.x += dirarr[dirindex].x*3;  
    36.     mapimg.y += dirarr[dirindex].y*3;  
    37.     if(animeIndex++ > 20){  
    38.         dirindex++;  
    39.         if(dirindex > 3)dirindex = 0;  
    40.         animeIndex = 0;  
    41.     }  
    42. }  

用仿ActionScript的语法来编写html5——第二篇，利用Sprite来实现动画


联系
我们