需要定时暂停轮播动画，调用一个函数

Question

我有轮播动画：

工作正常，但我需要在一段时间后暂停它并调用一个函数。

一旦卡片改变位置，我想暂停它，调用我的函数，一旦该函数的执行结束，再次重新启动动画。我想无限期地这样做。

我正在使用 AnimationBuilder 的 build() 函数创建我的动画。

我尝试使用 AnimationPlayer 的 pause() 和 restart() 方法，但无法正确设置它们。

这里是 Stackblitz link。

这是我的代码：

.ts: animateCarousel() 包含动画定义。

  @ViewChildren("card") items: QueryList<ElementRef>;
  @ViewChild("container") container: ElementRef;
  @ViewChild("dataInit") dataInit: ElementRef;
  rect: any;
  private player: AnimationPlayer;
  timing = "2000ms ease-in-out";
  selectedIndex = 0;
  rectElement: any;
  order: number[] = this.data.map((_x, i) => this.data.length - i);
  constructor(private builder: AnimationBuilder) {}

  ngAfterViewInit() {
    this.calculateDimensions();
    this.animateCarousel();
  }

  calculateDimensions() {
    this.rectElement = this.items.first.nativeElement.getBoundingClientRect();
    const rect = this.dataInit.nativeElement.getBoundingClientRect();
    const rectContainer = this.container.nativeElement.getBoundingClientRect();

    this.rect = {};
    this.rect.height = rectContainer.height - rect.y;
    this.rect.y = rect.y;
    this.rect.width = rectContainer.width - this.rectElement.width;
  }

  animateCarousel() {
    this.items.forEach((item: ElementRef, index: number) => {
      this.order[index] = this.items.length - ((index + this.selectedIndex) % this.items.length);
      const itemStyle = this.items.length > 5 ? this.getStyle2(index) : this.getStyle(index);

      const myAnimation = this.builder.build([
        animate(this.timing, style(itemStyle))
      ]);

      this.player = myAnimation.create(item.nativeElement);

      if (index == 0)
        this.player.onDone(() => {
          this.calculateDimensions();
          this.selectedIndex =
            (this.selectedIndex + this.items.length - 1) % this.items.length;

          this.animateCarousel();
        });

      this.player.play();
    });
  }

.html:

<div #container class="container">

    <div class="header">
        A Simple Carousel
    </div>
    <div #dataInit class="data"></div>
    <div #card class="cards" [ngStyle]="{'z-index':order[i]}" [style.visibility]="order[i]>=2 && order[i]<=data.length-5?'collapse':null" *ngFor="let item of data; let i = index;">
            <div class="name">{{ item.name }}</div>
            <div class="age">{{ item.age }}</div>
    </div>
</div>

Answer 1

看看 animateFunction，当你写的时候

if (index == 0){
   this.calculateDimensions();
          this.selectedIndex =
            (this.selectedIndex + this.items.length - 1) % this.items.length;

          this.animateCarousel();
}

你是说动画继续。您可以在函数中取出 if，例如

executeAction()
{
   console.log(this.data[this.selectedIndex])
   //you,e.g. subscribe to a service to getData, and after subscribe
   //execute the function
   this.dataService.getData().subscribe(res=>{
      this.calculateDimensions();
      this.selectedIndex =
        (this.selectedIndex + this.items.length - 1) % this.items.length;

      this.animateCarousel();
   })
}

然后将“if”转换成类似的形式

 if (index == 0)
    this.player.onDone(() => {
      this.executeAction()
    });

您也可以完全删除按钮中的“if”和 has

<button> (click)="executeAction()">next</button>

在这个forked stackblitz中我使用了一个“定时器”来模拟service.getData().subscribe

需要定时暂停轮播动画，调用一个函数

Need to pause the Carousel animation regularly and call a function

angular

angular-animations