Question

我目前有一个填充如下的MySQL表：

frameid     name     mdsx     mdsy     radius
      1        a        #        #          #
      1        b        #        #          #
      1        c        #        #          #
      2        d        #        #          #
      2        e        #        #          #
      2        b        #        #          #
      3        g        #        #          #
      3        h        #        #          #
      3        i        #        #          #
      3        b        #        #          #
      4        k        #        #          #
      4        l        #        #          #
      4        m        #        #          #
      4        b        #        #          #

我正在尝试循环遍历整个表格，并在给定半径的给定x和y值处绘制圆圈到页面上，并用名称标记。一旦完成一帧，我等待7秒，然后检查下一帧。如果一个圆位于旧框架中的下一个框架中，我有一个动画将其移动到新位置。新框架中不存在的所有圆圈，但旧框架中的圆圈将被移除。

我目前正在<script>内部使用PHP来遍历所有帧并制作一个巨大的脚本。最终结果如下：

<script type="text/javascript">
    var paper = Raphael(0, 100, 900, 500);

    setTimeout(function() {
        a = paper.circle(#, #, #);
        a_t = paper.text(#, #, "a");

        b = paper.circle(#, #, #);
        b_t = paper.text(#, #, "b");

        c = paper.circle(#, #, #);
        c_t = paper.text(#, #, "c");        
    }, 0);

    setTimeout(function() {
        //REMOVE ALL THE OLD ONES THAT DON'T EXIST IN NEW FRAME
        a.remove();
        a_t.remove();

        c.remove();
        c_t.remove();

        //ADD NEW NODES
        d = paper.circle(#, #, #);
        d_t = paper.text(#, #, "d");

        e = paper.circle(#, #, #);
        e_t = paper.text(#, #, "b");

        //ANIMATE NODES THAT STILL EXISTS
        b.animate({cx: #, cy:#, r:#}, 2000);
        b_t.animate({cx: #, cy:#, r:#}, 2000);
    }, 7000);

    setTimeout(function() {
        //REMOVE ALL THE OLD ONES THAT DON'T EXIST IN NEW FRAME
        d.remove();
        d_t.remove();

        e.remove();
        e_t.remove();

        //ADD NEW NODES
        g = paper.circle(#, #, #);
        g_t = paper.text(#, #, "g");

        h = paper.circle(#, #, #);
        h_t = paper.text(#, #, "h");

        i = paper.circle(#, #, #);
        i_t = paper.text(#, #, "i");

        //ANIMATE NODES THAT STILL EXISTS
        b.animate({cx: #, cy:#, r:#}, 2000);
        b_t.animate({cx: #, cy:#, r:#}, 2000);
    }, 14000);

    etc...
</script>

问题在于，首先，我认为我不应该在一个大脚本中完成所有操作。我可以拆分它，所以我不必等待它在开始执行之前生成整个脚本吗？我应该创建每个节点并自己标记它自己的节点吗？我觉得这会浪费处理能力。

我正在尝试添加一个功能，用户可以将鼠标悬停在圆圈上，并显示一些信息。但是，在它消失之前7秒内无法读取。当用户将鼠标悬停在一个圆圈上并在鼠标移除时恢复时，有没有办法暂停所有内容？我觉得setTimeout无法实现这一点，但我无法找到其他任何内容。

拉斐尔是不是正确的选择？

谢谢！

Answer 1

我目前正在使用PHP来循环遍历所有框架，并制作一个巨大的脚本。

这不是正确的方法，你应该使用PHP生成一个JavaScript数组，然后用JavaScript读取它。

当用户将鼠标悬停在圆圈上并在鼠标移除时恢复时，是否有办法暂停所有内容？

使用您当前的方法将会很困难。请查看this answer以了解更好的实施方案。

拉斐尔是不是正确的选择？

这取决于您想要的控制级别。谷歌“动画javascript图形库”，看看是否有一些lib可能会节省你一些时间。

在网页上逐帧动画

1 个答案: