填寫這份《一分鐘調查》,幫我們(開發組)做得更好!去填寫Home

AnimationBuilder

一種可注入服務,可在 Angular 元件或指令中以程式設計的方式產生動畫序列。由 BrowserAnimationsModuleNoopAnimationsModule 提供。

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
}
    

方法

建立一個工廠來產生所定義的動畫。

Builds a factory for producing a defined animation.

See also:

      
      abstract build(animation: AnimationMetadata | AnimationMetadata[]): AnimationFactory
    
引數
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:

  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:

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