文章詳情頁
javascript - requestAnimationFrame如何控制幀速?
瀏覽:99日期:2022-12-11 15:11:44
問題描述
想在canvas里實現動畫,動畫是每幀都畫在Sprite上連成一張圖的,試過用setTimeout實現動畫,發現會跳幀,但是requestAnimationFrame無法控制幀速,我希望1s畫7幀該怎么辦?
問題解答
回答1:requestAnimationFrame就是在瀏覽器下一幀渲染時調用的,所以可以認為requestAnimationFrame的調用速率就是瀏覽器的刷新速率,一般來說是60幀
但是requestAnimationFrame調用callback的時候會傳入一個時間戳參數,可以根據這個參數來進行判斷從而處理你實際需要的幀速
比如要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幀這種刷新速率...本來就是'跳幀'的效果...
標簽:
JavaScript
相關文章:
1. 老哥們求助啊2. tp6表單令牌3. django - 后臺返回的json數據經過Base64加密,獲取時用python如何解密~!4. 我在centos容器里安裝docker,也就是在容器里安裝容器,報錯了?5. 我的html頁面一提交,網頁便顯示出了我的php代碼,求問是什么原因?6. docker 17.03 怎么配置 registry mirror ?7. node.js - node 客戶端socket一直報錯Error: read ECONNRESET,用php的socket沒問題哈。。8. node.js - nodejs中把熱request保存下來,使用JSON.stringify(req)報錯,請問怎么解決?9. javascript - canvas 可以實現 PS 魔法橡皮擦的功能嗎?10. angular.js - 如何通俗易懂的解釋“依賴注入”?
排行榜
