关键时间
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 |