Question

在这个JSFiddle中，你可以看到红色正方形从一个平铺移动到另一个平铺非常快，我怎么设置它所以从一个平铺到下一个平铺大约需要0.2秒？

Answer 1

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

为动画制作动画，它在电脑上与沃尔特迪斯尼的手绘动画一样。在每个图片中画一些图片并进行少量更改，并一次显示一张图片，等待一小段时间再显示每一帧。

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

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);
    }
}

如何设置在一定时间内发生的事情？

1 个答案: