@angular/animations

AnimationBuilder

Class

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

API

  
    abstract class AnimationBuilder {}

build

AnimationFactory

Builds a factory for producing a defined animation.

@paramanimationAnimationMetadata | AnimationMetadata[]

A reusable animation definition.

@returnsAnimationFactory

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:

Use the AnimationBuilder.build() method to create a programmatic animation. The method returns an AnimationFactory instance.
Use the factory object to create an AnimationPlayer and attach it to a DOM element.
Use the player object to control the animation programmatically.

For example:

          // import the service from BrowserAnimationsModuleimport {AnimationBuilder} from '@angular/animations';// require the service as a dependencyclass 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();  }}