RequestAnimationFrame Fps Stabilization

أصبح RequestAnimationFrame (rAF) سائدًا في الرسوم المتحركة، مما يوفر تنفيذًا سلسًا وفعالًا. ومع ذلك، فإن التحكم في معدل الإطارات (FPS) لضمان الاتساق قد يكون أمرًا صعبًا.

خنق rAF إلى FPS محدد

لخنق rAF إلى FPS معين، يمكنك وقت الرافعة المالية المنقضي منذ تنفيذ الإطار الأخير. سيتم تنفيذ رمز الرسم الخاص بك فقط عند انقضاء الفاصل الزمني المطلوب لإطار الإطارات في الثانية (FPS).

مقتطف الكود

تهيئة متغيرات المؤقت وبدء الرسوم المتحركة:

var stop = false; فار إطار عدد = 0; var fps، fpsInterval، startTime، now، إذن، انقضى؛ وظيفة startAnimating(fps) { fpsInterval = 1000 / إطار في الثانية؛ ثم = Date.now(); startTime = ثم؛ تحريك () ؛

var stop = false;
var frameCount = 0;
var fps, fpsInterval, startTime, now, then, elapsed;

function startAnimating(fps) {
    fpsInterval = 1000 / fps;
    then = Date.now();
    startTime = then;
    animate();
}

function animate() { requestAnimationFrame(animate); الآن = Date.now(); انقضى = الآن - ثم؛ إذا (المنقضي> fpsInterval) { ثم = الآن - (المنقضية٪ fpsInterval)؛ // رمز الرسم الخاص بك موجود هنا }

function animate() {

    requestAnimationFrame(animate);

    now = Date.now();
    elapsed = now - then;

    if (elapsed > fpsInterval) {
        then = now - (elapsed % fpsInterval);
        // Your drawing code goes here
    }
}