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; }
三、效果:
坚持就是胜利啊!