AnimationBuilderlink

使用说明link

要使用此服务，请将其作为依赖项添加到你的组件或指令中。该服务与你的组件一起实例化。

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. 使用 build() 方法创建一个用 animate() 函数创建的程序性动画。该方法返回一个 AnimationFactory 实例。

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

2. 使用工厂对象创建 AnimationPlayer 并将其附加到 DOM 元素。

   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:

      
        content_copy
      
      // 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();
  }
}