Help Angular by taking a 1 minute survey!Go to surveyHome

AnimationBuilder

An injectable service that produces an animation sequence programmatically within an Angular component or directive. Provided by the BrowserAnimationsModule or NoopAnimationsModule.

      
      abstract class AnimationBuilder {
  abstract build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory
}
    

Methods

Builds a factory for producing a defined animation.

See also:

abstract build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory
      
      abstract build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory
    
Parameters
animation AnimationMetadata | AnimationMetadata[]

A reusable animation definition.

Returns

AnimationFactory: A factory object that can create a player for the defined animation.

Usage notes

To use this service, add it to your component or directive as a dependency. The service is instantiated along with your component.

Apps do not typically need to create their own animation players, but if you do need to, follow these steps:

  1. Use the build() method to create a programmatic animation using the animate() function. The method returns an AnimationFactory instance.

  2. Use the factory object to create an AnimationPlayer and attach it to a DOM element.

  3. Use the player object to control the animation programmatically.

For example:

// import the service from BrowserAnimationsModule import {AnimationBuilder} from '@angular/animations'; // require the service as a dependency class MyCmp { constructor(private _builder: AnimationBuilder) {} makeAnimation(element: any) { // first define a reusable animation const myAnimation = this._builder.build([ style({ width: 0 }), animate(1000, style({ width: '100px' })) ]); // use the returned factory object to create a player const player = myAnimation.create(element); player.play(); } }
      
      
  1. // import the service from BrowserAnimationsModule
  2. import {AnimationBuilder} from '@angular/animations';
  3. // require the service as a dependency
  4. class MyCmp {
  5. constructor(private _builder: AnimationBuilder) {}
  6.  
  7. makeAnimation(element: any) {
  8. // first define a reusable animation
  9. const myAnimation = this._builder.build([
  10. style({ width: 0 }),
  11. animate(1000, style({ width: '100px' }))
  12. ]);
  13.  
  14. // use the returned factory object to create a player
  15. const player = myAnimation.create(element);
  16.  
  17. player.play();
  18. }
  19. }