如何通過requestAnimationFrame平滑動畫？

Question

這是jsfiddle。 誰能告訴我爲什麼由keydown觸發的動畫不平滑？

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 
var cw = canvas.width; 
var ch = canvas.height; 
var player = new Image(); 
var pw, ph; 
var pvx; 
player.src="http://www.clipartbest.com/cliparts/Rcd/Kzo/RcdKzozMi.png"; 

init(); 

function init(){ 
    player.onload = function(){ 
    pw = 50; 
    ph = pw*player.height/player.width; 
    pvx = (cw-pw)/2; 
    context.drawImage(player, (cw-pw)/2, ch-ph, pw, ph); 
    }; 
    update(); 
} 

function update(){ 

    requestAnimationFrame(update); 
} 

document.addEventListener("keydown", function(e){ 
    switch(e.keyCode){ 
    case 37: 
     requestAnimationFrame(playerMoveLeft); 
     break; 
    case 39: 
     requestAnimationFrame(playerMoveRight); 
     break; 
    }; 
}); 

function playerMoveLeft(){ 
    pvx = pvx-5; 
    context.clearRect(0, 0, cw, ch); 
    context.drawImage(player, pvx, ch-ph, pw, ph); 
} 

function playerMoveRight(){ 
    pvx = pvx+5; 
    context.clearRect(0, 0, cw, ch); 
    context.drawImage(player, pvx, ch-ph, pw, ph); 
} 

Answer 1

好的，我想通了。感謝nnnnnnn的評論。

Do you mean if you hold the key down the animation isn't smooth? You should handle all the animation from your update() function, and then use both a keydown and keyup handler to keep track of which keys are down at any given time. 

這裏是更新的fiddle。

window.requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame; 
var canvas = document.getElementById("myCanvas"); 
var context = canvas.getContext("2d"); 
var cw = canvas.width; 
var ch = canvas.height; 
var player = new Image(); 
var pw, ph; 
var pvx; 
var pml = false; 
var pmr = false; 
player.src="http://www.clipartbest.com/cliparts/Rcd/Kzo/RcdKzozMi.png"; 

init(); 

function init(){ 
    player.onload = function(){ 
    pw = 50; 
    ph = pw*player.height/player.width; 
    pvx = (cw-pw)/2; 
    context.drawImage(player, (cw-pw)/2, ch-ph, pw, ph); 
    }; 
    update(); 
} 

function update(){ 
    if(pml){ 
    pvx = pvx-10; 
    context.clearRect(0, 0, cw, ch); 
    context.drawImage(player, pvx, ch-ph, pw, ph); 
    } 
    if(pmr){ 
    pvx = pvx+10; 
    context.clearRect(0, 0, cw, ch); 
    context.drawImage(player, pvx, ch-ph, pw, ph); 
    } 
    requestAnimationFrame(update); 
} 

document.addEventListener("keydown", function(e){ 
    switch(e.keyCode){ 
    case 37: 
     pml = true; 
     break; 
    case 39: 
     pmr = true; 
     break; 
    }; 
}); 

document.addEventListener("keyup", function(e){ 
    switch(e.keyCode){ 
    case 37: 
     pml = false; 
     break; 
    case 39: 
     pmr = false; 
     break; 
    }; 
}); 

function playerMoveLeft(){ 
    if(pml){ 
    pvx--; 
    context.clearRect(0, 0, cw, ch); 
    context.drawImage(player, pvx, ch-ph, pw, ph); 
    } 
} 

function playerMoveRight(){ 
    if(pmr){ 
    pvx++; 
    context.clearRect(0, 0, cw, ch); 
    context.drawImage(player, pvx, ch-ph, pw, ph); 
    } 
}