d3/Javascript動畫不在播放時它們應該是

我有以下代碼沿其路徑動畫一個對象（「標記」），這是一個座標數組（x，y，t，其中t是時間在這個座標和下一個座標之間，以ms爲單位 - 來說明物體的加速度/減速度，路徑是由用戶的鼠標移動產生的，並且高精度是理想的）。該項目使用d3.js動畫SVG。d3/Javascript動畫不在播放時它們應該是

function Animation(tag,path) { 
    this.tag = tag; 
    this.path = path; 
} 

Animation.prototype = { 
    start : function() { 
     console.log('Animation created'); 
     var i = 0; 
     var nextTime = this.path[0].t; 
     var thisClass = this; 

     setTimeout(function(){}, nextTime); 

     console.log('Beginning animation'); 

     function step() { 
      setTimeout(function(){ 
       if(i == thisClass.path.length -1) { 
        var now = new Date(); 
        console.log('Animation for '+ thisClass.tag.attr('id') + ' played at ' + (now - globalTimer) + 'ms.'); 
        return; 
       } 
       if(i === 0) { 
        var now = new Date(); 
        console.log('Animation for '+ thisClass.tag.attr('id') + ' started at ' + (now - globalTimer) + 'ms.'); 
       } 
       thisClass.tag 
        .attr('cx', thisClass.path[i].x) 
        .attr('cy', thisClass.path[i].y); 
       i++; 
       requestAnimationFrame(step); 
      }, thisClass.path.t); 
     } 

     requestAnimationFrame(step); 

    } 
};

另一個類負責調度每個動畫應該播放的時間。例如，在30秒的時間內，必須播放3個動畫，時間爲：03，：09，：25。當需要的動畫播放，調度稱之爲：

new Animation(Tag, Path).start();

問題：雖然調度器調用每個動畫正確的時間，沒有任何功能step()的實例在運行時 - 他們都似乎發生在記錄的最後階段，一次。因此，當人們希望我的日誌看起來是這樣的：

動畫創建
開始動畫
播放的動畫
動畫創建
開始動畫
播放的動畫
...

...相反，它看起來像這樣：

動畫創建
開始動畫
動畫創建
開始動畫
(2)播放的動畫

（編輯：http://puu.sh/4Ucw9.png瞭解更多詳情。「動畫推送」在new Animation(...)之後立即出現，因此理論上在動畫完成後。正如你所看到的，三個標籤（c0，c1，c2）應該被稱爲不同的ms標記，但所有三個標籤的動畫開始於7019ms）

動畫應該在被調用時播放，而不是在時間段結束。看起來他們正在排隊，然後全部執行，但據我所知，我沒有告訴他們這樣做。我懷疑在某種程度上是關鍵，但我昨天才開始使用它，所以我仍然不能100％確定它的功能以及如何使用它。有誰知道發生了什麼事？

來源

2013-10-19 sg.cc

是否有使用原始動畫幀的特殊原因？你可以用D3的轉換完成所有這些。 –

我不是100％確定我會繼續使用原始動畫幀，但到目前爲止，它們是最容易管理和實施的。他們有點混亂，是的，但我寧願讓原型的基礎知識首先工作，然後讓代碼更好，更快，更漂亮。 –

我的意思是，在轉換過程中這會更容易。 –

我解決了我的問題。顯然，問題出在d3上 - 因爲我使用了定時器而不是d3的定時器隊列，所以沒有執行d3命令，直到我得到一個特定於d3的定時器來觸發我的時間檢查功能。

在這兩種情況下，函數返回「false」，直到時鐘達到下一個預定動畫的開始時間，此時調度程序創建相應的對象並返回「true」。

以前的代碼（沒有動畫D3元素）：

while(!schedule());

新代碼（動畫時間D3元素）：

d3.timer(schedule);

奇怪，我決不會猜到這是D3，但你有它。

來源

2013-10-20 02:32:47

d3/Javascript動畫不在播放時它們應該是

回答

相關問題