1
这是jsfiddle。 谁能告诉我为什么由keydown触发的动画不平滑?如何通过requestAnimationFrame平滑动画?
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);
}
你的小提琴不适用于我的Chrome版本。 – Marty
@Marty Mine在Mac上工作。 – nich
你的意思是如果你按下动画不顺畅的关键?您应该处理update()函数中的所有动画,然后使用keydown和keyup处理函数来跟踪哪些键在任何给定时间都处于关闭状态。 – nnnnnn