Question

I tried following this http://net.tutsplus.com/tutorials/javascript-ajax/an-introduction-to-the-raphael-js-library/ tutorial, but it does not work exactly with Raphael 2.0. I worked around it for most parts, but I’m lost at step 8.

All I want to do is animate some circles by some variable-values…
My Problem is basically this:

paper.rect(250,250,20,20).animate({transform: "t0,100"}, 2000); //works
paper.circle(250,250,20).animate({transform: "t0,100"}, 2000); //works

paper.rect(250,250,20,20).animate({x:250,y:250+100}, 2000); //works
paper.circle(250,250,20).animate({x:250,y:250+100}, 2000); // doesn't work
paper.circle(250,250,20).animate({x:250,y:350}, 2000);    // doesn't work either

var someTrans = 100;

paper.rect(250,250,20,20).animate({transform: "t0,someTrans"}, 2000); //doesn't work
paper.circle(250,250,20).animate({transform: "t0,someTrans"}, 2000); //doesn't work

paper.rect(250,250,20,20).animate({x:250,y:250+someTrans}, 2000); //works
paper.circle(250,250,20).animate({x:250,y:250+someTrans}, 2000); // doesn't work

Can someone please give me a nudge in the right direction?
Since Raphael changed its transfrom-behaviour from version to version it’s kind of hard to find it on my own… -.-

(Can’t really understand why circle behaves so differently from rect anyway… doesn’t make much sense to me… =/
I’m using Opera 11.52 in case that makes any difference…?)

Answer 1

The variable does not get automatically replaced. You need to concatenate the string and the number, like this:

paper.rect(250,250,20,20).animate({transform: "t0," + someTrans}, 2000); //doesn't work
paper.circle(250,250,20).animate({transform: "t0," + someTrans}, 2000); //doesn't work

And for the circles: You have to speciy all three properties x, y and r, then the animation works. Try:

paper.circle(50,50,40).animate({cx:100,cy:100,r:100},1000)

on the RaphaelJs Playground