美文网首页
给egret loading增加loading动态效果

给egret loading增加loading动态效果

作者: Zszen | 来源:发表于2018-12-20 09:50 被阅读64次

官方的剧中做的不好,也顺便调整了一下

class LoadingUI extends egret.Sprite implements RES.PromiseTaskReporter {

    private textField: egret.TextField;
    private poolLoadingBar:egret.Shape[]=[];
    private poolId:number=0;

    public constructor() {
        super();
        // this.createView();
        this.once(egret.Event.ADDED_TO_STAGE,this.createView,this);
        this.once(egret.Event.REMOVED_FROM_STAGE,this.onRemoved,this);
    }

    private onRemoved(){
        for(let i=0;i<this.poolLoadingBar.length;i++){
            let shape=this.poolLoadingBar[i];
            OBJManager.DestroyShape(shape);
        }
    }


    private createView(): void {
        let pTxtSize = {width:300,height:50};
        this.textField = new egret.TextField();
        this.addChild(this.textField);
        this.textField.y = (this.stage.stageHeight-pTxtSize.height)/2;
        this.textField.x = (this.stage.stageWidth-pTxtSize.width)/2;
        this.textField.textAlign = egret.HorizontalAlign.CENTER;
        this.textField.verticalAlign = egret.VerticalAlign.MIDDLE;
        this.textField.width = pTxtSize.width;
        this.textField.height = pTxtSize.height;
        // this.textField.width = 640/2;
        // this.textField.height = 1136/2;
        // this.textField.textAlign = "center";
        let pBarCenter = {x:this.stage.stageWidth/2,y:this.stage.stageHeight/2-50};
        let maxnum = 12;
        let angleUnit = Math.PI*2/maxnum;
        let radius = 30;
        for(let i=0;i<maxnum;i++){
            let angleNow = angleUnit*i;
            let pPotFinal = {x:pBarCenter.x+Math.cos(angleNow)*radius,y:pBarCenter.y+Math.sin(angleNow)*radius};
            let shape = OBJManager.CreateShape();
            this.addChild(shape);
            this.poolLoadingBar.push(shape);
            shape.graphics.beginFill(0xffffff);
            shape.graphics.drawCircle(pPotFinal.x,pPotFinal.y,5);
            shape.graphics.endFill();
            shape.alpha = 0;

        }
        this.loopLoadingBar();        
    }

    private loopLoadingBar(){
        egret.Tween.get(this.poolLoadingBar[this.poolId])
            .to({alpha:1},100)
            .call((id)=>{
                this.poolId++;
                if(this.poolId>this.poolLoadingBar.length-1){
                    this.poolId=0;
                }
                this.loopLoadingBar();
            },this)
            .to({alpha:0},500)
    }


    public onProgress(current: number, total: number): void {
        this.textField.text = `Loading...${current}/${total}`;
    }
}

相关文章