requestAnimationFrame()
Window requestAnimationFrame() metodi
Misol
requestAnimationFrame() metodidan foydalanish:
const adiv = document.getElementById('mydiv');
let leftpos = 0;
function movediv(timestamp){
leftpos += 1;
adiv.style.left = leftpos + 'px';
requestAnimationFrame(movediv);
}
requestAnimationFrame(movediv);
O‘zingiz sinab ko‘ring »
Tavsif
requestAnimationFrame() metodi brauzerga animatsiya bajarmoqchi ekaningizni bildiradi va keyingi qayta chizishdan oldin animatsiyani yangilash uchun ko‘rsatilgan funksiyani chaqirishni so‘raydi.
Eslatma: Agar keyingi qayta chizishda yana bir kadrni animatsiya qilmoqchi bo‘lsangiz, callback funksiyangizning o‘zi requestAnimationFrame() ni chaqirishi kerak.
Maslahat: Ekrandagi animatsiyangizni yangilashga tayyor bo‘lganingizda har safar ushbu metodni chaqirishingiz kerak, chunki:
- Brauzer uni optimallashtira oladi, shuning uchun animatsiyalar silliqroq bo‘ladi
- Faol bo‘lmagan varaqlardagi animatsiyalar to‘xtaydi va protsessor dam oladi
- Batareyani kamroq sarflaydi
Brauzerlarda qo‘llab-quvvatlash
| Metod | |||||
|---|---|---|---|---|---|
| requestAnimationFrame() | 24.0 | 10.0 | 23.0 | 6.1 | 15.0 |
Sintaksis
requestAnimationFrame(callback)
Parametr qiymatlari
| Parametr | Tip | Tavsif |
|---|---|---|
| callback | Function | Majburiy. Keyingi qayta chizish uchun animatsiyani yangilash vaqti kelganda chaqiriladigan funksiya. Callback funksiyasi bitta argument — DOMHighResTimeStamp qabul qiladi; u requestAnimationFrame() callback funksiyalarini ishga tushira boshlagan paytdagi joriy vaqtni (performance.now() qaytaradigan vaqtni) bildiradi |
Texnik tafsilotlar
| Qaytariladigan qiymat: | Uzun butun son (long integer). Callback funksiyalari ro‘yxatidagi yozuvni noyob tarzda aniqlaydigan so‘rov identifikatori. Yangilash callback so‘rovini bekor qilish uchun bu qiymatni window.cancelAnimationFrame() ga uzatishingiz mumkin |
|---|
Tegishli sahifalar
Window obyekti: cancelAnimationFrame() metodi
❮ Window obyekti
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!