Egret社区

加载进度条loadBar的制作

2014-10-11 23:43
52608490
本帖最后由 张宇 于 2015-1-19 17:23 编辑

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. //第1个按钮的说明文字
  9. var txt1:egret.TextField = new egret.TextField();
  10. txt1.text = "点击加载第1波30个资源图片";
  11. txt1.x=120; txt1.y=10;
  12. this.addChild(txt1);
  13. //第一个loading条
  14. this.load = new Load();
  15. this.load.x = this.stage.width/2; this.load.y = 110;
  16. this.addChild(this.load);
  17. //点击开始加载
  18. 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

分享到 :
13 人收藏

490 个回复

倒序浏览
yufuping  初学乍练 | 2014-10-12 22:46:19
回复看看前辈们的例子。
hzdrt  初学乍练 | 2014-10-12 07:47:28
回复看一看
msxiehui  登堂入室 | 2014-10-13 14:31:45
学习学习。
十里丹青  登堂入室 | 2014-10-13 20:18:26
回复看一看
Doubler  登堂入室 | 2014-10-23 15:00:41
更好吃vghvfhjjjjjjjjjjjjjjjjjjjjjjjjjjjjj
Doubler  登堂入室 | 2014-10-23 15:09:03
阿斯顿是的萨芬十多个
yycxsh  初学乍练 | 2014-10-24 12:40:18
学习一下~~~~
shanyishan  登堂入室 | 2014-10-25 16:22:30
学习下!!!
bobolove  初学乍练 | 2014-10-26 21:27:38
回复看看看一下
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号

Powered by Discuz! X3.2 © 2001-2019 Comsenz Inc.

返回顶部