javascript - 为图像做平滑运动的最佳方法

Question

我写了一个快速程序来让球在屏幕上弹跳。一切正常，但图像容易闪烁且不平滑。

我怀疑图像闪烁是因为屏幕底部的速度很明显。

我想知道是否有人对如何插入球的运动以减少闪烁有任何想法。

调用更新位置

      this.step = function()
      {
        thegame.myface.y = thegame.myface.y + thegame.myface.vSpeed;
        if (thegame.myface.y > thegame.height)
        {
        thegame.myface.vSpeed = -thegame.myface.vSpeed;
        }
        else
        {
        thegame.myface.vSpeed = thegame.myface.vSpeed + 1;
        }
      }
  },

调用重绘

draw: function()
      {
          //clears the canvas
          thegame.ctx.clearRect(0,0,thegame.width,thegame.height);
          //draw the objects
          thegame.ctx.drawImage(thegame.imgFace,this.x-this.width/2,this.y-this.height/2);
          return;
      },

调用index.html中的框架

<script type="text/javascript">
thegame.init(450,450);
// http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
(function()
 {
 var lastTime = 0;
 var vendors = ['ms', 'moz', 'webkit', 'o'];
 for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x)
 {
 window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
 window.cancelRequestAnimationFrame = window[vendors[x]+'CancelRequestAnimationFrame'];
 }
 if (!window.requestAnimationFrame)
 {
 var f = function(callback, element)
 {
 var currTime = new Date().getTime();
 var timeToCall = Math.max(0, 16-(currTime-lastTime));
 var id = window.setTimeout(function()
     {
     callback(currTime+timeToCall);
     }, timeToCall);
 lastTime = currTime+timeToCall;
 return id;
 };
window.requestAnimationFrame = f;
 }
if (!window.cancelAnimationFrame)
    window.cancelAnimationFrame = function(id)
    {
        clearTimeout(id);
    };
 }());
(function gameloop()
 {
 thegame.update();
 requestAnimationFrame(gameloop);
 thegame.draw();
 })();
</script>

编辑 thegame 的定义

   init: function(width, height)
   {
       var canvas = $("<canvas width='"+width+"' height='"+height+"'></canvas>");
       canvas.appendTo("body");
       thegame.ctx = canvas.get(0).getContext("2d");
       thegame.width = width;
       thegame.height = height;
       thegame.imgFace = new Image();
       thegame.imgFace.src = "face.png";
       thegame.myface = new thegame.makeFace(width/2,height/2);
   },

Answer 1

这是关于视觉感知的。首先找出浏览器通过 requestanimationframe 调用游戏循环的速率。如果是 Chrome，它的任务管理器会有所帮助。如果不是，请使用时间戳自行计算速率。它应该至少每秒 60 次。如果浏览器以这个速度运行并且移动仍然不流畅，那么速度对于那个速度来说太高了。

但是，您可以选择欺骗运动感知。一种是使图像变小(简单)，另一种是运动模糊(复杂)。要执行后者，您基本上以双倍速度运行隐藏的游戏，并在可见 Canvas 上绘制两个混合帧。或者以相同的速度和更简单的方式，跟踪最后两个图像并在 Canvas 上以 50% 的 alpha 绘制它们。如果您想了解更多背景信息，请关注为什么最新的霍比特人电影以每秒 48 帧而不是通常的每秒 24 帧拍摄。

如果图像出现水平切碎/切成两半，则浏览器未正确同步到显示器。在这种情况下，请确保垂直同步 (vsync) 不会在某处被系统或显示选项覆盖。