时间戳

首页 > 解决方案 > 需要定期暂停 Carousel 动画并调用一个函数

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

问题描述

我有一个轮播动画：

在此处输入图像描述

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

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

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

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

这是 Stackblitz链接。

这是我的代码：

.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>

标签： angularangular-animations

解决方案

看看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 (index == 0)
    this.player.onDone(() => {
      this.executeAction()
    });

您还可以完全删除“如果”，并在一个按钮

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

在这个分叉的堆栈闪电战中，我使用“计时器”来模拟 service.getData().subscribe

推荐阅读