首页 > 其他 > 详细

egret:环形进度条遮罩

时间:2019-12-02 17:17:31      阅读:222      评论:0      收藏:0      [点我收藏+]

  一、界面结构:技术分享图片技术分享图片

 

  二、代码:

  

    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;
    }    

  三、效果:技术分享图片

 

 

 

egret:环形进度条遮罩

原文:https://www.cnblogs.com/WentingC/p/11971686.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!