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:
貌似不可控,瀏覽器自己計算的
回答3:1s7幀這種刷新速率...本來就是'跳幀'的效果...
相關(guān)文章:
1. html - 對瀏覽器縮放然后大圖也縮放的問題。2. boot2docker無法啟動3. Docker for Mac 創(chuàng)建的dnsmasq容器連不上/不工作的問題4. docker start -a dockername 老是卡住,什么情況?5. debian - docker依賴的aufs-tools源碼哪里可以找到啊?6. docker網(wǎng)絡(luò)端口映射,沒有方便點(diǎn)的操作方法么?7. docker gitlab 如何git clone?8. angular.js - angularjs的自定義過濾器如何給文字加顏色?9. docker鏡像push報錯10. macos - mac下docker如何設(shè)置代理
