网页上的逐帧动画

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

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

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

有没有办法在用户将鼠标悬停在圆圈上时暂停所有操作，并在鼠标移开时恢复所有操作？

对于您当前的方法来说，这将是困难的。请查看此答案，了解更好的实现方式。

拉斐尔是正确的选择吗？

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