跳转到:

« SVG 属性参考主页

keyTimes属性是一个以分号分隔的时间值列表,用于控制动画的执行步骤。列表中的每个值与values中的值一一对应,定义了values中的值在动画中何时执行,keyTimes列表中的每一个值都是指定在[0-1]之间的浮点数,表示动画的完成时间。

如果指定了keyTimes列表,那么一定有与之完全对应的values列表。

每一个连续的时间值必须大于等于前一个时间值。

keyTimes列表的语义取决于插值模式:

  • 对于linear(线性)和spline(样条)动画,列表中的第一个时间值必须为0,列表的最后一个时间值必须为1。与每个value关联的时间值定义了何时设置该value,该value在keyTimes的时间 值的中间插值。
  • 对于discrete(离线)动画,列表中的第一个值必须为0。与每个value关联的时间值定义了何时设置该value,动画函数使用该value,直到keyTimes中定义的下一个时间值。

 

 

 

如果插值模式是paced(踏步),keyTimes属性被忽略。

如果duration(持续时间)不确定,则将忽略任何keyTimes规范。

用法

类别 动画值属性
<list>
可变性 No
规范文档 SVG 1.1 (2nd Edition)

示例

<?xml version="1.0"?>
<svg width="120" height="120"  
     viewPort="0 0 120 120" version="1.1"
     xmlns="http://www.w3.org/2000/svg">
 
    <circle cx="60" cy="10" r="10">
 
        <animate attributeName="cx"
                 attributeType="XML"
                 dur="4s"
                 values="60 ; 110 ; 60 ; 10 ; 60"
                 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
                 repeatCount="indefinite"/>
 
        <animate attributeName="cy"
                 attributeType="XML"
                 dur="4s"
                 values="10 ; 60 ; 110 ; 60 ; 10 "
                 keyTimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"
                 repeatCount="indefinite"/>
 
    </circle>
</svg>

元素

以下元素可以使用 keyTimes属性

文档标签和贡献者

标签: 
此页面的贡献者: ZhenhuaChen
最后编辑者: ZhenhuaChen,