Angular Material 2 : Progress Bar animation choppy

Question

我正在尝试使用 Angular 构建一个页面，该页面具有各种进度条，表示为需要一定时间的操作所取得的进度。我想要做的是使用 Angular Material 进度条制作从时间 0 到结束时间的平滑动画。我目前的解决方案只是每 50ms 更新一次进程的百分比，并将进度条的值设置为该值。我正在使用 rxjs 计时器完成此操作，如下所示:

const start = new Date().getTime();
const source = timer(0, 50);
const subscribe = source.subscribe(() => {
  const time = new Date().getTime();
  if (time - start > length) {
    subscribe.unsubscribe();
  }

  this.progressValue = 100 * (time - start) / length;
});

这是进度条 HTML 本身:

 <mat-progress-bar mode="determinant" [value]="progressValue"></mat-progress-bar>

然而，结果是进度条的进展非常不稳定。有一个更好的方法吗？我每次都知道这个过程的长度，所以我觉得这段时间的平滑过渡应该相对容易。谢谢!

Answer 1

这是我想出的:

html

<mat-progress-bar color="accent" mode="determinate" [value]="uploadPercentage$ | async"></mat-progress-bar>

成分:

@ViewChild(MatProgressBar) progressBar: MatProgressBar;
uploadPercentage$: Observable<number>;
uploadProgress$: Subject<HttpProgressEvent> = new Subject<HttpProgressEvent>();

ngAfterViewInit(): void {
    // wait until animation ends and only then change value
    this.uploadPercentage$ = this.progressBar.animationEnd
      .pipe(
        startWith({
          value: 0
        }),
        switchMap((animationState: ProgressAnimationEnd) => this.uploadProgress$
          .pipe(
            map((progress: HttpProgressEvent): number => this.progressToPercents(progress)),
            distinctUntilChanged((val: number) => animationState.value !== val)
          )
        ),
      );
  }