码迷，mamicode.com
首页 > Web开发 > 详细

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

时间：2016-09-26 10:59:31      阅读：229      评论：0      收藏：0      [点我收藏+]

标签：

本文为 兄弟连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来实现动画

标签：

原文地址：http://www.cnblogs.com/itxdl/p/5908111.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！