首頁猿問 canvas做動畫時，切到其他ta...

canvas做動畫時，切到其他tab再切回來，中間的動畫沒有執行。直接從切出時跳到了切回來的狀態。

JavaScript

繁星coding 2018-08-06 10:09:16

<!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

TA貢獻1840條經驗獲得超5個贊

是這樣的，為了性能和電量，RequestAnimationFrame 在頁面后臺運行或者不可見的<iframe>里面會降低幀率，從這個情形看，chrome瀏覽器中，頁面后臺運行時，回調函數是不被調用的。

從上面代碼可以看出，我所畫的點是根據時間來計算出來的位置，我用了當前時間減去了開始時間，這樣的話，離開頁面以后當前時間也是會走的，但RequestAnimationFrame并不工作，所以中間的點自然被忽略了，我們要保持時間的連續性，所以可以記錄離開頁面的時間，每次計算的時候，用當前時間減去開始時間再減去離開的時間，算出真正在頁面中，也就是RequestAnimationFrame正常工作的時間，當然，使用這種方式，離開頁面的時候畫圓過程也將會被停止，回來以后繼續畫。

代碼如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

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>

反對回復 2018-09-19

1 回答
0 關注
1059 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

canvas做動畫時，切到其他tab再切回來，中間的動畫沒有執行。直接從切出時跳到了切回來的狀態。

canvas做動畫時，切到其他tab再切回來，中間的動畫沒有執行。直接從切出時跳到了切回來的狀態。

1 回答

添加回答

canvas做動畫時，切到其他tab再切回來，中間的動畫沒有執行。直接從切出時跳到了切回來的狀態。

canvas做動畫時，切到其他tab再切回來，中間的動畫沒有執行。直接從切出時跳到了切回來的狀態。