1

I was trying to rotate the object by a variable number of degrees to represent a dial. As the first step I tried doing the following: 

window.onload = function() {  
    var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);  
    var circle = paper.circle(100, 100, 80);  
var arrow = paper.path("M 100 100 l -56.5 56.5 z"); 
    arrow.attr({stroke: '#0a0', 'stroke-width': 3});

    for(var i=0;i<=100; i+=1){
         rotate_cw(arrow);
    }

}  

function rotate_cw (element){
element.animate({transform:"r-1,100,100"}, 10); 
}

The animate works by itself but I am unable to make it work with an external function. Any solutions or workarounds?

user56reinstatemonica8
  • 32,576
  • 21
  • 101
  • 125
Superios
  • 77
  • 1
  • 1
  • 9

1 Answers1

1

Your code works - the animation is happening and the function works - but it doesn't look like it works for two reasons:

  • Raphael transforms are absolute, not relative. So, it rotates to one degree, then rotates to the same position. You're not telling it to rotate by one degree 100 times, you're telling it to rotate to one degree 100 times.
    • Fix this by keeping track of the rotation position, and incrementing it.
  • The for loop just happens, more or less instantaneously. So after you fix the first problem, you'll find the animations just jump to the end, regardless of the 10 milisecond delay, because they are all called at more or less the same time. It calls the function 100 times in the space of barely 1 milisecond, and each function call takes 10 ms to animate, so it's reached the end of the 100th rotation in less than 11 miliseconds - not the 1000 miliseconds you probably want.
    • Fix this by calling the next animation in Raphael's animate callback parameter

Here's an example that I think is more like what you were hoping for:

http://jsbin.com/oxufuh/1/edit

user56reinstatemonica8
  • 32,576
  • 21
  • 101
  • 125
  • Just to clarify could you explain what you were doing with element.data in the first few lines of function rotate_cw? – Superios Jul 10 '13 at 15:09
  • 1
    `element.data()` lets you attach arbitrary data to a Raphael element, so you can easily look up its rotate position any time any place. The 'rotate' in `element.data('rotate')` is just the arbitrary name for this stored data, could be `element.data('bob',"Bob Smith");` or whatever. [More on storing custom data/attributes in Raphael here](http://stackoverflow.com/a/9418963/568458). – user56reinstatemonica8 Jul 10 '13 at 15:18
  • No prob. p.s. you can upvote answers that you find helpful to show that they are useful. – user56reinstatemonica8 Jul 10 '13 at 15:35