Question

我正在尝试使用Raphael中的集合完成一些动画，但即使不透明动画有效，我也无法成功地在画布周围移动一组（甚至是一个圆圈）。

我在Web上发现移动一组应该通过设置平移来完成，而不是x，y位置（因为它们对于集合中的每个元素可能不同，并且只有x和y可能不足以移动一些元素），但它对我不起作用。即使动画回调按预期执行，也没有任何动静。

到目前为止，我可以使用以下代码的最佳方法是查看时间是如何滴答的（在控制台中）......

<!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>

Answer 1

要在Raphael中移动一组，请使用：

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

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

Answer 2

我玩了一下（并通过源扫描），看起来你需要以像{transform:'M 1 .5 .5 1 15 25'}这样的形式指定转换。看看这个fiddle，看看有些转变。

顺便说一句，转换并不像我预期的那样完全正常，我不能假装我明白为什么......我对Raphael和SVG很新。无论如何，我希望这有助于你朝着正确的方向前进。

如何在拉斐尔设置动画？

2 个答案: