animateMotion Контроль со сценарием

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, которое ссылается на этот обратный путь. Это animateMotion может начинаться и останавливаться с обратным доступом accessKeys. Я только тестировал это на Firefox, но я считаю, что это реализовано в Opera и, возможно, в другом месте.

Обратите внимание, что без создания сценариев вы не можете приостанавливать анимацию, поэтому, когда вы нажимаете клавиши доступа, вы снова увидите перезапуск анимации с начала. Если вы хотите приостановить, вам нужно будет позвонить pauseAnimations() на родительский элемент <svg>, когда нажата клавиша.

Если вы хотите что-то более интерактивное, то SMIL не лучшее решение, просто поместите мяч в какое-то место x/y с помощью javascript. Вы можете использовать getPointAtLength, чтобы выяснить, на каком пути он должен идти.

Answer 3

если вы хотите анимировать, как только элемент append page, установите «begin» на «неопределенный» и запустите анимированный вызов его .beginElement();

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