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使用腳本控制

回答

相關問題