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 itu akan melangkau lakukan jika saya ingin melukis 7 bingkai dalam 1s?

Answer 1

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

Answer 2

Nampak tak terkawal, pelayar mengira sendiri

Answer 3

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