How to animate both rotation and transformation in Raphaël

I'm trying to do something I thought would be rather simple. I've an object that I move around stepwise, i.e. I receive messages every say 100 milliseconds that tell me "your object has moved x pixels to the right and y pixels down". The code below simulates that by moving that object on a circle, but note that it is not known in advance where the object will be heading in the next step.

Anyway, that is pretty simple. But now I want to also tell the object, which is actually a set of subobjects, that it is being rotated.

Unfortunately, I am having trouble getting Raphaël to do what I want. I believe the reason is that while I can animate both translation and rotation independently, I have to set the center of the rotation when it starts. Obviously the center of the rotation changes as the object is moving.

Here's the code I'm using and you can view a live demo here. As you can see, the square rotates as expected, but the arrow rotates incorrectly.

// c&p this into http://raphaeljs.com/playground.html

var WORLD_SIZE = 400,
    rect = paper.rect(WORLD_SIZE / 2 - 20, 0, 40, 40, 5).attr({ fill: 'red' }),
    pointer = paper.path("M 200 20 L 200 50"),
    debug = paper.text(25, 10, ""),
    obj = paper.set();

obj.push(rect, pointer);

var t = 0,
    step = 0.05;

setInterval(function () {
    var deg = Math.round(Raphael.deg(t)开发者_C百科);

    t += step;

    debug.attr({ text: deg + '°' });

    var dx = ((WORLD_SIZE - 40) / 2) * (Math.sin(t - step) - Math.sin(t)),
        dy = ((WORLD_SIZE - 40) / 2) * (Math.cos(t - step) - Math.cos(t));

    obj.animate({
        translation: dx + ' ' + dy,
        rotation: -deg
    }, 100);
}, 100);

Any help is appreciated!

If you want do a translation and a rotation too, the raphael obj should be like that

 obj.animate({
     transform: "t" + [dx , dy] + "r" + (-deg)
 }, 100);

Check out http://raphaeljs.com/animation.html

Look at the second animation from the top on the right.

Hope this helps!

Here's the code:

(function () {
    var path1 = "M170,90c0-20 40,20 40,0c0-20 -40,20 -40,0z",
        path2 = "M270,90c0-20 40,20 40,0c0-20 -40,20 -40,0z";
    var t = r.path(path1).attr(dashed);
    r.path(path2).attr({fill: "none", stroke: "#666", "stroke-dasharray": "- ", rotation: 90});
    var el = r.path(path1).attr({fill: "none", stroke: "#fff", "stroke-width": 2}),
        elattrs = [{translation: "100 0", rotation: 90}, {translation: "-100 0", rotation: 0}],
        now = 0;
    r.arrow(240, 90).node.onclick = function () {
        el.animate(elattrs[now++], 1000);
        if (now == 2) {
            now = 0;
        }
};                })();