2

我想在 HTML5 画布上做一个简单的 javascript 动画。现在我的画布是分层的，所以当我收到鼠标事件时，背景层不会改变，但带有头像的顶层会移动。如果我使用 requestAnimationFrame 并且不清除屏幕，我会看到我漂亮的小玩家在多个帧中在屏幕上移动，角色的尾巴很长。但是，如果我尝试在每个动画帧之后执行 clearRect，那么我的角色永远不会出现，我不确定是什么原因造成的。

我使用这些链接作为我的代码的基础：http:
//www.html5canvastutorials.com/advanced/html5-canvas-start-and-stop-an-animation/ http://paulirish.com/2011/requestanimationframe-智能动画/ http://www.nczonline.net/blog/2011/05/03/better-javascript-animations-with-requestanimationframe/

很多示例都是绘制动画形状，而我使用的是图像，不确定这是否重要以及我是否应该只使用画布变换函数而不是 clearRect，但认为这不应该一个区别。另外，为了可读性，我删除了一堆代码，所以括号可能是关闭的，但代码是正常的，我只是为了可读性而这样做，所以你可以看到一个方向的动画。我的代码看起来像：

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

如果有人可以提供任何帮助，我将不胜感激，我只是不明白为什么这不起作用。我不需要超级华丽的动画，这就是为什么我没有使用 kineticjs 或任何其他库。

谢谢。

4

1 回答 1

2

当您清除画布时，它会擦除​​上面的所有内容，因此如果您在绘制后调用它，您会得到一个空白画布，这就是您所描述的。相反，您应该等到下一帧，然后在绘制之前而不是之后清除画布，以便绘制的图像显示一段时间。要解决您的问题，只需将您的清除命令向上移动，以便它在每帧的绘图命令之前立即发生。

于 2012-07-01T09:47:55.577 回答