平滑的视图区域过渡答案

【问题标题】：Smooth view area transition平滑的视图区域过渡
【发布时间】：2013-03-03 01:23:48
【问题描述】：

正如您在此 JSFiddle 中看到的：http://jsfiddle.net/EychPixels/pABPv/1/ ，当您使用箭头键移动角色直到视图区域随之移动时，角色似乎向后移动 1 格，然后向前移动 1 格。有没有办法解决这个问题，比如用角色为视图区域设置动画？对于我用 jQuery 使用 .animate 的角色动画，是否可以对视图区域做同样的事情？如果是这样，我可以使用我的代码查看此示例吗？

如果您需要更多详细信息来回答问题，请提出。

【问题讨论】：

没有字符图像显示。
我会尽快解决的
@jimjimmy1995 字符已修复jsfiddle.net/EychPixels/pABPv/1
你基本上需要移动世界而不是角色。
你需要将你所做的否定应用到播放器上，所以如果你做player.x--你需要做world.x++。当然，当你到达世界的边缘时，你将不得不切换回移动玩家，因为世界不能再移动了。

标签： javascript jquery html canvas jquery-animate

【解决方案1】：

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

This fiddle 提供了一个粗略的示例（仅适用于“向下”键）。详情：

确定视口是否会在动画期间移动：

   var move = Math.round(playerY+1) - Math.floor(0.5 * vHeight) > vY;

将now 函数传递给draw（仅当视口移动时）：

        step: function(now) {
           playerY = now;
            draw(move ? now-start : 0);
        }

在draw调整视口和玩家位置：

function draw(now) {
    if ( !now )
        now = 0;
    ...
            theY = (y-now) * 32;
    ...
    context.fillRect((playerX-vX)*32, (playerY-vY-now)*32, 32, 32);

绘制一个“额外的”瓦片，以补偿空白（示例中未实现）；
动画结束后，再次绘制，now == 0（示例中未实现）。

仍有一些小故障，但应该作为未来改进的基础。

【讨论】：