canvas做动画时，切到其他tab再切回来，中间的动画没有执行。直接从切出时跳到了切回来的状态。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>aaa</title>
</head>
<body>
<canvas id="demoCanvas" width="500" height="700"></canvas>
<script>
var canvas = demoCanvas;
var ctx = canvas.getContext('2d');
var startTime = Date.now();
var duration = 11100;
var r = 100;
requestAnimationFrame(animate)
var p = Math.min(1.0, (Date.now() - startTime) / duration);
var tx = r * Math.sin(2 * Math.PI * p) + 200,
ty = -r * Math.cos(2 * Math.PI * p) + 200;
ctx.fillStyle = 'green';
ctx.beginPath();
ctx.moveTo(tx, ty);
function animate() {
// ctx.clearRect(0,0,1000,1000);
var p = Math.min(1.0, (Date.now() - startTime) / duration);
var tx = r * Math.sin(2 * Math.PI * p) + 200,
ty = -r * Math.cos(2 * Math.PI * p) + 200;
ctx.lineTo(tx, ty);
ctx.stroke();
if (p < 1.0) requestAnimationFrame(animate)
}
</script>
</body>
</html>
这是正常运行，会画一个圆。
如果我中途切出tab在回来。就会变成这样了
1回答
-
慕斯709654
是这样的，为了性能和电量，RequestAnimationFrame 在页面后台运行或者不可见的<iframe>里面会降低帧率，从这个情形看，chrome浏览器中，页面后台运行时，回调函数是不被调用的。从上面代码可以看出，我所画的点是根据时间来计算出来的位置，我用了当前时间减去了开始时间，这样的话，离开页面以后当前时间也是会走的，但RequestAnimationFrame并不工作，所以中间的点自然被忽略了，我们要保持时间的连续性，所以可以记录离开页面的时间，每次计算的时候，用当前时间减去开始时间再减去离开的时间，算出真正在页面中，也就是RequestAnimationFrame正常工作的时间，当然，使用这种方式，离开页面的时候画圆过程也将会被停止，回来以后继续画。代码如下：<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>aaa</title> </head><body> <canvas id="demoCanvas" width="500" height="700"></canvas> <script> var canvas = demoCanvas; var ctx = canvas.getContext('2d'); var startTime = Date.now(); var duration = 11100; var r = 100; let leaveTime; let allLeaveTime = 0; requestAnimationFrame(animate) var p = Math.min(1.0, (Date.now() - startTime) / duration); var tx = r * Math.sin(2 * Math.PI * p) + 200, ty = -r * Math.cos(2 * Math.PI * p) + 200; ctx.fillStyle = 'green'; ctx.beginPath(); ctx.moveTo(tx, ty); function animate() { // ctx.clearRect(0,0,1000,1000); var p = Math.min(1.0, (Date.now() - allLeaveTime - startTime) / duration); var tx = r * Math.sin(2 * Math.PI * p) + 200, ty = -r * Math.cos(2 * Math.PI * p) + 200; ctx.lineTo(tx, ty); ctx.stroke(); if (p < 1.0) requestAnimationFrame(animate) } document.addEventListener('visibilitychange', function (e) { if (e.target.hidden) { leaveTime = Date.now(); } else { allLeaveTime += (Date.now() - leaveTime); } }) </script></body></html>00
相关分类