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

Question

我正在使用html canvas元素构建甘特图样式时间线。

我目前正在尝试添加允许用户单击“下一个/上一个”按钮以使甘特图滚动以显示更早或更晚时间的功能。

我这样做的方法是拥有一个span.adjustTime，其中id包含要调整的时间（以秒为单位）的值（例如，一天的86400）。

我正在尝试使滚动动画，使它看起来像滚动，而不是提前一天跳动。

我在计时计算中有一个小问题，但是下面的脚本不是设置动画，而是直接跳转到最终时间。

我确实在一个单独的setInterval上运行了draw函数，该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);
        }
    }
});

Answer 1

在for循环中，您将调用setTimeout 30次，每次都具有相同的超时值1000。因此，在1000毫秒后，几乎在同一时间执行30个调度函数。 我想这不是您想要的。 如果要在1000毫秒内制作30帧动画，则setTimeout应该类似于：

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

还要注意，所有30个调度函数都将看到相同的gantt.startUnixTime值，因为将相同的对象（ gantt ）传递给了所有对象，并且当它们执行时，for循环早已结束。