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. javascript - 在靜態(tài)頁面上用load 引入的頁面文件問題?2. javascript - vue組件通過eventBus通信時,報錯a.$on is not a function3. javascript - webpack打包后的bundlejs文件代碼不知道什么意思.4. java - oracle對漢字字段按照拼音排序的函數(shù)和sql語句是什么?5. Java游戲服務(wù)器開發(fā)和網(wǎng)站、app服務(wù)端的開發(fā)都差不多的嗎???實(shí)現(xiàn)的思路和方法6. html - 哪些情況下float會失效?7. css - 關(guān)于ul的布局8. css - 如何使用 vue transition 實(shí)現(xiàn) ios 按鈕一樣的平滑切換效果9. java后臺導(dǎo)出頁面到pdf10. 代理 - 一個nginx需求,訪問web服務(wù)時,若用戶為測試用戶則轉(zhuǎn)發(fā)到web服務(wù)的測試版本
