{ "id": "api/animations/AnimationBuilder", "title": "AnimationBuilder", "contents": "\n\n
\n
\n
\n \n API > @angular/animations\n
\n
\n mode_edit\n code\n
\n
\n \n
\n

AnimationBuilderlink

\n \n \n \n \n \n
\n \n \n\n
\n \n
\n

An injectable service that produces an animation sequence programmatically within an\nAngular component or directive.\nProvided by the BrowserAnimationsModule or NoopAnimationsModule.

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

Methodslink

\n \n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n \n \n
\n
\n

\n build()\n \n link

\n
\n mode_edit\n code\n
\n
\n
\n

Builds a factory for producing a defined animation.

\n\n

See also:

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

A reusable animation definition.

\n\n
\n\n \n
Returns
\n

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

\n\n \n\n\n \n\n \n
\n
\n\n \n
\n\n\n\n \n
\n

Usage noteslink

\n

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

\n

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

\n
    \n
  1. \n

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

    \n
    2. \n
  2. \n

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

    \n
    3. \n
  3. \n

    Use the player object to control the animation programmatically.

    \n
    4. \n
\n

For example:

\n\n// import the service from BrowserAnimationsModule\nimport {AnimationBuilder} from '@angular/animations';\n// require the service as a dependency\nclass MyCmp {\n constructor(private _builder: AnimationBuilder) {}\n\n makeAnimation(element: any) {\n // first define a reusable animation\n const myAnimation = this._builder.build([\n style({ width: 0 }),\n animate(1000, style({ width: '100px' }))\n ]);\n\n // use the returned factory object to create a player\n const player = myAnimation.create(element);\n\n player.play();\n }\n}\n\n\n
\n\n\n\n
\n
\n\n\n" }