javascript - requestAnimationFrame如何控制幀速?
問題描述
想在canvas里實現(xiàn)動畫,動畫是每幀都畫在Sprite上連成一張圖的,試過用setTimeout實現(xiàn)動畫,發(fā)現(xiàn)會跳幀,但是requestAnimationFrame無法控制幀速,我希望1s畫7幀該怎么辦?
問題解答
回答1:requestAnimationFrame就是在瀏覽器下一幀渲染時調(diào)用的,所以可以認為requestAnimationFrame的調(diào)用速率就是瀏覽器的刷新速率,一般來說是60幀
但是requestAnimationFrame調(diào)用callback的時候會傳入一個時間戳參數(shù),可以根據(jù)這個參數(shù)來進行判斷從而處理你實際需要的幀速
比如要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幀這種刷新速率...本來就是'跳幀'的效果...
相關文章:
1. javascript - 這不是對象字面量函數(shù)嗎?為什么要new初始化?2. sql語句 - mysql中關聯(lián)表查詢問題3. javascript - 如何將一個div始終固定在某個位置;無論屏幕和分辨率怎么變化;div位置始終不變4. html5 - 有可以一次性把所有 css外部樣式轉(zhuǎn)為html標簽內(nèi)style=" "的方法嗎?5. javascript - vscode alt+shift+f 格式化js代碼,通不過eslint的代碼風格檢查怎么辦。。。6. html - vue項目中用到了elementUI問題7. javascript - 有什么比較好的網(wǎng)頁版shell前端組件?8. javascript - iframe 為什么加載網(wǎng)頁的時候滾動條這樣顯示?9. javascript - [js]為什么畫布里不出現(xiàn)圖片呢?在線等10. javascript - 原生canvas中如何獲取到觸摸事件的canvas內(nèi)坐標?
