How does requestAnimationFrame control frame rate?-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

How does requestAnimationFrame control frame rate?

仅有的幸福 2017-05-16 13:44:28

619

I want to implement animation in canvas. Each frame of animation is drawn on Sprite and connected into one picture. I tried using setTimeout to implement animation and found that frames would jump. However, requestAnimationFrame cannot control the frame rate. I hope to draw 7 frames in 1s. what to do?

仅有的幸福

reply all (3)

过去多啦不再A梦2017-05-16 13:46:28 3 floor

requestAnimationFrame is called when the browser renders the next frame, so it can be considered that the calling rate of requestAnimationFrame is the refresh rate of the browser, which is generally 60 frames

But when requestAnimationFrame calls callback, a timestamp parameter will be passed in. You can judge based on this parameter to process the frame rate you actually need

For example, if you want 7 frames per second, you can write it like this

let step = (timestamp, elapsed) => { if (elapsed > 1000 / 7) { //TO DO SOMETHING elapsed = 0 } window.requestAnimationFrame( _timestamp => step(_timestamp, elapsed + _timestamp - timestamp) ) } window.requestAnimationFrame(timestamp => step(timestamp, 0))