keyTimes

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>

用法说明

值 <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