平滑视图区域过渡

时间:2013-03-03 01:23:49

标签: javascript jquery html5 canvas jquery-animate

正如你在JSFiddle中看到的那样:http://jsfiddle.net/EychPixels/pABPv/1/,当你使用箭头键移动角色直到视图区域随之移动时,角色似乎向后移动1个瓦片然后向前移动1个瓦片。有没有办法解决这个问题,就像用角色动画视图区域一样?为了动画我用jQuery使用.animate的角色,是否可以对视图区域做同样的事情?如果是这样,我可以使用我的代码看到这个例子吗?

如果您需要更多细节来回答这个问题,请询问。

1 个答案:

答案 0 :(得分:1)

对于您当前的代码,最小阻力的路径(即需要更改较少代码的方式)是在动画期间将now传递给绘制函数,如果视口也应该设置动画。然后,您可以按照@ jimjimmy1995的建议(撤消player.x更改并执行相反的world.x更改)。

This fiddle提供了一个粗略的例子(仅适用于“向下”键)。详细说明:

  1. 确定视口在动画期间是否会移动:

       var move = Math.round(playerY+1) - Math.floor(0.5 * vHeight) > vY;
    
  2. now函数传递给draw(仅当视口移动时):

            step: function(now) {
               playerY = now;
                draw(move ? now-start : 0);
            }
    
  3. draw调整视口和播放器位置:

    function draw(now) {
        if ( !now )
            now = 0;
        ...
                theY = (y-now) * 32;
        ...
        context.fillRect((playerX-vX)*32, (playerY-vY-now)*32, 32, 32);
    
  4. 绘制“额外”图块,以补偿空白区域(示例中未实现);

  5. 动画结束后,再次使用now == 0(在示例中未实现)进行绘制。

  6. 仍然存在一些问题,但应作为未来改进的基础。