Javascript Raphael animating a path

Question

I have a path which makes a shape and is able to rotate, but I can't figure out how I can get the shape/path to move down the screen. I have looked at other solutions but I can't seem to get them to work. Thanks.

leftRec = paper.path("M400 50 L380 70 420 90 380 110 420 130 400 150 350 150 350 50z");
leftRec.attr("fill","#f00");
leftRec.animate({transform:"r-70,400,150"}, 2000, "ease-in");

leftRec.animate({cy: 600, cx: 200}, 2000);

So, you would want the shape to rotate and move down the screen or just moving down is enough? — Nandu Kalidindi

Nandu Kalidindi Nandu Kalidindi · Accepted Answer · 2017-11-10T23:24:24

To perform both rotation and translation simultaneously, use the animate method

var leftRec = paper.path("M400 50 L380 70 420 90 380 110 420 130 400 150 350 150 350 50Z");
leftRec.attr("fill","#f00");
leftRec.animate({transform: "T0,500R-90"}, 1000, "ease-in");

To perform rotation first and then translation, make use of the callback in the animate method

var leftRec = paper.path("M400 50 L380 70 420 90 380 110 420 130 400 150 350 150 350 50Z");
leftRec.attr("fill","#f00");
leftRec.animate({transform:"r-90,400,150"}, 1000, "ease-in", function() {
    this.animate({
        path: Raphael.transformPath('M400 50 L380 70 420 90 380 110 420 130 400 150 350 150 350 50Z', 'T-500,0')
    }, 1000);

    // The below approach could have worked in theory but probably the coordinate system change might 
    // tamper with the subsequent transform. I am not so sure.
    // this.animate({transform: "T0,500"}, 1000)
});

In both cases the shape is moved by 500px vertically.

This may not be the best solution, please correct / improve this if there is any better way to accomplish this.

Javascript Raphael animating a path

1 Answers