如何通过requestAnimationFrame平滑动画
How to smooth animation via requestAnimationFrame?
这里是jsfiddle。谁能告诉我为什么由键控触发的动画不流畅?
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);
}
好的,我想通了。感谢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.
这是更新的小提琴。
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);
}
}
相关文章:
- 如何正确编程jQuery动画与平滑(导航栏)
- 如何平滑地设置twitter引导程序进度条的动画
- jQuery-slideToggle动画不平滑
- 图像动画不平滑
- 在一定百分比上禁用引导进度条的平滑动画过渡
- js动画不平滑
- 如何为我的菜单创建平滑的动画
- 如何平滑地设置HTML5画布fillText()的缩放动画
- 如何使用@keyframes实现平滑的页面过渡,而不会破坏 jquery 动画
- 具有平滑更新动画的 D3 折线图
- HTML 平滑滚动[无锚点动画]
- 关于平滑状态反向动画
- jQuery:滚动时平滑动画字体大小变化
- jQuery设置的边距顶部使内容跳跃.如何使其平滑动画化
- 如何通过requestAnimationFrame平滑动画
- CSS3 关键帧动画是否比属性过渡更平滑?
- JavaScript 动画平滑滚动
- jQuery淡出不动画平滑
- Highcharts.js:如何使堆叠区域图形动画平滑
- IE 11 SVG动画平滑