3

I have a AnimationPlayer defined animation according a specified AnimationReferenceMetadata definition.

Some thing like this :

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
  }
});

I have a directive to play a animation upon interaction. This directiveis using a Animation class to build and play the animation according the specified 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();
  }
}

I want to infinite play the animation.

It seems the animation-iteration-count (infinite) is not supported. Or maybe I'm using it wrong.

Using the onDone callback I can reset and replay the AnimationPlayer.

The infinite animation loop works.

I'm looking for a better way to infinite this animation. Any suggestions or help?

daan.desmedt
  • 3,752
  • 1
  • 19
  • 33

0 Answers0