首頁猿問在運行 60fps 的循環內移動對象

在運行 60fps 的循環內移動對象

JavaScript

慕桂英3389331 2023-08-18 14:18:47

我正在嘗試設置一個運行循環，每秒執行 60 次 - 在我的示例中，我想在每次循環運行時簡單地將 px 移動到 div 的左側位置，但我認為我'我做錯事了。如果每次循環運行時操作此塊有任何幫助，我將不勝感激。function runLoop() { var counter = counter + 1; var redBlock = document.getElementById("block"); redBlock.style.left = counter + "px";}setInterval(function () { runLoop();}, 60)#block { background-color: red; width: 100px; height: 100px; position: absolute; display: block;}<div id="block"></block>

查看完整描述

3 回答

胡說叔叔

TA貢獻1804條經驗獲得超8個贊

您永遠不應該使用 setInterval/setTimeout 進行動畫，因為您設置的延遲 X 實際上是“當 X 過去時”。動畫也可能發生在屏幕的幀更新之間，這使得動畫看起來很卡頓。

var counter = 0,

running = true;

function runLoop() {

counter = counter + 1;

var redBlock = document.getElementById("block");

redBlock.style.left = counter + "px";

}

setInterval(function () {

runLoop();

}, 60)

#block {

background-color: red;

width: 100px;

height: 100px;

position: absolute;

display: block;

}

我建議使用requestAnimationFramewhich 進行計算，然后等待下一個屏幕更新來繪制新位置。它可能看起來很棘手，但一旦您意識到這只是對自身的回調，它就會比看起來更容易。

我添加了兩個按鈕，以便您可以播放動畫。

請注意與相比，動畫有多流暢setInterval。

此外，在循環之外進行變量聲明以提高性能。

let counter = 0,

isRunning = true;

const redBlock = document.getElementById("block");

function runLoop() {

counter = counter + 1;

redBlock.style.left = counter + "px";

if (isRunning) {

requestAnimationFrame(runLoop);

}

function restart() {

counter = 0;

if (!isRunning) { runLoop(); }

}

function pause() {

isRunning = !isRunning;

if (isRunning) { runLoop(); }

}

requestAnimationFrame(runLoop);

#block {

background-color: red;

width: 100px;

height: 100px;

position: absolute;

top: 30px;

display: block;

}

<button onclick="pause()">Pause</button>

<button onclick="restart()">Restart</button>

反對回復 2023-08-18

紅糖糍粑

TA貢獻1815條經驗獲得超6個贊

要讓該函數runLoop每秒調用 60 次，需要以 (1000 / 60) 毫秒的間隔調用。

另外，還counter需要進行初始化。

（您還需要一些條件來確定何時停止計數以避免溢出）。

function runLoop(xcoord) {

var redBlock = document.getElementById("block");

redBlock.style.left = xcoord + "px";

}

var counter = 0;

setInterval(runLoop, 16.7, counter++);

</script>

反對回復 2023-08-18

躍然一笑

TA貢獻1826條經驗獲得超6個贊

setInterval的參數是錯誤的，如果你想每秒運行60次，你需要將間隔設置為1000 / 60。

現在我猜你正在嘗試設置動畫循環。您可能想看看為此目的而制作的函數。

requestAnimationFrame(someCallback);

基本上，它是一個函數，它將注冊一個回調，以便在下一個瀏覽器渲染調用之前執行。這意味著最多 60 次/秒，但如果瀏覽器難以計算，則可能會更少。

應用于您的示例，它可能很簡單：

function runLoop() {

var redBlock = document.getElementById("block");

redBlock.style.left = xcoord + "px";

requestAnimationFrame(runLoop()); // register recursivaly a call for next animationFrame

}

var counter = 0;

runLoop()

反對回復 2023-08-18

3 回答
0 關注
182 瀏覽

關注

添加回答

舉報

0/150

提交

取消

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

熱搜

最近搜索清空

在運行 60fps 的循環內移動對象

在運行 60fps 的循環內移動對象

3 回答

添加回答