文章詳情頁
javascript - requestAnimationFrame如何控制幀速?
瀏覽:128日期: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. HTML5不支持frameset一般怎么解決?2. javascript - Vue的計算屬性底層依賴原理是怎么樣?3. javascript - jquery怎么給select option一個點擊時觸發的事件,如圖 如果選擇自定義觸發一個時間?4. 網頁爬蟲 - python爬蟲用BeautifulSoup爬取<s>元素并寫入字典,但某些div下沒有這一元素,導致自動寫入下一條,如何解決?5. 百度地圖api - Android百度地圖SDK,MapView上層按鈕可見卻不可觸,怎么解決?6. mysql 獲取時間函數unix_timestamp 問題?7. html5 - canvas中的mousedrag事件,為什么鼠標拖出canvas,然后再次移入canvas,drag事件還觸發8. 新入手layuiadmin,部署到tp中。想用php自已寫一個后臺管理系統。9. javascript - react 組件 使用super()報錯10. javascript - es6擴展運算符...的問題
排行榜
