3

我用 SVG 制作了一条路径，我正在制作一个球来沿着它移动。

但是无论如何我可以控制球的运动吗？

就像，球开始停止，当我按下键盘上的右箭头时，球顺时针移动，当我按下左箭头时，球逆时针移动......

可能吗？

这是svg代码：

<svg width="800" height="800" viewBox="0 0 800 800" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">

<!-- Draw the outline of the motion path in grey, along
     with 2 small circles at key points -->
<path d="M66,89.32c18,143,154,82,97,118s-187,38-152,102s114,105,163,74
s89-111,89-127s18-128,13-155s-29-67-57-80s-47-14-62-17s-17-8-32,0s-40,23-47,30s-11,20-16,24s-14,29-14,29L66,89.32z" stroke="lightgrey" stroke-width="2" fill="none" id="theMotionPath"/>

<!-- Here is a red circle which will be moved along the motion path. -->
<circle cx="" cy="" r="5" fill="red">

    <!-- Define the motion path animation -->
    <animateMotion dur="6s" repeatCount="indefinite">
       <mpath xlink:href="#theMotionPath"/>
    </animateMotion>
</circle>

我把我的代码放在这里：http: //jsfiddle.net/fPQv2/

谢谢！！

4

4 回答 4

1

我能做的最好的事情是我已经添加了这个脚本，所以我可以暂停和取消暂停动画......但仍然不是我想要的......

var pause = document.getElementById('draw');
var unPause = document.getElementById('draw');

function parar(){
    pause.pauseAnimations();
}
function voltar(){
    unPause.unpauseAnimations();
}

    $(window).keydown(function (e) {
        if (e.keyCode == 39) {
            setTimeout(voltar,10);
            setTimeout(parar,500);
        }
    });
于 2013-04-26T15:53:08.310 回答
0

您可以使用 accessKey 但仅适用于转换为字符的键。比如改成这个...

    <animateMotion begin="accessKey(1)" end="accessKey(2)" dur="6s" repeatCount="indefinite">
       <mpath xlink:href="#theMotionPath"/>
    </animateMotion>

意味着您可以通过按 1 开始动画并通过按 2 停止动画。如果您想向后运行动画，您需要另一条向后运行的路径和另一个指向该向后路径的 animateMotion。animateMotion 可以在 accessKeys 反转的情况下开始和停止。我只在 Firefox 上对此进行了测试，但我相信这已在 Opera 和其他地方实现。

请注意，如果没有脚本，您将无法暂停动画，因此当您按下访问键时，您会看到动画再次从头开始。如果要暂停，则需要在按下键时在父元素上调用pauseAnimations() 。<svg>

如果您想要更具交互性的东西，那么 SMIL 不是最好的解决方案，只需使用 javascript 将球定位在某个 x/y 位置。您可以使用getPointAtLength来确定它应该去的路径。

于 2013-04-26T14:11:56.193 回答
0

您可以使用pauseAnimations()和控制它setCurrentTime(time)。这些是 svg 元素的方法。

于 2019-06-07T15:28:53.690 回答
0

如果您希望在元素附加页面后立即进行动画，请将“开始”设置为“不确定”并开始动画调用其 .beginElement();

var animateMotion = document.createElementNS(SVG_NS, 'animateMotion');
animateMotion.setAttribute('begin', 'indefinite');
//append animateMotion to the page
animateMotion.beginElement();
于 2016-09-05T06:36:27.653 回答