linkAnimationBuilder

linkDescription

AnimationBuilder is an injectable service that is available when the BrowserAnimationsModule or NoopAnimationsModule modules are used within an application.

The purpose if this service is to produce an animation sequence programmatically within an angular component or directive.

Programmatic animations are first built and then a player is created when the build animation is attached to an element.

      
        content_copy
      
      // remember to include the BrowserAnimationsModule module for this to work...
import {AnimationBuilder} from '@angular/animations';

class MyCmp {
  constructor(private _builder: AnimationBuilder) {}

  makeAnimation(element: any) {
    // first build the animation
    const myAnimation = this._builder.build([
      style({ width: 0 }),
      animate(1000, style({ width: '100px' }))
    ]);

    // then create a player from it
    const player = myAnimation.create(element);

    player.play();
  }
}
    

When an animation is built an instance of AnimationFactory will be returned. Using that an AnimationPlayer can be created which can then be used to start the animation.