angular - 如何通过 AnimationPlayer 或 AnimationReferenceMetadata 提供无限动画（需要替代方案）

Question

我有一个AnimationPlayer根据指定AnimationReferenceMetadata定义定义的动画。

像这样的东西：

const base: AnimationMetadata[] = [
  style({
    opacity: `{{startOpacity}}`
  }),
  animate(
    `{{duration}} {{delay}} {{easing}}`,
    style({
      opacity: `{{endOpacity}}`
    })
  )
];

const fadeIn: AnimationReferenceMetadata = animation(base, {
  params: {
    delay: "0s",
    duration: "350ms",
    easing: EaseOut.sine,
    endOpacity: 1,
    startOpacity: 0
  }
});

我必须directive在交互时播放动画。这directive是使用一个Animation类来根据指定的构建和播放动画AnimationReferenceMetadata。

export class Animation extends BehaviorManager {

  private _player: AnimationPlayer;
  private _isInfinite: boolean = false;

  constructor(meta: AnimationReferenceMetadata, infinte:boolean = false, public _el: ElementRef,private _builder: AnimationBuilder) {
    super();

    const animation: AnimationFactory = this._builder.build(meta);
    this._isInfinite = infinte;
    this._player = animation.create(this._el.nativeElement);
  }

  public play() {
    this._player.onDone(() => {
      if(this._isInfinite){
        this.reset();
        this.play();
      }
    });
    this._player.play();
  }

  public reset() {
    this._player.reset();
  }
}

我想无限播放动画。

似乎animation-iteration-count不支持（无限）。或者也许我用错了。

使用onDone回调我可以重置和重播AnimationPlayer.

无限动画循环有效。

我正在寻找一种更好的方法来无限化这个动画。有什么建议或帮助吗？

标签： angularangular-animations