画布滚动动画无法正常工作

我正在使用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

画布滚动动画无法正常工作

回答

相关问题