Bagaimanakah requestAnimationFrame mengawal kadar bingkai?

Question

Saya ingin melaksanakan animasi dalam kanvas Setiap bingkai animasi dilukis pada Sprite dan disambungkan ke dalam satu gambar. Saya cuba menggunakan setTimeout untuk melaksanakan animasi dan mendapati bahawa bingkai akan melangkaui Saya mahu melukis 7 bingkai dalam 1 saat?

过去多啦不再A梦 · Answer

requestAnimationFrame dipanggil apabila penyemak imbas memaparkan bingkai seterusnya, jadi boleh dianggap bahawa kadar panggilan requestAnimationFrame ialah kadar muat semula penyemak imbas, yang biasanya 60 bingkai

Tetapi apabila requestAnimationFrame memanggil panggilan balik, parameter cap masa akan dihantar masuk. Anda boleh menilai berdasarkan parameter ini untuk memproses kadar bingkai yang sebenarnya anda perlukan

Sebagai contoh, jika anda mahu 7 bingkai sesaat, anda boleh menulisnya seperti ini

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))

PHP中文网 · Answer

Nampak tak terkawal, pelayar mengira sendiri

迷茫 · Answer

Kadar penyegaran 1s7 bingkai...pada asasnya adalah kesan daripada "melangkau bingkai"...