keyTimes - SVG 编辑

« 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规范。

用法

示例

<?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属性

• <animate>
• <animateColor>
• <animateMotion>
• <animateTransform>