requestAnimationFrame 使画布动画出错答案

【问题标题】：requestAnimationFrame makes canvas animation buggyrequestAnimationFrame 使画布动画出错
【发布时间】：2016-06-04 10:49:33
【问题描述】：

我正在尝试创建简单的画布动画，其中一个小球绕着一个大球运行。我正在使用 requestAnimationFrame 但它并没有像我一样工作。换句话说，我的动画有时运行得很慢（跟不上 60fps）。我制作了jsFiddle 以获得更直观的解释。

这也是我正在使用的 javascript：

var layer1 = document.getElementById('layer1').getContext('2d');
var layer2 = document.getElementById('layer2').getContext('2d');

var x;
var y;
var angle = 0;

var last_frame = 0;

function render(timestamp) {

  requestAnimationFrame(render);

  fps = timestamp - last_frame;
  last_frame = timestamp;

  // optimal framerate would be 60 (~16ms/"loop") -> count ratio according to that
  // for example if fps is 32 -> 32/16 = 2 -> we move ball twice the normal distance
  var delta = fps / 16;

  angle += 0.02 * delta;

  x = 200 + 100 * Math.cos(angle);
  y = 200 + 100 * Math.sin(angle);

  layer1.clearRect(0, 0, 400, 400);

  layer1.beginPath();
  layer1.arc(x, y, 20, 0, Math.PI * 2);
  layer1.fill();

}
render(16);

layer2.beginPath();
layer2.arc(200, 200, 80, 0, Math.PI * 2);
layer2.fill();

我的代码有什么问题吗？我正在尝试使用 Cordova (PhoneGap) 和 canvas 制作一款混合手机游戏，但如果 Javascript 的性能如此糟糕，我还不如马上忘记它。

顺便说一句：动画在笔记本电脑上运行得非常好（大部分时间），但三星 Galaxy A tab requestAnimationFrame 给了我这样的效果（60fps，60fps，60fps，29fps，29fps，60fps，60fps，60fps，29fps.....）

【问题讨论】：

我所说的“跑得不好”是那种到处都落后的那种。
我认为将这一行放在函数requestAnimationFrame(render); 的末尾会有所不同，因为您将在执行它的第一行之后调用函数递归。试试这个解决方案，让我知道结果
不幸的是，这并没有什么不同。球仍然滞后。
你试过分析内存吗？也许是GC导致FPS下降？顺便说一句，fps 没有在任何地方声明，所以它是全局的。另外，既然你知道小球之前的位置，为什么不每次都清除那个区域，而不是整个画布？
只是为了实验，我把计算移到requestIdleCallback，只清除之前绘制的区域：jsfiddle.net/tvembzhx/5

标签： javascript cordova canvas requestanimationframe

【解决方案1】：

延迟很难察觉，但确实存在。我调整了您的代码以使延迟更加明显。

var layer1 = document.getElementById('layer1').getContext('2d');
var layer2 = document.getElementById('layer2').getContext('2d');

var x;
var y;
var angle = 0;
var last_frame = 0;
layer1.globalAlpha = .5;

function render(timestamp) {

  fps = timestamp - last_frame;
  last_frame = timestamp;

  // optimal framerate would be 60 (~16ms/"loop") -> count ratio according to that
  // for example if fps is 32 -> 32/16 = 2 -> we move ball twice the normal distance
  var delta = fps / 16;

  if (angle > Math.PI * 2) {
    layer1.clearRect(0, 0, 400, 400);
    angle %= Math.PI * 2;
  }

  angle += 0.02 * delta;
  x = 200 + 100 * Math.cos(angle);
  y = 200 + 100 * Math.sin(angle);

  layer1.beginPath();
  layer1.arc(x, y, 20, 0, Math.PI * 2);
  layer1.stroke();
  requestAnimationFrame(render);
}
render(16);
layer2.beginPath();
layer2.arc(200, 200, 80, 0, Math.PI * 2);
layer2.fill();

canvas,
#frames_label {
  position: absolute;
  top: 0;
  left: 0;
}

<canvas id="layer1" width="400" height="400">
</canvas>
<canvas id="layer2" width="400" height="400">
</canvas>
<div id="frames_label"></div>

【讨论】：