连续进度条

Question

我实现了一个进度条，但我遇到了问题。

完成进度条应该需要 5 秒。我的问题是该值每秒更新一次，我希望它是连续的，没有任何停止。

DEMO

HTML

<dx-progress-bar
#progressBar
[showStatus]="false"
id="progress-bar-status"
[rtlEnabled]="true"
[class.complete]="progressBar.value == maxValue"
[min]="0"
[max]="maxValue"
[value]="maxValue - seconds"
>
</dx-progress-bar>

.TS

 seconds = 5;
  maxValue = 5;
  intervalId: number;

  onButtonClick() {
    this.seconds = 5;
    this.intervalId = window.setInterval(() => this.timer(), 1000);
  }

  timer() {
    this.seconds--;
    if (this.seconds == 0) {
      clearInterval(this.intervalId);
    }
  }

预期结果

Example

Answer 1

计时器功能每秒运行一次，因此每个动画帧都应该运行它：

   seconds = 5;
   maxValue = 5;
   lastFrame = undefined;
   intervalId: number;
    
   onButtonClick() {
     this.seconds = 5;
     this.intervalId = window.requestAnimationFrame(this.timer);
   }
    
   timer(time) {
     if (this.lastFrame == undefined) {
       this.lastFrame = time;
     }
     this.seconds -= (time - this.lastFrame);
     this.lastFrame = time;
     if (this.seconds != 0) {
       this.intervalId = window.requestAnimationFrame(this.timer);
     }
   }