i've made a Path with SVG, and i'm making a ball to move along it.
But is there anyway i can control de movement of the ball?
Like, the ball starts stoped, while i press the Right Arrow on the keyboard, the ball moves Clockwise, and when i press the left arrow, the ball moves Counter-Clockwise...
is it possible?
here is the svg code:
<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>
I put my code here: http://jsfiddle.net/fPQv2/
Thanks!!
The best thing i can do, is that i've add this script, so i can pause and unpause the animation... but still not what im looking for....
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);
}
});