第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全，請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問(wèn)題，去搜搜看，總會(huì)有你想問(wèn)的

在運(yùn)行 60fps 的循環(huán)內(nèi)移動(dòng)對(duì)象

在運(yùn)行 60fps 的循環(huán)內(nèi)移動(dòng)對(duì)象

慕桂英3389331 2023-08-18 14:18:47
我正在嘗試設(shè)置一個(gè)運(yùn)行循環(huán)，每秒執(zhí)行 60 次 - 在我的示例中，我想在每次循環(huán)運(yùn)行時(shí)簡(jiǎn)單地將 px 移動(dòng)到 div 的左側(cè)位置，但我認(rèn)為我'我做錯(cuò)事了。如果每次循環(huán)運(yùn)行時(shí)操作此塊有任何幫助，我將不勝感激。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 回答

?
胡說(shuō)叔叔

TA貢獻(xiàn)1804條經(jīng)驗(yàn) 獲得超8個(gè)贊

您永遠(yuǎn)不應(yīng)該使用 setInterval/setTimeout 進(jìn)行動(dòng)畫(huà)，因?yàn)槟O(shè)置的延遲 X 實(shí)際上是“當(dāng) X 過(guò)去時(shí)”。動(dòng)畫(huà)也可能發(fā)生在屏幕的幀更新之間，這使得動(dòng)畫(huà)看起來(lái)很卡頓。

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;

}

<div id="block"></block>

我建議使用requestAnimationFramewhich 進(jìn)行計(jì)算，然后等待下一個(gè)屏幕更新來(lái)繪制新位置。它可能看起來(lái)很棘手，但一旦您意識(shí)到這只是對(duì)自身的回調(diào)，它就會(huì)比看起來(lái)更容易。


我添加了兩個(gè)按鈕，以便您可以播放動(dòng)畫(huà)。


請(qǐng)注意與 相比，動(dòng)畫(huà)有多流暢setInterval。


此外，在循環(huán)之外進(jìn)行變量聲明以提高性能。


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;

}

<div id="block"></div>


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


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


查看完整回答
反對(duì) 回復(fù) 2023-08-18
?
紅糖糍粑

TA貢獻(xiàn)1815條經(jīng)驗(yàn) 獲得超6個(gè)贊

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


另外，還counter需要進(jìn)行初始化。


（您還需要一些條件來(lái)確定何時(shí)停止計(jì)數(shù)以避免溢出）。


<script>

  function runLoop(xcoord) {

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

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

  }


  var counter = 0;

  setInterval(runLoop, 16.7, counter++);


</script>


查看完整回答
反對(duì) 回復(fù) 2023-08-18
?
躍然一笑

TA貢獻(xiàn)1826條經(jīng)驗(yàn) 獲得超6個(gè)贊

setInterval的參數(shù)是錯(cuò)誤的，如果你想每秒運(yùn)行60次，你需要將間隔設(shè)置為1000 / 60。


現(xiàn)在我猜你正在嘗試設(shè)置動(dòng)畫(huà)循環(huán)。您可能想看看為此目的而制作的函數(shù)。


requestAnimationFrame(someCallback);

基本上，它是一個(gè)函數(shù)，它將注冊(cè)一個(gè)回調(diào)，以便在下一個(gè)瀏覽器渲染調(diào)用之前執(zhí)行。這意味著最多 60 次/秒，但如果瀏覽器難以計(jì)算，則可能會(huì)更少。


應(yīng)用于您的示例，它可能很簡(jiǎn)單：


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()


查看完整回答
反對(duì) 回復(fù) 2023-08-18
  • 3 回答
  • 0 關(guān)注
  • 193 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

 公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)