Raphael 中的动画是如何完成的?-前端问题

How is set animation done in Raphael?(Raphael 中的动画是如何完成的?)

本文介绍了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 中的动画是如何完成的?

问题描述

推荐答案

基础教程推荐