javascript - 如何设置某件事在一定时间内发生？

Question

在这个JSFiddle中，您可以看到红色方块从一个图块移动到下一个图块的速度非常快，我该如何设置它以便从一个图块到下一个图块大约需要 0.2 秒？

Answer 1

要回答您标题中的问题，在给定时间段后执行某些 JavaScript 的方法是使用setTimeout()（或setInterval()）。

动画运动，在电脑上和沃尔特·迪斯尼的手绘动画是一样的。画一堆图片，每张都有少量的变化，一次显示一张，等待一小段时间再显示每一帧。

所以，要做到这一点，你需要计算每一帧。找到目标位置和当前位置之间的差异，并将这些差异分解为步骤。然后，绘制图像将位置移动一步，直到当前位置与目的地匹配。

jsfiddle.net/kmHZt/79

var lastPos;
function draw() {
    var endPos = {
        x: (playerX - vX) * 32,
        y: (playerY - vY) * 32
    };
    var pos = $.extend({}, endPos, lastPos);
    var step = {
        x: (endPos.x - pos.x) / 10,
        y: (endPos.y - pos.y) / 10
    };
    drawStep();

    function drawStep() {
        context.clearRect(0, 0, canvas.width, canvas.height);
        for (y = 0; y <= vHeight; y++) {
            for (x = 0; x <= vWidth; x++) {
                theX = x * 32;
                theY = y * 32;
                context.drawImage(tiles[board[y + vY][x + vX]], theX, theY, 32, 32);
            }
        }
        context.fillStyle = 'red';
        pos.x += step.x;
        pos.y += step.y;
        context.fillRect(pos.x, pos.y, 32, 32);
        if (Math.round(pos.x - endPos.x) + Math.round(pos.y - endPos.y) == 0) {
            lastPos = pos;
            return;
        }
        setTimeout(drawStep, 20);
    }
}