SVG keyTimes 属性

SVG keyTimes 属性指定动画中每个关键帧的时间值。它的值是一个逗号分隔的数字列表，每个数字代表相应关键帧的时间值，范围为0到1。

语法

<animate attributeName="属性名"
    values="起始值; 结束值"
    keyTimes="时间1; 时间2; 时间3"
    dur="动画持续时间"
    repeatCount="重复次数" />

属性值

• 时间 - 一个半角逗号分隔的数字列表，代表每个关键帧的时间值。第一个时间值默认为0，最后一个时间值默认为1。
• 时间值可以使用小数或分数表示。例如，表示动画的50%可以写为0.5或1/2。

例子

<svg width="100%" height="100%">
    <rect x="50" y="50" width="100" height="100">
        <animate attributeName="x" 
            values="50; 150; 50" 
            keyTimes="0; 0.5; 1" 
            dur="3s" 
            repeatCount="indefinite" />
    </rect>
</svg>

上面的例子表示在3秒内，每一秒的50%时间内矩形的x坐标分别从50到150再到50。

注意事项

• 时间值必须与values值的数量相等。
• 时间值必须以升序排列。
• 时间值必须在0到1之间，第一个时间值为0，最后一个时间值为1。
• 如果keySplines 属性被设置，keyTimes的顺序再控制点定义的顺序之前无关紧要。

SVG keyTimes 属性可以帮助我们更好地控制动画的播放。需要注意的是，关键帧之间的变化方式通过keySplines属性可以更好地控制。