Laya繪制扇形遮罩，制作倒計時

通過不斷繪制遮罩，sprite精靈繪制的扇形慢慢縮小可以，給人一種圓圈在縮小的感覺

 

 

 圖片資源

 

 

 

根據時間算出角度,依次繪制扇形遮罩

  private sumTime:number = 0;
  private countDownTime:number = 0;  
  public openView():void{
  　　this.maskImg.graphics.clear();
      //因為是從正上方開始,所以繪制的扇形一開始是-90度
      this.maskImg.graphics.drawPie(100,100,120,-90,270,"#ffffff");
      //定時器,一直繪制扇形
      Laya.timer.frameLoop(1,this,this.drawPieMask);
      this.countDownTime = 5;
      //5秒倒計時定時器
      Laya.timer.loop(1000,this,this.computeCountDownTime);
      this.timeImg.skin = "res/ui/comm/number" + this.countDownTime + ".png";
      this.sumTime = 0;
  }

   //倒計時
   private computeCountDownTime():void{
       this.countDownTime--;
       if(this.countDownTime > 0){
          this.timeImg.skin = "res/ui/comm/number" + this.countDownTime + ".png";
       }else{
          Laya.timer.clear(this,this.computeCountDownTime);
       }
   }
    
   //繪畫扇形遮罩
   private drawPieMask():void{
       //計算時間
       this.sumTime += Laya.timer.delta;
       if(this.sumTime <= 5000){
           this.maskImg.graphics.clear();
           //根據時間計算扇形角度
           this.maskImg.graphics.drawPie(100,100,120,-90 + this.sumTime/5000 * 360,270,"#ffffff");
       }else{//清除定時器
           Laya.timer.clear(this,this.drawPieMask);
       }
   }

 

 

 效果