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

animation

產生一個可複用的動畫,可以在其它動畫或序列中透過 useAnimation() 函式進行呼叫。

Produces a reusable animation that can be invoked in another animation or sequence, by calling the useAnimation() function.

      
      animation(steps: AnimationMetadata | AnimationMetadata[], options: AnimationOptions = null): AnimationReferenceMetadata
    
引數
steps AnimationMetadata | AnimationMetadata[]

一個或多個由 animate()sequence() 函式返回的動畫物件,用於描述從一個狀態到另一個狀態的轉變過程。 當傳入一個數組時,預設當做一個動畫序列使用。

One or more animation objects, as returned by the animate() or sequence() function, that form a transformation from one state to another. A sequence is used by default when you pass an array.

options AnimationOptions

一個配置物件,可以包含一個開始動畫之前的延遲值,和一些由開發人員定義的引數。在這些引數中提供的值會被用作樣式的預設值, 在呼叫時呼叫者可以重寫這些值。

An options object that can contain a delay value for the start of the animation, and additional developer-defined parameters. Provided values for additional parameters are used as defaults, and override values can be passed to the caller on invocation.

可選. 預設值是 `null`.
返回值

一個封裝了動畫資料的物件。

AnimationReferenceMetadata: An object that encapsulates the animation data.

使用說明

下面的例子定義了一個可複用的動畫,提供了一些預設的引數值。

The following example defines a reusable animation, providing some default parameter values.

      
      var fadeAnimation = animation([
  style({ opacity: '{{ start }}' }),
  animate('{{ time }}',
  style({ opacity: '{{ end }}'}))
  ],
  { params: { time: '1000ms', start: 0, end: 1 }});
    

下面的例子透過 useAnimation() 執行了一個已定義的動畫,並傳入了一些引數值來改寫預設引數。

The following invokes the defined animation with a call to useAnimation(), passing in override parameter values.

      
      useAnimation(fadeAnimation, {
  params: {
    time: '2s',
    start: 1,
    end: 0
  }
})
    

如果本呼叫傳入的引數中缺少了任何一個引數值,則會使用其預設值代替。 如果在某個動畫步驟開始播放前缺少了一個或多個引數值,則會丟擲一個錯誤。

If any of the passed-in parameter values are missing from this call, the default values are used. If one or more parameter values are missing before a step is animated, useAnimation() throws an error.