egret 自定义进度条

class ProgressBar extends egret.Sprite{
    public background:egret.Bitmap;
    public bar:egret.Bitmap;
    public barMask:egret.Rectangle;
    /**
     * 进度条参数   defaultWidth  默认宽   defaultHeight  默认高
     * */
    private defaultWidth = 300;
    private defaultHeight = 60;
    private offsetW = 14;
    public constructor(_bg:string, _bar:string) {
        super();
        this.background = new egret.Bitmap(RES.getRes(_bg));
        this.bar = new egret.Bitmap(RES.getRes(_bar));
        this.addChild(this.background);
        this.addChild(this.bar);

        this.setContentSize(this.defaultWidth,this.defaultHeight);
        this.bar.x = (this.background.width - this.bar.width) / 2+this.offsetW/2;
        this.bar.y = (this.background.height - this.bar.height) / 2;
        this.barMask = new egret.Rectangle(0, 0, this.bar.width, this.bar.height);
        this.bar.mask = this.barMask;
    }

    /**
     * 设置背景  在进度条创建完成后调用
     */
    public setBackground(_bg){
        this.removeChild(this.background);
        this.background = new egret.Bitmap(RES.getRes(_bg));
    }

    /**
     * 设置Bar  在进度条创建完成后调用
     */
    public setBar(_bar){
        this.removeChild(this.bar);
        this.bar = new egret.Bitmap(RES.getRes(_bar));
    }
    /**
     * 设置进度
     */
    public setProgress(_percent) {
        this.barMask = new egret.Rectangle(0, 0, _percent * this.bar.width-this.offsetW, this.bar.height);
        this.bar.mask = this.barMask;
    }

    /**
     * 设置位置
     */
    public setPositon(_x,_y){
        this.x = _x;
        this.y = _y;
    }

    /**
     * 设置大小  九宫格
     */
    public setContentSize(_width,_height){
        this._setWidth(_width);
        this._setHeight(_height);
    }

    private _setWidth(_width){
        this.width = _width
        this.background.width = this.width;
        this.bar.width = this.width;
        
    }

    private _setHeight(_height){
        this.height = _height
        this.background.height = this.height
        this.bar.height = this.height
    }
}

//////////////////////////////////////////////////////////////////////////////////////
//
//  Copyright (c) 2014-present, Egret Technology.
//  All rights reserved.
//  Redistribution and use in source and binary forms, with or without
//  modification, are permitted provided that the following conditions are met:
//
//     * Redistributions of source code must retain the above copyright
//       notice, this list of conditions and the following disclaimer.
//     * Redistributions in binary form must reproduce the above copyright
//       notice, this list of conditions and the following disclaimer in the
//       documentation and/or other materials provided with the distribution.
//     * Neither the name of the Egret nor the
//       names of its contributors may be used to endorse or promote products
//       derived from this software without specific prior written permission.
//
//  THIS SOFTWARE IS PROVIDED BY EGRET AND CONTRIBUTORS "AS IS" AND ANY EXPRESS
//  OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
//  OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
//  IN NO EVENT SHALL EGRET AND CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT,
//  INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
//  LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;LOSS OF USE, DATA,
//  OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF
//  LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING
//  NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE,
//  EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
//
//////////////////////////////////////////////////////////////////////////////////////

class Main extends eui.UILayer {

    private pBar:eui.ProgressBar;
    private progress:ProgressBar;
    private curProgress = 0;

    protected createChildren(): void {
        super.createChildren();

        egret.lifecycle.addLifecycleListener((context) => {
            // custom lifecycle plugin
        })

        egret.lifecycle.onPause = () => {
            egret.ticker.pause();
        }

        egret.lifecycle.onResume = () => {
            egret.ticker.resume();
        }

        //inject the custom material parser
        //注入自定义的素材解析器
        let assetAdapter = new AssetAdapter();
        egret.registerImplementation("eui.IAssetAdapter", assetAdapter);
        egret.registerImplementation("eui.IThemeAdapter", new ThemeAdapter());


        this.runGame().catch(e => {
            console.log(e);
        })
    }

    private async runGame() {
        await this.loadResource()
        this.createGameScene();
        const result = await RES.getResAsync("description_json")
        this.startAnimation(result);
        await platform.login();
        const userInfo = await platform.getUserInfo();
        console.log(userInfo);

    }

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

    private loadTheme() {
        return new Promise((resolve, reject) => {
            // load skin theme configuration file, you can manually modify the file. And replace the default skin.
            //加载皮肤主题配置文件,可以手动修改这个文件。替换默认皮肤。
            let theme = new eui.Theme("resource/default.thm.json", this.stage);
            theme.addEventListener(eui.UIEvent.COMPLETE, () => {
                resolve();
            }, this);

        })
    }

    private textfield: egret.TextField;
    /**
     * 创建场景界面
     * Create scene interface
     */
    protected createGameScene(): void {

        console.log("Hello World");
        let bg = this.createBitmapByName("playerview_bg22_jpg");
        this.addChild(bg);

        let wudingBg = this.createBitmapByName("commonview_titlebg2_png");
        this.addChild(wudingBg);

        let title = this.createBitmapByName("user_png");
        this.addChild(title);
        title.x = 200;
        title.y = 0;

        let roleBody = this.createBitmapByName("user_body_full_31032_png");
        this.addChild(roleBody);
        roleBody.x = -100;
        roleBody.y = 100;

        let roleHead = this.createBitmapByName("user_head2_wxhexie2_png");
        this.addChild(roleHead);
        roleHead.x = 185;
        roleHead.y = 30;

        let quanshiBg = this.createBitmapByName("playerview_canvas012_png");
        this.addChild(quanshiBg)
        quanshiBg.x = 100;
        quanshiBg.y = 500;

        let quanshiLabel = new egret.TextField();
        quanshiLabel.textColor = 0xf5deb3;
        quanshiLabel.textAlign = "center";
        quanshiLabel.text = "权势：123456678";
        quanshiLabel.size = 23;
        quanshiLabel.x = 135;
        quanshiLabel.y = 510;
        this.addChild(quanshiLabel);

        let nameLabel = new egret.TextField();
        nameLabel.textColor = 0xf5deb3;
        nameLabel.textAlign = "center";
        nameLabel.text = "藏香梅子";
        nameLabel.size = 23;
        nameLabel.x = 450;
        nameLabel.y = 100;
        this.addChild(nameLabel);

        let id1Label = new egret.TextField();
        id1Label.textColor = 0xf5deb3;
        id1Label.textAlign = "center";
        id1Label.text = "编号：  12345678";
        id1Label.size = 23;
        id1Label.x = 400;
        id1Label.y = 150;
        this.addChild(id1Label);

        let id2Label = new egret.TextField();
        id2Label.textColor = 0xf5deb3;
        id2Label.textAlign = "center";
        id2Label.text = "编号：  暂无帮会";
        id2Label.size = 23;
        id2Label.x = 400;
        id2Label.y = 200;
        this.addChild(id2Label);

        let id3Label = new egret.TextField();
        id3Label.textColor = 0xf5deb3;
        id3Label.textAlign = "center";
        id3Label.text = "编号：  暂无职位";
        id3Label.size = 23;
        id3Label.x = 400;
        id3Label.y = 250;
        this.addChild(id3Label);

        let VIPLabel = new egret.TextField();
        VIPLabel.textColor = 0xf5deb3;
        VIPLabel.textAlign = "center";
        VIPLabel.text = "会员：  VIP4";
        VIPLabel.size = 23;
        VIPLabel.x = 400;
        VIPLabel.y = 300;
        this.addChild(VIPLabel);

        let renWangLabel = new egret.TextField();
        renWangLabel.textColor = 0xf5deb3;
        renWangLabel.textAlign = "center";
        renWangLabel.text = "人望：  0";
        renWangLabel.size = 23;
        renWangLabel.x = 400;
        renWangLabel.y = 350;
        this.addChild(renWangLabel);

        let upBtn = new eui.Button();
        upBtn.horizontalCenter = 0;
        upBtn.verticalCenter = 0;
        this.addChild(upBtn);
        upBtn.x = 700;
        upBtn.y = 700;
        // upBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onUpBtnClick, this);
        upBtn.addEventListener(egret.TouchEvent.TOUCH_TAP,this.btnTouchHandler,this);

        upBtn.icon = RES.getRes("up_png");

        let closeBtn = new eui.Button();
        this.addChild(closeBtn);
        closeBtn.x = 550;
        closeBtn.y = 0;
        closeBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onCloseBtnClick, this);
        closeBtn.icon = RES.getRes("commonview_closebtn12_png");

        // 传入 进度条纹理名称 进度条背景纹理名称
        this.createProgressBar();
        // this.initProgressBar();
    }

      private createProgressBar(){
        // 传入 进度条纹理名称 进度条背景纹理名称
        this.progress = new ProgressBar('progBg_png','progBar_png');
        //设置进度 0-1
        this.progress.setContentSize(400,60)
        this.progress.setPositon(200,700);
        this.progress.setProgress(0.1)
        this.stage.addChild(this.progress)
    }
    /**
     * 根据name关键字创建一个Bitmap对象。name属性请参考resources/resource.json配置文件的内容。
     * Create a Bitmap object according to name keyword.As for the property of name please refer to the configuration file of resources/resource.json.
     */
    private createBitmapByName(name: string): egret.Bitmap {
        let result = new egret.Bitmap();
        let texture: egret.Texture = RES.getRes(name);
        result.texture = texture;
        return result;
    }
    /**
     * 描述文件加载成功，开始播放动画
     * Description file loading is successful, start to play the animation
     */
    private startAnimation(result: Array): void {
        let parser = new egret.HtmlTextParser();

        let textflowArr = result.map(text => parser.parse(text));
        let textfield = this.textfield;
        let count = -1;
        let change = () => {
            count++;
            if (count >= textflowArr.length) {
                count = 0;
            }
            let textFlow = textflowArr[count];

            // 切换描述内容
            // Switch to described content
            textfield.textFlow = textFlow;
            let tw = egret.Tween.get(textfield);
            tw.to({ "alpha": 1 }, 200);
            tw.wait(2000);
            tw.to({ "alpha": 0 }, 200);
            tw.call(change, this);
        };

        change();
    }

    private onCloseBtnClick(e: egret.TouchEvent) {
        this.removeChildren();
    }

    private onUpBtnClick(e: egret.TouchEvent) {
        console.log("up levels");
        this.timestart();
    }

    private initProgressBar():void{
            this.pBar = new eui.ProgressBar();
            //1-默认加载方向从左到右；
            //2-设置加载进度从下到上；
            // this.pBar.direction = eui.Direction.BTT;
            this.pBar.maximum = 200;
            this.pBar.minimum = 0;
            //1-
            this.pBar.width = 200;
            this.pBar.height = 40;
            //2-
            // this.pBar.width = 40;
            // this.pBar.height = 200;
            this.pBar.value = 10;
            this.addChild(this.pBar);
            this.pBar.x = 220;
            this.pBar.y = 650;
            //用timer来加载进度
            // var timer:egret.Timer = new egret.Timer(10,0);
            // timer.addEventListener(egret.TimerEvent.TIMER,this.timestart,this);
            // timer.start();
        }

        private timestart():void{
            this.pBar.value += 1;
                if(this.pBar.value >= this.pBar.maximum){
                    this.pBar.value = 0;
                }
        }    

    private btnTouchHandler(event:egret.TouchEvent):void {
        this.curProgress += 0.1;
        if(this.curProgress > 1){
            this.curProgress = 1;
        }

        this.progress.setProgress(this.curProgress)
    }
}