javascript - requestAnimationFrame如何控制幀速?
問(wèn)題描述
想在canvas里實(shí)現(xiàn)動(dòng)畫(huà),動(dòng)畫(huà)是每幀都畫(huà)在Sprite上連成一張圖的,試過(guò)用setTimeout實(shí)現(xiàn)動(dòng)畫(huà),發(fā)現(xiàn)會(huì)跳幀,但是requestAnimationFrame無(wú)法控制幀速,我希望1s畫(huà)7幀該怎么辦?
問(wèn)題解答
回答1:requestAnimationFrame就是在瀏覽器下一幀渲染時(shí)調(diào)用的,所以可以認(rèn)為requestAnimationFrame的調(diào)用速率就是瀏覽器的刷新速率,一般來(lái)說(shuō)是60幀
但是requestAnimationFrame調(diào)用callback的時(shí)候會(huì)傳入一個(gè)時(shí)間戳參數(shù),可以根據(jù)這個(gè)參數(shù)來(lái)進(jìn)行判斷從而處理你實(shí)際需要的幀速
比如要1秒7幀的話可以這樣寫(xiě)
let step = (timestamp, elapsed) => { if (elapsed > 1000 / 7) {//TO DO SOMETHINGelapsed = 0 }window.requestAnimationFrame(_timestamp => step(_timestamp, elapsed + _timestamp - timestamp) )}window.requestAnimationFrame(timestamp => step(timestamp, 0))回答2:
貌似不可控,瀏覽器自己計(jì)算的
回答3:1s7幀這種刷新速率...本來(lái)就是'跳幀'的效果...
相關(guān)文章:
1. javascript - node.js promise沒(méi)用2. golang - 用IDE看docker源碼時(shí)的小問(wèn)題3. c++ - 如何正確的使用QWebEngineView?4. yii2中restful配置好后在nginx下報(bào)404錯(cuò)誤5. javascript - js 寫(xiě)一個(gè)正則 提取文本中的數(shù)據(jù)6. 算法 - python 給定一個(gè)正整數(shù)a和一個(gè)包含任意個(gè)正整數(shù)的 列表 b,求所有<=a 的加法組合7. android 如何實(shí)現(xiàn)如圖中的鍵盤(pán)上的公式及edittext的內(nèi)容展示呢8. java - 我在用Struts2上傳文件時(shí),報(bào)以下錯(cuò)誤怎么回事?9. phpstudy 發(fā)現(xiàn)多個(gè)后門(mén)木馬,有人遇到過(guò)嗎?10. thinkphp6使用驗(yàn)證器 信息如何輸出到前端頁(yè)面
