egret(白鹭引擎)实现项目初始化简单的进度条

egret对项目初始化加载添加一个渐变的进度条，下方是对应PC版的界面，如果在移动端显示只需要修改this.textField和this.shape的显示位置和宽度

直接生成进度条

class LoadingUI extends egret.Sprite {

    private perNumber: number = 0;
    private sec: number = 0;
    private progressWidth: number = 0;

    public shape: egret.Shape;
    private textField: egret.TextField;

    public constructor() {
        super();
        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.onAddToStage, this);
        this.removeEventListener(egret.Event.REMOVED_FROM_STAGE, this.onRemoveToStage, this);
    }

    private onAddToStage(): void {
        console.log(this.stage.stageWidth);
        this.textField = new egret.TextField();
        this.addChild(this.textField);
        this.textField.width = 480;
        this.textField.height = 100;
        this.textField.y = 950;
        this.textField.x = this.stage.stageWidth / 2 - this.textField.width / 2;
        this.textField.textAlign = "center";

        this.shape = new egret.Shape();
        this.shape.width = 1600;
        this.shape.height = 15;
        this.shape.x = (this.stage.stageWidth - this.shape.width) / 2;
        this.shape.y = 935;
        this.progressWidth = this.shape.width;
        this.shape.visible = false;

        let $max: egret.Matrix = new egret.Matrix(1, 0, 0, 1);
        this.shape.graphics.beginGradientFill(egret.GradientType.LINEAR, [0x736BE5, 0xFF7EC8], [1, 1], [127, 255], $max);
        this.shape.graphics.drawRoundRect(0, 0, this.shape.width, this.shape.height, 10, 10)
        this.shape.graphics.endFill();
        this.shape.alpha = 1;
        this.addChild(this.shape);

    }

    public setWidth(): void {
        this.shape.visible = true;
        this.shape.graphics.clear();
        let $max: egret.Matrix = new egret.Matrix(1, 0, 0, 1);
        this.shape.graphics.beginGradientFill(egret.GradientType.LINEAR, [0x736BE5, 0xFF7EC8], [1, 1], [127, 255], $max);
        this.shape.graphics.drawRoundRect(0, 0, this.shape.width, this.shape.height, 10, 10)
        this.shape.graphics.endFill();
    }

    private onRemoveToStage(): void {
        this.removeChildren();
    }

    public onProgress(current: number, total: number): void {
        // this.textField.text = `Loading...${current}/${total}`;
        if (current == 1) {
            this.perNumber = total / 10;
        }
        this.sec = (current / this.perNumber) * 10;
        let secs: any = this.sec.toFixed(0);
        secs = secs / 100;
        this.shape.width = this.progressWidth * secs;
        this.setWidth();
        this.textField.text = this.sec.toFixed(0) + " %";
    }
}

加载LoadingUI所需要的资源

在上面是直接用Shape做了个渐变的进度条，如果在项目中需要在LoadingUI中添加图片（有时候需要添加背景或logo）.
首先在default.res.json中添加loading组，如下：

在Main.ts修改loadResource()函数资源的加载顺序，先把LoadingUI所需要的资源异步加载成功，再创建LoadingUI的实例。

private async loadResource() {
    try {
        await RES.loadConfig("resource/default.res.json", "resource/");
        await RES.loadGroup("loading");
        const loadingView = new LoadingUI();
        this.stage.addChild(loadingView);
        await this.loadTheme();
        await RES.loadGroup("preload", 0, loadingView);
        this.stage.removeChild(loadingView);
    }
    catch (e) {
        console.error(e);
    }
}

在LoadingUI界面调用

let ladingLogo: egret.Bitmap = new egret.Bitmap(RES.getRes("loadingLogo_png"));
ladingLogo.width = this.stage.stageWidth;
ladingLogo.height = this.stage.stageWidth;
ladingLogo.x = 0;
ladingLogo.y = 0;
this.addChild(ladingLogo);