在requestAnimationFrame使用clearRect不显示动画 [英] using clearRect in requestAnimationFrame does not show the animation
问题描述
我所试图做HTML5画布上一个简单的JavaScript动画。现在我的画布是分层的，这样当我收到鼠标事件背景层不会改变，但与化身顶层走动。如果我使用requestAnimationFrame，不清除屏幕，我看到我的漂亮的小球员在屏幕上移动的多帧与字符的长尾巴。但是，如果我尝试和每个动画帧之后做和clearRect，然后我的性格从来没有出现，我不知道是什么原因造成这一点。
What I am trying to do a simple javascript animation on the HTML5 canvas. Right now my canvases are layered so that when I receive a mouse event the background layer doesn't change but the top layer with the avatars move around. If I use requestAnimationFrame and don't clear the screen, I see my nice little player moving across the screen in multiple frames with a long tail of the character. However, if I try and do the clearRect after each animation frame, then my character never appears and I'm not sure what is causing this.
我使用这些链接作为我的code的基础：
结果http://www.html5canvastutorials.com/advanced/html5-canvas-start-and-stop-an-animation/
http://paulirish.com/2011/requestanimationframe-for-smart-animating/
<一href=\"http://www.nczonline.net/blog/2011/05/03/better-javascript-animations-with-requestanimationframe/\" rel=\"nofollow\">http://www.nczonline.net/blog/2011/05/03/better-javascript-animations-with-requestanimationframe/
I am using these links as a basis for my code:
http://www.html5canvastutorials.com/advanced/html5-canvas-start-and-stop-an-animation/
http://paulirish.com/2011/requestanimationframe-for-smart-animating/
http://www.nczonline.net/blog/2011/05/03/better-javascript-animations-with-requestanimationframe/
很多的例子是动画的绘制形状，而我使用的图片，不知道这事是否我刚刚使用的帆布变换函数而不是clearRect，但没想到这应该'已经发挥了作用。另外，我删除了一堆code的可读性，所以支架可能会关闭，但code正常工作，我只是做了它的可读性，所以你在一个方向看动画。我的code看起来是这样的：
A lot of the examples are animating shapes that are drawn, whereas I'm using images, not sure if this matters and whether I should've just used a canvas transform function instead of clearRect, but didn't think this should've made a difference. Also, I deleted a bunch of code for readability, so the brackets may be off, but the code is functioning, I just did it for readability so you see animation in one direction. My code looks something like:
// what is this function for? See here - http://stackoverflow.com/questions/10237471/please-explain-this-requestanimationframe-idiom
window.requestAnimFrame = function(callback){
// add in this parentheses - http://stackoverflow.com/questions/5605588/how-to-use- requestanimationframe
return ( window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function(callback){
window.setTimeout(callback, 1000 / 60);
}
);
}();
function stopAnimatingPlayer(currentAvatarAnimating, destinationCellX, destinationCellY) {
gIsAnimating = false;
//Did this final draw because I wasn't sure if the avatar would end on the exact pixel position, so this should snap him back into place
drawAvatar(currentAvatarAnimating, destinationCellX, destinationCellY, false,0,0);
}
function movePlayer(lastTime, playerPixelX, playerPixelY, destinationCellX, destinationCellY) {
if (gIsAnimating) {
// the canvas is already globally held as gAvatarCanvasElement & gAvatarDrawingContext;
// update
var date = new Date();
var time = date.getTime();
var timeDiff = time - lastTime;
var linearSpeed = 100;
// pixels / second
var linearDistEachFrame = linearSpeed * timeDiff / 1000;
var horizontal = false;
var newX, newY;
// gets the new coordinate of the player
if (gTowerCurrentPlayer == 1) {
//fill in later - just trying to get one horizontal animation working
} else if (destinationCellY == gPlayer1Cell.y) { // we're moving horizontally
var currentX = playerPixelX;
var diffX = destinationCellX - gPlayer1Cell.x;
horizontal = true;
if (diffX > 0) { // player is moving right - just get one direction going for now
if (currentX < getPixelFromRow(destinationCellX)) {
newX = currentX + linearDistEachFrame;
} else {
stopAnimatingPlayer(gTowerCurrentPlayer, destinationCellX, destinationCellY);
}
} //fill in rest later - get one direction working
lastTime = time;
// clear - this is where the problem is
gAvatarDrawingContext.clearRect(playerPixelX, playerPixelY, kPieceWidth, kPieceHeight);
//gAvatarDrawingContext.clearRect(0,0, gAvatarCanvasElement.width, gAvatarCanvasElement.height);
if (horizontal) {
drawAvatar(gTowerCurrentPlayer, 0, 0, true, newX, playerPixelY);
// request new frame
requestAnimFrame(function(){
movePlayer(lastTime, newX, playerPixelY, destinationCellX, destinationCellY);
});
}
}
}
function animatePlayer(playerPixelX, playerPixelY, destinationCellX, destinationCellY) {
gIsAnimating = true; // global var here
var date = new Date();
var time = date.getTime();
movePlayer(time, playerPixelX, playerPixelY, destinationCellX, destinationCellY);
}
如果任何人都可以提供任何帮助，我真的AP preciate它，我只是没有得到为什么这是行不通的。我不需要超级惹眼的动画这就是为什么我没有去kineticjs或任何其他图书馆在那里。
If anyone could provide any help I would really appreciate it, I'm just not getting why this is not working. I don't need super flashy animations which is why i didn't go with kineticjs or any of the other libraries out there.
感谢。
推荐答案
在清除画布，它会删除它的一切，所以如果你把它叫做你绘制后，你会得到一个空白的画布，这是你是什么描述。相反，你应该等到下一帧，然后绘制前清除画布，而不是之后，这样绘制的图像显示了一段时间。要解决你的问题，只需将您的清算指令，以便它之前的每一帧的绘图命令立即发生的。
When you clear the canvas, it erases everything on it, so if you call it after you've drawn you get a blank canvas, which is what you are describing. Instead, you should wait until the next frame, and then clear the canvas before drawing, rather than after, so that the drawn image shows up for a while. To fix your problem, just move your clearing command up so that it happens immediately before your drawing commands for each frame.
这篇关于在requestAnimationFrame使用clearRect不显示动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
