class
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 }
build() | |||
---|---|---|---|
Builds a factory for producing a defined animation. See also:
| |||
|
animation | AnimationMetadata | AnimationMetadata[] | A reusable animation definition. |
AnimationFactory
: A factory object that can create a player for the defined animation.
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 build()
method to create a programmatic animation using the animate()
function. 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 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(); } }
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://v10.angular.io/api/animations/AnimationBuilder