keyTimes

keyTimes 屬性表示用於控制動畫節奏的時間值列表。

列表中的每個時間對應於 values 屬性列表中的一個值，並定義在動畫中何時使用該值。keyTimes 列表中的每個時間值都指定為介於 0 和 1（含）之間的浮點數，表示動畫元素持續時間內的比例偏移量。

您可以將此屬性與以下 SVG 元素一起使用

示例

html,
body,
svg {
  height: 100%;
}

html

<svg viewBox="0 0 120 120" xmlns="http://www.w3.org/2000/svg">
  <circle cx="60" cy="10" r="10">
    <animate
      attributeName="cx"
      dur="4s"
      repeatCount="indefinite"
      values="60; 110; 60; 10; 60"
      keyTimes="0; 0.25; 0.5; 0.75; 1" />
    <animate
      attributeName="cy"
      dur="4s"
      repeatCount="indefinite"
      values="10; 60; 110; 60; 10"
      keyTimes="0; 0.25; 0.5; 0.75; 1" />
  </circle>
</svg>

用法說明

值	`<number>` [ `;` `<number>` ]* `;`?
預設值	無
可動畫	否

keyTimes 屬性的值是一個用分號分隔的值列表。

keyTimes 列表中的值數量必須與 values 列表中的值數量完全相同。

每個後續時間值必須大於或等於前面的時間值。

keyTimes 列表語義取決於插值模式

對於線性和平滑動畫，列表中的第一個時間值必須為 0，列表中的最後一個時間值必須為 1。與每個值關聯的關鍵時間定義了何時設定該值；值在關鍵時間之間進行插值。
對於離散動畫，列表中的第一個時間值必須為 0。與每個值關聯的時間定義了何時設定該值；動畫函式使用該值，直到列表中定義的下一個時間。

如果 calcMode 屬性設定為 paced，則忽略 keyTimes 屬性。

如果動畫持續時間是不確定的，則將忽略任何 keyTimes 規範。

Safari 問題：keyTimes 值應使用分號分隔，分號前不應有空格，例如：keyTimes="0; 0.25; 0.5; 0.75; 1"

規範

規範
SVG 動畫級別 2 # KeyTimesAttribute