Question

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

这是测试文件^{try it!}

<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％。我需要做些什么才能让它发挥作用？

我发现another example online工作正常，所以我知道这不是我的操作系统/浏览器/版本错误。

_{（FWIW：Win7x64，Chrome30）}

Answer 1

我发现了自己的错误。即使calcMode的默认值为linear - 这就是我想要的 - 我没有仔细阅读规范，看到它是不同的默认值<animateMotion>元素。

添加明确的calcMode="linear"可以解决问题。

Answer 2

动画动作的默认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;

这就是为什么你没有得到所需的输出......

使用animateMotion以及keyTimes / keyPoints

2 个答案: