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

animate

定義一個動畫步驟,它把一些樣式資訊和時序資訊組合在一起。

Defines an animation step that combines styling information with timing information.

      
      animate(timings: string | number, styles: AnimationStyleMetadata | AnimationKeyframesSequenceMetadata = null): AnimationAnimateMetadata
    
引數
timings string | number

為父動畫設定 AnimateTimings。它的字串格式為 "持續時間 [延遲][緩動效果]"。

Sets AnimateTimings for the parent animation. A string in the format "duration [delay][easing]".

  • 持續時間和延遲都用一個動畫和一個可選的時間單位來表示,比如 "1s" 代表一秒,"10ms" 代表十毫秒。 預設單位是毫秒。

    Duration and delay are expressed as a number and optional time unit, such as "1s" or "10ms" for one second and 10 milliseconds, respectively. The default unit is milliseconds.

  • 緩動效果的值控制該動畫在執行期間如何加速和減速。它的取值是 easeease-inease-outease-in-out 之一或一個 cubic-bezier() 函式呼叫。 如果未提供,則沒有緩動效果。

    The easing value controls how the animation accelerates and decelerates during its runtime. Value is one of ease, ease-in, ease-out, ease-in-out, or a cubic-bezier() function call. If not supplied, no easing is applied.

比如,字串 "1s 100ms ease-out" 指定了一個 1000 毫秒的持續時間,一個 100 毫秒的延遲和一個 "ease-out" 緩動效果,它會快結束時減速。

For example, the string "1s 100ms ease-out" specifies a duration of 1000 milliseconds, and delay of 100 ms, and the "ease-out" easing style, which decelerates near the end of the duration.

styles AnimationStyleMetadata | AnimationKeyframesSequenceMetadata

為父動畫設定動畫樣式。 呼叫 style()keyframes() 函式會返回要應用於父動畫中的一組 CSS 樣式, 如果為 null,則使用目標狀態中的樣式,當描述一個某個動畫的最後一步時,這很有用。 參見 transitions() 中對"播放到最終狀態"的說明。

Sets AnimationStyles for the parent animation. A function call to either style() or keyframes() that returns a collection of CSS style entries to be applied to the parent animation. When null, uses the styles from the destination state. This is useful when describing an animation step that will complete an animation; see "Animating to the final state" in transitions().

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

一個用於封裝動畫步驟的物件。

AnimationAnimateMetadata: An object that encapsulates the animation step.

使用說明

在一個 sequence()(動畫序列)、group()(動畫分組)或 transition()(轉場動畫)中呼叫本函式, 以定義一個動畫步驟,來把指定的樣式資料在父動畫上播放指定的時長。

Call within an animation sequence(), group(), or transition() call to specify an animation step that applies given style data to the parent animation for a given amount of time.

語法範例

Syntax Examples

時序範例

Timing examples

下面的例子展示了各種 timings(時序)規範。

The following examples show various timings specifications.

  • animate(500):持續 500 毫秒。

    animate(500) : Duration is 500 milliseconds.

  • animate("1s"):持續 1000 毫秒。

    animate("1s") : Duration is 1000 milliseconds.

  • animate("100ms 0.5s"):持續 100 毫秒,延遲 500 毫秒。

    animate("100ms 0.5s") : Duration is 100 milliseconds, delay is 500 milliseconds.

  • animate("5s ease-in"):持續 5000 毫秒,緩動進入(ease-in)。

    animate("5s ease-in") : Duration is 5000 milliseconds, easing in.

  • animate("5s 10ms cubic-bezier(.17,.67,.88,.1)"):持續 5000 毫秒,延遲 10 毫秒,基於一條 Bezier 曲線進行緩動。

    animate("5s 10ms cubic-bezier(.17,.67,.88,.1)") : Duration is 5000 milliseconds, delay is 10 milliseconds, easing according to a bezier curve.

樣式範例

Style examples

下面的例子呼叫 style() 來設定單個的 CSS 樣式。

The following example calls style() to set a single CSS style.

      
      animate(500, style({ background: "red" }))
    

下面的例子呼叫 keyframes() 來為各個相鄰的關鍵幀分別設定 CSS 樣式。

The following example calls keyframes() to set a CSS style to different values for successive keyframes.

      
      animate(500, keyframes(
 [
  style({ background: "blue" }),
  style({ background: "red" })
 ])