幀通過網頁

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可能會爲你節省一些時間。