Raphael 中的动画是如何完成的?

2022-01-17 00:00:00 set animation javascript raphael

我正在尝试使用 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.

我在网上发现移动一个集合应该通过设置平移来完成，而不是 x、y 位置(因为它们可能对于集合中的每个元素都不同，并且仅 x 和 y 可能不足以移动某些元素)，但它对我不起作用.没有任何动作，即使动画回调按预期及时执行.

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>

推荐答案

要在 Raphael 中移动一个集合，请使用:

To move a set in Raphael, use:

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

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

相关文章