需要定期暂停 Carousel 动画并调用一个函数

Posted 2023-03-06

【中文标题】需要定期暂停 Carousel 动画并调用一个函数

【英文标题】：Need to pause the Carousel animation regularly and call a function

【发布时间】：2021-05-08 16:29:13

【问题描述】：

我有一个轮播动画：

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

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

我正在使用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>

【参考方案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" 和按钮

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

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