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。

无限动画循环有效。

我正在寻找一种更好的方式让这个动画无限。有任何建议或帮助吗？

如何通过AnimationPlayer或AnimationReferenceMetadata提供无限动画（需要的替代品）

0 个答案: