1

I have drawn a box. The first animation makes the box move horizontally and the second one moves the box vertically. But when the second animation is executed the box first comes back to its original position and then animates vertically. What I want is that the box shouldn't come back to its original position and where the first animation ends, the second animation must execute exactly from that position. How can I achieve this? What am I doing wrong?

JS Fiddle Code

window.onload = function (){
    var paper = Raphael(0,0,800,400);

    var hi = paper.rect(10,10,100,30);

    var move1 = Raphael.animation({
        transform:'t100,0'
    },1000);

    var move2 = Raphael.animation({
        transform:'t0,100'
    },1000);

    hi.animate(move1);    
    hi.animate(move2.delay(1000)); 
}​
Mudassir Ali
  • 7,913
  • 4
  • 32
  • 60
rohan_vg
  • 1,087
  • 3
  • 15
  • 27

1 Answers1

3

Hey here's the updated working fiddle

The reason being as you may know small t transforms relative to the current position of the rectangle. By current position it means the x and y attributes of the element, the rectangle in our case.

But the first line in Element.transform says 

 translation doesn’t change x or y of the rectangle
Which means after you perform 't100,0' the x & y attributes of the rectangle is still the initial 10,10 Hence the second animation is executed with respect to 10, 10

Finally, for the result you are expecting, you need to be able to change x & y attributes which can be done as shown in the fiddle....Hope this helps !

Mudassir Ali
  • 7,913
  • 4
  • 32
  • 60
  • you might also consider using Element.translate instead, but Raphael doesn't encourage us to use it... – Mudassir Ali Oct 12 '12 at 05:44
  • thanks for the explanation. now if I want to want to animate it more than twice. lets stay in the following order: right,down,left,up to its original position. how can i do that? – rohan_vg Oct 12 '12 at 12:21
  • 1
    And if you are looking for animating along a path then, follow this thread http://stackoverflow.com/questions/1032541/how-to-animate-a-raphael-object-along-a-path – Mudassir Ali Oct 12 '12 at 13:18
  • that's brilliant... was that specified in the Raphael reference? How did you know about it? I would like to expand my knowledge as well. Thanks :) – rohan_vg Oct 12 '12 at 14:53
  • 1
    It's not specified in the reference, but go through the source code of Demos given on the raphael website when free, which will teach alot of stuff which is not documented... – Mudassir Ali Oct 12 '12 at 15:10