畫布滾動動畫無法正常工作

我正在使用html canvas元素構建甘特圖樣式時間軸。畫布滾動動畫無法正常工作

我目前正在嘗試添加允許用戶單擊下一個/上一個按鈕以使甘特圖滾動以顯示更早或更晚的時間的功能。

我這樣做的方式是讓span.adjustTime在id中保留一個以秒爲單位的值來調整時間（例如86400一天）。

我正在嘗試使滾動成爲動畫，因此看起來像滾動條，而不是一天前跳躍。

我的計時計算有一個小問題，但下面的腳本並不是動畫，而是直接跳到最後的時間。

我確實有一個獨立的setInterval函數，它每秒更新一次，所以我希望它不是在同一個元素和數據上的同一個函數上衝突定時器的問題。

jQuery('span.adjustTime').click(function() { 

    var adjustBy = parseInt(jQuery(this).attr('id').replace('a', '')); 
    var data = jQuery('img#logo').data(); 

    for(var m = 1; m >= 30; m++) { 
     gantt.startUnixTime = gantt.startUnixTime + (adjustBy * (m * 0.001)); 

     var moveTimer = setTimeout(function() { 
      draw(document.getElementById('gantt'), data, gantt); 

     }, 1000); 

     if (m == 30) { 
      clearTimeout(moveTimer); 
     } 
    } 
});

來源

2010-11-25 pedalpete

在for循環您呼叫setTimeout 30倍，與1000相同的超時值，以後每次所以1000毫秒30個定功能將執行幾乎在同一時間。我想這不是你想要的。如果你想30幀的動畫超過1000毫秒，該setTimeout的應該是這個樣子：

setTimeout(function() { ... }, 1000/30 * m)

另外請注意，所有30個計劃功能將看到相同的gantt.startUnixTime值，因爲相同的對象（gantt）傳遞到所有這些，並且當它們執行時，for循環早已完成。

來源

2011-01-04 02:50:44

畫布滾動動畫無法正常工作

回答

相關問題