javascript - requestAnimationFrame如何控制幀速?
問題描述
想在canvas里實現(xiàn)動畫,動畫是每幀都畫在Sprite上連成一張圖的,試過用setTimeout實現(xiàn)動畫,發(fā)現(xiàn)會跳幀,但是requestAnimationFrame無法控制幀速,我希望1s畫7幀該怎么辦?
問題解答
回答1:requestAnimationFrame就是在瀏覽器下一幀渲染時調(diào)用的,所以可以認(rèn)為requestAnimationFrame的調(diào)用速率就是瀏覽器的刷新速率,一般來說是60幀
但是requestAnimationFrame調(diào)用callback的時候會傳入一個時間戳參數(shù),可以根據(jù)這個參數(shù)來進(jìn)行判斷從而處理你實際需要的幀速
比如要1秒7幀的話可以這樣寫
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:
貌似不可控,瀏覽器自己計算的
回答3:1s7幀這種刷新速率...本來就是'跳幀'的效果...
相關(guān)文章:
1. javascript - axios請求回來的數(shù)據(jù)組件無法進(jìn)行綁定渲染2. javascript - main head .intro-text{width:40%} main head{display:flex}為何無效?3. java - 在用戶不登錄的情況下,用戶如何添加保存到購物車?4. javascript - JS變量被清空5. javascript - jQuery post()方法,里面的請求串可以轉(zhuǎn)換為GBK編碼么?可以的話怎樣轉(zhuǎn)換?6. Python中使用超長的List導(dǎo)致內(nèi)存占用過大7. css3 - 純css實現(xiàn)點擊特效8. 安全性測試 - nodejs中如何防m(xù)ySQL注入9. javascript - 關(guān)于apply()與call()的問題10. javascript - 有適合開發(fā)手機(jī)端Html5網(wǎng)頁小游戲的前端框架嗎?
