我不太了解 svg 动画,但我从 a) 点到 b) 点进行了半次旋转动画,持续了 4 秒,我希望在这 4 秒后旋转从 b) 点回到 a) 点,使动画时长为 8 秒。
这是我使用的代码:
<animateTransform accumulate="none" type="rotate" additive="replace" begin="0s;second.end" attributeName="transform" calcMode="linear" dur="4s" restart="indefinite" repeatCount="indefinite" from="90 400.64 160.05" to="30 400.64 160.05" />
您需要使用
keytimes
属性并更新 svg 动画的 values
,如下所示:
<animateTransform
accumulate="none"
type="rotate"
additive="replace"
begin="0s;second.end"
attributeName="transform"
calcMode="linear"
dur="4s"
restart="indefinite"
repeatCount="indefinite"
keyTimes="0; 0.5; 1"
values="90 400.64 160.05; 30 400.64 160.05; 90 400.64 160.05"
/>
这里,
keyTimes
用于告诉动画何时应该达到values
中定义的不同状态。
动画完成后,会继续从头开始播放,因为
restart
和repeatCount
设置为indefinite
。