文章詳情頁
javascript - requestAnimationFrame如何控制幀速？
瀏覽：132日期：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. java - Spring MVC怎么實現提交表單后跳轉？2. javascript - table列過多，有什么插件可以提供列排序和選擇顯示列的功能3. java - input file類型上傳了一個文件，想計算一下上傳文件的大小？4. python - 為什么正常輸出中文沒有亂碼，zip函數之后出現中文編程unicode編碼的問題，我是遍歷輸出的啊。5. javascript - windows下如何使用babel，遇到了困惑6. html - vue項目中用到了elementUI問題7. JavaScript事件8. showpassword里的this 是什么意思？代表哪個元素9. 對mysql某個字段監控的功能10. javascript - js中向下取整
排行榜
網公網安備