加载进度条loadBar的制作

loading进度条是做游戏的时候常用的一个功能呢，今天有人在群里问到这个问题，几句话说不清楚，还是写个教程说说怎么吧。
附件是源文件，代码都在里面。
主场景上画了一个按钮，点击以后就开始下载30个小图片

1. var sp:egret.Sprite = new egret.Sprite();
   
2. sp.graphics.beginFill(0xFFFFFF);
   
3. sp.graphics.drawRect(0,0,100,50);
   
4. sp.x=10;sp.y=10;
   
5. sp.width = 100; sp.height =50;//设置点击区域
   
6. sp.touchEnabled= true;//可点击
   
7. this.addChild(sp);
   
8. 
   
9. //第1个按钮的说明文字
   
10. var txt1:egret.TextField = new egret.TextField();
    
11. txt1.text = "点击加载第1波30个资源图片";
    
12. txt1.x=120; txt1.y=10;
    
13. this.addChild(txt1);
    
14. //第一个loading条
    
15. this.load = new Load();
    
16. this.load.x = this.stage.width/2; this.load.y = 110;
    
17. this.addChild(this.load);
    
18. //点击开始加载
    
19. sp.addEventListener(egret.TouchEvent.TOUCH_TAP,this.startLoad,this);

复制代码

Load.ts是loading条的代码，里面最主要的就是这一段

1. public onProgress(event:RES.ResourceEvent):void{
   
2.         this.txt.text = event.itemsLoaded.toString()+"/"+event.itemsTotal.toString();
   
3.         var per:number = event.itemsLoaded/event.itemsTotal;//加载的比例
   
4.         this.maskRect = new egret.Rectangle(0,0,per*256,24);//计算遮罩的大小
   
5.         this.bright.mask = this.maskRect;
   
6. }

复制代码

进度条的原理是这样的，底部有一个默认的灰色条，表示整个进度的长度。上面是一个亮的条，表示加载的部分。
根据加载的百分比，画一个Rectangle，设置为亮条的遮罩，这样就形成了一个进度条。

貌似除了flash，一般的网页加载都不能实现按照精确的加载字节数显示进度，只能按照文件数量来显示。egret也是这样。
通过event.itemsLoaded得到目前已经加载的文件数量。
event.itemsTotal是要加载的总文件数量。
两个相除就是加载的进度百分比。

最终效果是这样


flash的各种加载样式网上有很多，可以参考一下，原理都是一样的，希望你能做出更酷的效果来。





效果演示地址  egret.zhihuasi.com/loadbar

游客，如果您要查看本帖隐藏内容请回复

回复看看前辈们的例子。

回复看一看

学习学习。

回复看一看

更好吃vghvfhjjjjjjjjjjjjjjjjjjjjjjjjjjjjj

阿斯顿是的萨芬十多个

学习一下~~~~

学习下！！！

回复看看看一下