javascript - requestAnimationFrame如何控制幀速?
問題描述
想在canvas里實(shí)現(xiàn)動畫,動畫是每幀都畫在Sprite上連成一張圖的,試過用setTimeout實(shí)現(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)行判斷從而處理你實(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:
貌似不可控,瀏覽器自己計(jì)算的
回答3:1s7幀這種刷新速率...本來就是'跳幀'的效果...
相關(guān)文章:
1. 哭遼 求大佬解答 控制器的join方法怎么轉(zhuǎn)模型方法2. sql語句 - 如何在mysql中批量添加用戶?3. mysql - 數(shù)據(jù)庫表中,兩個表互為外鍵參考如何解決4. mysql - 表名稱前綴到底有啥用?5. 編輯成功不顯示彈窗6. 怎么php怎么通過數(shù)組顯示sql查詢結(jié)果呢,查詢結(jié)果有多條,如圖。7. mysql - 怎么生成這個sql表?8. mysql儲存json錯誤9. 在mybatis使用mysql的ON DUPLICATE KEY UPDATE語法實(shí)現(xiàn)存在即更新應(yīng)該使用哪個標(biāo)簽?10. Navicat for mysql 中以json格式儲存的數(shù)據(jù)存在大量反斜杠,如何去除?
