文章詳情頁
javascript - requestAnimationFrame如何控制幀速？
瀏覽：291日期：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. angular.js - angular內容過長展開收起效果2. dockerfile - [docker build image失敗- npm install]3. 在windows下安裝docker Toolbox 啟動Docker Quickstart Terminal 失??！4. docker-compose中volumes的問題5. golang - 用IDE看docker源碼時的小問題6. Docker for Mac 創建的dnsmasq容器連不上/不工作的問題7. mac里的docker如何命令行開啟呢？8. 我在centos容器里安裝docker，也就是在容器里安裝容器，報錯了？9. docker內創建jenkins訪問另一個容器下的服務器問題10. nignx - docker內nginx 80端口被占用
排行榜
網公網安備