How is set animation done in Raphael?

I'm trying to accomplish some animation with sets in Raphael, but even though an opacity animation worked, I cannot succeed in moving a set (or even a circle) around the canvas.

I found on the Web that moving a set should be done with setting translation, not x, y positions (as they may be different for each element in the set, and just x and y may not be enough for moving some elements), but it doesn't work for me. Nothing is moving, even though the animation callbacks are executed in time, as expected.

Up to this point, the best way I can use the following code is to see how the time is ticking (in the console)...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Set, circle animation</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script>
    <script type="text/javascript">
        $(document).ready (function()
        {
            var canvas = Raphael ('canvas', 400, 300);
            window.tset = canvas.set()
                .push(
                    window.tap = canvas.circle (100, 100, 40)
                        .attr ({stroke: 'blue', fill: 'red'})
                );

            setTimeout (function()
            {
                console.log ('Starting tset animation #1.');
                window.tset.animate ({translation: '15,25'}, 1000, function()
                {
                    console.log ('Starting tap animation #1.');
                    window.tap.animate ({translation: '15,25'}, 1000, function()
                    {
                        console.log ('Starting tset animation #2.');
                        window.tset.animate ({translate: '15,25'}, 1000, function()
                        {
                            console.log ('Starting tap animation #2.');
                            window.tap.animate ({translate: '15,25'}, 1000, function()
                            {
                                console.log ('Starting tset animation #3.');
                                window.tset.animate ({translation: 'matrix(1, 0, 0, 1, 15, 25)'}, 1000, function()
                                {
                                    console.log ('Starting tap animation #3.');
                                    window.tap.animate ({translation: 'matrix(1, 0, 0, 1, 15, 25'}, 1000, function()
                                    {
                                        console.log ('Starting tset animation #4.');
                                        window.tset.animate ({transform: 'matrix(1, 0, 0, 1, 15, 25)'}, 1000, function()
                                        {
                                            console.log ('Starting tap animation #4.');
                                            window.tap.animate ({transform: 'matrix(1, 0, 0, 1, 15, 25)'}, 1000);
                                        });
                                    });
                                });
                            });
                        });
                    });
                });
            }, 1000)
        });
    </script>
</head>
<body>
    <div id="canvas"></div>
</body>
</html>

回答1:

To move a set in Raphael, use:

// move to (100,100) over 1 second

theSetNameGoesHere.animate({transform: "t100,100"}, 1000);

回答2:

I played with this a bit (and scanned through the source) and it looks like you need to specify the transformation in a form like {transform:'M 1 .5 .5 1 15 25'}. Take a look at this fiddle to see some transformations.

BTW, the transformations aren't working exactly as i would have expected, and I can't pretend I understand why... I am pretty new to Raphael and SVG. Anyway, I hope this helps move you in the right direction.