5

Thank you for reading my question (it's my first).

My end goal is to have a button that starts and stops animation and a slider (right now a textbox) to adjust speed.

I have working code for starting and stopping animation

I also have partially working code to change the speed within the "animate()" definition, thus the need for using AnimationBuilder. I am failing to bring them together. More details below:

When using a statically defined Animation and using [@animation.done]="" it passes an $event variable that can be used to change states. I was using this to check whether or not to repeat an animation.

When using AnimationPlayer.onDone() does not take any parameters, nor does it seem to have access to the component variables.

I need to use AnimationBuilder so that I can programatically adjust animation options, however I am not able to trigger state changes by adding expression values to the template HTML I am using with my Animation factory. When I try to add an expression value to HTML that I feed to an AnimationFactory I get:

"ERROR Error: Uncaught (in promise): Error: Found the synthetic listener @moveBall.done" - my question: Are states and triggers not allowed when using AnimationBuilder, AnimationPlayer?

My code looks like the following:

moveBall.component.html:

<div  class="innerwrapper">
   <span class="move" #theBall [@moveBall]="state2" (@moveBall.done)="checkRepeat($event)"></span>
</div>

moveBall.component.ts:

createMoveBall() {

const factory = this._builder.build([
  trigger( 'moveBall', [
  state( 'start', style({
    'margin-left': '0',
  })),
  state ( 'stop', style( {
    'margin-left': '0',
  })),
  transition('start <=> stop',
    animate( '3000ms ease-in', keyframes([
        style({margin: '0 0', offset: 0}),
        style( {margin: '0 calc(100% - 80px)', offset: 0.5}),
        style( {margin: '0 0', offset: 1.0}),
      ]
    )))
])
]);

console.log(JSON.stringify(this.theBall));

this.player = factory.create(this.theBall.nativeElement, {});
console.log();

this.player.play();

}

user8475213
  • 126
  • 4
  • The animation works when are you not binding the event? – Deyvison Souto Aug 23 '17 at 18:32
  • I have two stackblitz that show my problem, I apologize if i'm using terms incorrectly. **[Statically Defined Animation](https://stackblitz.com/edit/angular-alfatk?file=app%2Fmove-ball%2Fmove-ball.component.html)** **[Can Change Speed, can't call .done to check for repeat](https://stackblitz.com/edit/angular-hc84za)** – user8475213 Aug 23 '17 at 22:07
  • @DeyvisonSouto those are two seperate links – user8475213 Aug 23 '17 at 22:16

0 Answers0