SVG 动画向后

Question

我不太了解 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"  />

Answer 1

您需要使用

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

。