egret:环形进度条遮罩

  一、界面结构:

 

  二、代码:

  

    private arc_angle:number;
    private resProMask(): void {
        egret.stopTick(this.shapeTicker,this);
        if(this.data.retime == 0)return;
        //创建环形进度遮罩
                if(this.res_shape&&this.res_shape.parent)this.res_shape.parent.removeChild(this.res_shape);
        this.res_shape = new egret.Shape();
        this.res_shape.x = this.gro_res_pro.x;
        this.res_shape.y = this.gro_res_pro.y;
        this.gro_res_pro.addChild(this.res_shape);
        this.img_res_pro.mask = this.res_shape;//遮罩

        this.arc_angle = -90;
        egret.startTick(this.shapeTicker, this);

    }
    private shapeTicker(timeStamp:number):boolean{
        let c = this.gro_res_pro.width/2;
        this.res_shape.graphics.clear();
        this.res_shape.graphics.beginFill(0x00ffff, 1);
        this.res_shape.graphics.moveTo(c, c);
        this.res_shape.graphics.lineTo(c, -c);
        this.res_shape.graphics.drawArc(c, c, c, -90 * Math.PI / 180, this.arc_angle * Math.PI / 180,false);
        this.res_shape.graphics.lineTo(c, c);
        this.res_shape.graphics.endFill();

        this.arc_angle += 1.5;
     //进度转完一圈后的操作
        if (this.arc_angle == 270) {
            this.playStarAni();
            this.res_tween.play(0);
            this.arc_angle = -90;        
        }
        return false;
    }    

  三、效果:

 

 

 

posted @ 2019-12-02 16:50  WentingC  阅读(1013)  评论(0编辑  收藏  举报