结合使用animateMotion和keyTimes / keyPoints

问题描述

我正在尝试在SVG上使用非线性动画速率通过使用和属性。它似乎不起作用：动画运动是尽可能线性的。

I am trying to use non-linear animation rate on an SVG <animateMotion> by using the keyTimes="…" and keyPoints="…" attributes. It does not appear to be working: the animation motion is as linear as can be.

这里是测试文件

Here's the test file

<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％，最后移动10在剩余的9秒内％。我需要进行哪些更改才能使其正常工作？

When working the ball should move 90% along the path in the first second, and move the final 10% in the remaining 9 seconds. What do I need to change to get this to work?

我已经找到正常运行，因此我知道不是我的操作系统/浏览器/版本有问题。

I've found another example online that is working correctly, so that I know it's not my OS/browser/version at fault.

推荐答案

我发现了我的错误。即使 calcMode 的默认值是 linear （这就是我想要的），但我对这方面的了解还不够可以看到它是< animateMotion> 元素的不同默认值。

I found my mistake. Even though the default value for calcMode is linear—which is what I want—I didn't read far enough into the spec to see that it's a different default value for <animateMotion> elements.

添加一个明确的 calcMode = linear 可以解决此问题。

Adding an explicit calcMode="linear" fixes the problem.

这篇关于结合使用animateMotion和keyTimes / keyPoints的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！