Question

我正在尝试使用Angular构建一个页面，该页面具有各种进度条，这些进度条表示需要一定时间才能执行的操作的进度。我正在尝试使用Angular Material进度条制作从时间0到结束时间的平滑动画。我当前的解决方案只是每50毫秒更新一次过程的百分比，并将进度条的值设置为该值。我正在使用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)
          )
        ),
      );
  }

Answer 2

我已经使用Angular Animations创建了自己的进度栏。这具有平稳的过渡，看起来就像 mat-progress-bar ：

1）将动画添加到您的组件中：

  selector: 'app-loading',
  templateUrl: './loading.component.html',
  styleUrls: ['./loading.component.scss'],
  animations: [
    trigger('loading', [
      state('start',
        style({
          width: '0%'
        })
      ),
      state('end',
        style({
          width: '100%'
        })),

      transition('start => end', [
        animate(2000)
      ]),
    ])
  ]
})

2）设置触发计时器以开始动画。进度结束后，我关闭对话框：

duration: number = 2 * 100;
step = 100;
add_step = 10;
progress = 0;


ngOnInit() {
    const interval = setInterval(() => {
      if (this.progress < this.duration) {
        this.progress += this.add_step ;
      } else {
        clearInterval(interval);
        this.dialogRef.close();
      }
    }, this.step);
  }

3）在HTML中使用它：

<div style="background-color: #ff7a7a;height: 4px;width: 100%;">
        <div style="background-color: #760000;height: 4px;"
             [@loading]="progress === 0 ? 'start':'end'">
        </div>
</div>

角度材料2：进度条动画不连贯

2 个答案: