How to combine Raphael animations?

Question

The idea is to have two Raphael objects moving together, while one of them is rotating. In the example below, I created two animations - one for the translation, and one for rotation, but I didn't have any luck getting them to work.

var paper = Raphael(0,0,800,400);
var body  = paper.rect(10,10,50,30);
var leg   = paper.rect(30,35,10,30);

// translation - should be applied to both body and leg
var translation_anim = Raphael.animation( {transform: "t300,0"}, 2000 );

// rotation - to be applied to the leg only
var rotation_anim = Raphael.animation( {
    "50%":  { transform: "R" +    (45).toString() },
    "100%": { transform: "R" + (-1*45).toString() }
}, 2000);

body.animate(translation_anim);
leg.animateWith(body,rotation_anim,translation_anim);

Fiddle: http://jsfiddle.net/hx22d/

tried my hardest to fix this, have a look at this answer and see if it helps - http://stackoverflow.com/questions/15886606/how-to-use-raphael-animatewith — Neil, Jun 11 '13 at 11:29
@Neil, I did spend quite some time looking at the answer and corresponding fiddle, but in that case you have the same parameters for both animations. It would be the same problem as mine if you also wanted the weight to rotate around it's center, _in addition_ to moving synchronized with the arm. — Mihai Rotaru, Jun 11 '13 at 12:09

score 1 · Accepted Answer · answered Jun 13 '13 at 14:47

Fiddle: http://jsfiddle.net/hx22d/4/

Here is the updated code:

var paper = Raphael(0,0,800,400);
var body  = paper.rect(10,10,50,30);
var leg   = paper.rect(30,35,10,30);

var translation_anim = Raphael.animation({transform: "t300,0"}, 2000);

var rotation_anim = Raphael.animation({
    "50%": { transform: "r45 T150,0"},
    "100%": { transform: "r-45 T300,0"}
}, 2000);

body.animate(translation_anim);
leg.animateWith(body,translation_anim,rotation_anim);

There was a small syntax error in you code on the last line.

leg.animateWith(body, rotation_anim, translation_anim)

The correct syntax according to Raphael.js documentation is:

element.animateWith(element_to_sync_with, animation_to_sync_with, animation)

-> leg.animateWith(body, translation_anim, rotation_anim)

Hope this helps.

How to combine Raphael animations?

1 Answers1