帧通过网页

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可能会为你节省一些时间。