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 directive
is 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?