How to use Raphael .animateWith()

congio

New Member
Has anyone used \[code\].animateWith()\[/code\] in Raphael to successfully keep fast animations in sync? It is poorly documented. The library's creator has a video demonstration but no code I can find.I have a Javascript metronome that consists of a line (the arm of the metronome) and a trapezoidal shaped "weight" that will eventually move up and down to signify tempo. I have a working fiddle here, and the lines in question are:\[code\] var ticktock = Raphael.animation({ "50%": { transform:"R20 " + x + "," + y, easing: "sinoid", callback: function() { tick(this, repeats, done); }}, "100%": { transform:"R-20 " + x + "," + y, easing: "sinoid", callback: function() { tick(this, repeats, done); }} }, interval).repeat(repeats / 2); arm.animate(ticktock); weight.animateWith(arm, ticktock, ticktock); \[/code\]If you check out the fiddle and give it a high tempo and about 20 ticks, you should see the weight lag behind the arm. (Please try it a few times if not -- Murphy's Law etc.) I thought this was precisely what animateWith() prevented. Maybe I am using it incorrectly.If you look at the Raphael source for the .animateWith() function, you see it syncs the .start param of each animation, FWIW.
 
Top