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

keyframes

可定義一組動畫樣式,每個樣式都關聯著一個可選的 offset 值。

Defines a set of animation styles, associating each style with an optional offset value.

      
      keyframes(steps: AnimationStyleMetadata[]): AnimationKeyframesSequenceMetadata
    
引數
steps AnimationStyleMetadata[]

一組帶有可選的偏移(offset)資料的動畫樣式。 這個可選的 offset 值為相應的樣式指定一個相對於總體動畫時間的百分比,決定何時應用此樣式。

A set of animation styles with optional offset data. The optional offset value for a style specifies a percentage of the total animation time at which that style is applied.

返回值

一個封裝關鍵幀資料的物件。

AnimationKeyframesSequenceMetadata: An object that encapsulates the keyframes data.

使用說明

animate() 呼叫一起使用。關鍵幀動畫不會直接在當前狀態和目標狀態之間應用動畫,而是描述在動畫弧線的哪個時間點上應用哪個樣式。 詳情參見 CSS 關鍵幀動畫

Use with the animate() call. Instead of applying animations from the current state to the destination state, keyframes describe how each style entry is applied and at what point within the animation arc. Compare CSS Keyframe Animations.

用法

Usage

下面的例子中,偏移值描述了每個 backgroundColor 值應該何時應用上去。開始時的顏色是紅色,在總時間的 20% 處變為藍色。

In the following example, the offset values describe when each backgroundColor value is applied. The color is red at the start, and changes to blue when 20% of the total time has elapsed.

      
      // the provided offset values
animate("5s", keyframes([
  style({ backgroundColor: "red", offset: 0 }),
  style({ backgroundColor: "blue", offset: 0.2 }),
  style({ backgroundColor: "orange", offset: 0.3 }),
  style({ backgroundColor: "black", offset: 1 })
]))
    

如果沒有指定 offset 值,則會自動計算偏移量。

If there are no offset values specified in the style entries, the offsets are calculated automatically.

      
      animate("5s", keyframes([
  style({ backgroundColor: "red" }) // offset = 0
  style({ backgroundColor: "blue" }) // offset = 0.33
  style({ backgroundColor: "orange" }) // offset = 0.66
  style({ backgroundColor: "black" }) // offset = 1
]))