先上一张效果图
然后是LoadingUI里的代码
class LoadingUI extends egret.Sprite implements RES.PromiseTaskReporter {
public constructor() {
super();
this.createView();
}
private bg1:egret.Bitmap;
private bg2:egret.Bitmap;
private loadingicon:egret.Bitmap;
private bitmapText :egret.BitmapText;
private createView(): void {
// 加载loadingBg图
let loadingbg:egret.Bitmap = new egret.Bitmap()
loadingbg.texture = RES.getRes("loading_bg_jpg");
loadingbg.width = 640 ;
loadingbg.height = 1136 ;
this.addChild(loadingbg);
this.bg1= new egret.Bitmap()
this.bg1.texture = RES.getRes("loading_json.loading_bar1_png");
this.bg1.anchorOffsetX = this.bg1.width /2 ;
this.bg1.anchorOffsetY = this.bg1.height /2 ;
this.bg1.x = 640 / 2;
this.bg1.y = 1136 / 2;
this.addChild(this.bg1);
this.bg2 = new egret.Bitmap();
this.bg2.texture = RES.getRes("loading_json.loading_bar2_png");
this.bg2.anchorOffsetX = this.bg2.width /2 ;
this.bg2.anchorOffsetY = this.bg2.height /2 ;
this.bg2.x = 640 / 2;
this.bg2.y = 1136 / 2;
this.addChild(this.bg2);
this.loadingicon = new egret.Bitmap();
this.loadingicon.texture = RES.getRes("loading_json.loading_icon_png");
this.loadingicon.anchorOffsetX = this.loadingicon.width /2 ;
this.loadingicon.anchorOffsetY = this.loadingicon.height /2 ;
this.loadingicon.x = 640 / 2;
this.loadingicon.y = 1136 / 2;
this.addChild(this.loadingicon);
var shape: egret.Shape = this.shape = new egret.Shape();
this.addChild(shape);
this.bg2.mask = shape;
this.bitmapText = new egret.BitmapText();
this.bitmapText.font = RES.getRes("num_fnt");
this.bitmapText.width = 640;
this.bitmapText.height = 1136;
this.bitmapText.textAlign = "center"
this.bitmapText.y = 1136 /2 -20
this.addChild(this.bitmapText);
}
public onProgress(current: number, total: number): void {
// this. bg2.x = (this.stage.stageWidth - this.bg2.width) * (current / total)
//这里开始绘制的角度为-90,剩余绘制的角度为270
this.changeGraphics(270 * (current / total));
this.loadingicon.rotation+=5;
this.bitmapText.text = Math.floor(current/ total * 100).toString() + "%";
}
private shape:egret.Shape;
private changeGraphics(angle){
var shape: egret.Shape = this.shape;
shape.graphics.clear();
shape.graphics.beginFill(0x00ffff, 1);
shape.graphics.moveTo(320, 1136 / 2);
shape.graphics.lineTo(this.bg2.width /2, 0);
//我们从上开始绘制,则弧度为-90 * Math.PI / 180
shape.graphics.drawArc(320, 1136 / 2, this.bg1.width /2, -90 * Math.PI / 180, angle* Math.PI / 180, false);
shape.graphics.lineTo(320, 1136 / 2);
shape.graphics.endFill();
}
}
原文:https://blog.csdn.net/duan003387/article/details/82012914