keytimes
keyTimes属性是分号分隔的时间值列表，用于控制动画的速率。列表中的每一个时间值对应于values属性列表中的一个值，并定义何时在动画中使用该值。每keyTimes列表中的每个时间值都被指定为介于0和1（含）之间的浮点值，表示与动画元素的持续时间成比例的偏移量。
如果指定了keyTimes列表，则列表中的值必须与keyTimes列表中的值的数目完全相同。
每个后续的时间值必须大于或等于先前的时间值。
该keyTimes列表的语义取决于插值方式：
- 对于线性（linear）和样条线（spline）动画，列表中的第一个时间值必须为0，列表中的最后一个时间值必须为1。与每个值关联的关键时间（key time）定义值何时设置; 值在关键时间之间被内插。
- 对于离散动画，列表中的第一个时间值必须为0。与每个值关联的时间定义值何时设置; 动画函数使用该值直到下一次定义
keyTimes为止。
如果插值模式是paced，则该keyTimes属性被忽略。
如果持续时间不确定，则任何keyTimes规格都将被忽略。
用法上下文
Categories | Animation value attribute |
|---|---|
Value | <list> |
Animatable | No |
Normative document | 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属性
<animate>
<animatecolor>
<animatemotion>
<animatetransform>
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
