關鍵時間
keyTimes 屬性表示一個用於控制動畫節奏的時間值列表。
列表中的每個時間點對應 values 屬性列表中的一個值，並定義該值在動畫中何時被使用。keyTimes 列表中的每個時間值都指定為一個介於 0 和 1（包含）之間的浮點數，表示動畫元素持續時間內的比例偏移。
你可以將此屬性與以下 SVG 元素一起使用
示例
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>
用法說明
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 |