4

<animateMotion>我正在尝试通过使用keyTimes="…"andkeyPoints="…"属性在 SVG 上使用非线性动画速率。它似乎不起作用：动画运动尽可能线性。

这是测试文件试试吧！

<svg xmlns="http://www.w3.org/2000/svg" xmlns:x="http://www.w3.org/1999/xlink"
     viewBox="0 0 300 200">
  <style>
    path   { stroke:#999 }
    circle { fill-opacity:0.5; stroke:black }
  </style>
  <path   id="p" d="M30,160 L270,40" />
  <circle id="c" r="5" />
  <animateMotion x:href="#c" fill="freeze"
    dur="10s"
    keyTimes="0;0.1;1"
    keyPoints="0;0.9;1">
    <mpath x:href="#p" />
  </animateMotion>
</svg>

工作时，球应在第一秒内沿路径移动 90%，并在剩余 9 秒内移动最后 10%。我需要改变什么才能让它工作？

我在网上找到了另一个可以正常工作的示例，因此我知道这不是我的操作系统/浏览器/版本有问题。

（FWIW：Win7x64，Chrome30）

4

2 回答 2

5

我发现了我的错误。尽管默认值calcMode是linear——这是我想要的——我没有深入阅读规范，看它是一个不同的默认值<animateMotion>元素

添加一个明确calcMode="linear"的解决问题。

于 2013-08-08T23:07:49.613 回答
4

动画运动的默认calcmode值paced不是linear；

http://www.w3.org/TR/SVG/animate.html#AnimateMotionElement

并且，如果指定了 calcmode = "paced"，则任何 'keyTimes' 或 'keySplines' 都将被忽略。

http://www.w3.org/TR/SVG/animate.html#CalcModeAttribute；

这就是为什么你没有得到想要的输出......

于 2013-08-10T10:41:16.333 回答