Question

我用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/

谢谢！

Answer 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);
        }
    });

Answer 2

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

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

意味着您可以按1启动动画，然后按2停止动画。如果您想向后运行动画，则需要另一条路径向前运行，另一条路径动态向右引用该向后路径。 animateMotion可以通过accessKeys反转来启动和停止。我只在Firefox上测试了这个，但我相信这是在Opera上实现的，也可能在其他地方实现。

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

如果你想要更具互动性的东西，那么SMIL不是最好的解决方案，只需使用javascript将球定位在某个x / y位置即可。您可以使用getPointAtLength找出路径上的位置。

Answer 3

如果您想在元素追加页面后立即使用动画，请设置＆＃39;开始＆＃39;到了'无限期＆＃39;并开始动画调用它的.beginElement（）;

var animateMotion = document.createElementNS(SVG_NS, 'animateMotion');
animateMotion.setAttribute('begin', 'indefinite');
//append animateMotion to the page
animateMotion.beginElement();

Answer 4

您可以使用pauseAnimations()并使用setCurrentTime(time)对其进行控制。这些是svg元素的方法。

animateMotion使用脚本控制

4 个答案: