Raphael element.animate(…) - Specify a callback to be executed at every step of animation

Question

Using Raphael I have to move some circles (nodes) with some lines (edges) connected. When I change the (cx,cy) properties of a circle, I have to refresh the lines connected to that circle (using a refresh function).

Without animation, all is fine

circle.attr({
  cx : newCx,
  cy : newCy
})
refreshEdges()

Now, if I want to use animation...

circle.animate({
  cx : newCx,
  cy : newCy
},1000)

...the circle starts to move and reach the final position in 1000ms. But during the animation, the lines (edges) connected to that circle are not moving because the refresh funcion is not called.

So the question is: There is a way to specify to .animate() a sort of "step" callback that Raphael will call at each step of the animation?

I know that with jQuery that step callback can be specified as a parameter of .animate()...I hope there will be a way to do it also with Raphael :)

Thank you!!

Answer 1

Have you tried using animateWith on your lines connected to the circle? You might be able to use this to solve your issue. Though I'm not sure what the code is for your refreshEdges() so it may not be possible to use this.

Answer 2

I've finally come up with this solution...using jQuery.animate() on a fake DIV element with fake css properties!

$("<div></div>")
.css({      // set initial animation values using "animX", "animY" fake css props
    'animX': circle.attr("cx"),
    'animY': circle.attr("cy")
})
.animate({  // set final animation values using "animX", "animY" fake css props
    'animX': newCx,
    'animY': newCy
}, {
    duration : 1000,
    step : function(now,fx){
        if (fx.prop == 'animX')
            circle.attr("cx", now )
        if (fx.prop == 'animY')
            circle.attr("cy", now )
        circle.refreshEdges()
    }
})

For further info, specially on the step function, read http://api.jquery.com/animate/

Bye!!

Answer 3

I am new to HTML5 and Raphael, but managed to get the callback working by trial and error:

var rect = r.rect(300, 385, 30, 100, 2).attr({
    fill: '#000',
    transform: t,
    "fill-opacity": .2
}).toFront().click(function () {
    s.animate({ transform: t, stroke: c }, 2000, "bounce", function () {
        //console.log('muhammad s.a.w');
    });
});