如何在一定的時間內設置某些事情？

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