animateMotion使用脚本控制

我用SVG制作了一个Path，我正在制作一个球来移动它。animateMotion使用脚本控制

但有反正我能控制球的运动去？

一样，球开始采空，而我按下右箭头键在键盘上，球顺时针方向移动，当我按下左箭头，球移动逆时针...

是有可能？

下面是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/

谢谢！

来源

2013-04-25 efdutra

我能做的最好的事情，就是我已经加入这个脚本，这样我就可以暂停和取消暂停动画...但仍然没有什么即时寻找....

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-26 15:53:08 efdutra

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

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

意味着你可以通过按1开始播放动画，按2键停止它，如果你想运行动画向后你需要它运行回到另一个路径前面和另一个animateMotion是指向后的路径。 animateMotion可以通过accessKeys启动和停止。我只在Firefox上测试过，但我相信这是在Opera上实现的，也可能在其他地方实现。

注意，没有脚本，当你按下快捷键不能暂停动画，所以你会再次开始看到动画重新启动。如果你想暂停，你需要在按下按键时在父元素<svg>上调用pauseAnimations()。

如果你想要的东西更多的互动，然后SMIL是不是最好的解决方案，只需使用JavaScript定位球的一些X/Y位置。你可以使用getPointAtLength找出它应该走的路径。

来源

2013-04-26 14:11:56

感谢那个男人！但是我真正需要做的就像......一步一步......就像......我按（1），球像“1frame”一样移动并暂停...... 继续下去。 ... – efdutra 2013-04-26 15:29:02

如果只要元素追加页面，你就需要动画，将'begin'设置为'indefinite'并开始animate的调用它的.beginElement（）;

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

来源

2016-09-05 06:36:27 PeakFish

animateMotion使用脚本控制

回答

相关问题