العرض المسبق على قماش 2D

في محاولات تحسين الرسوم المتحركة ثنائية الأبعاد التي تم إنشاؤها في قماش ، تم العثور على خيار واحد مثير للاهتمام.

التصور الأولي - العرض المسبق.

"وماذا إذا قمت بتسجيل جميع الإطارات مقدمًا وعرضتها بعد نهاية الرسوم المتحركة؟" - فكرنا مع صديق وهذا ما حدث في اليوم التالي.

عرض حي

amedomary.ru/prerender-canvas

الرمز v1.0

الصفحة نفسها موجودة على Github .

المنطق بسيط للغاية ويتم تنفيذه في خطوتين:

الخطوة 1 - حفظ كل إطار من الرسوم المتحركة لدينا لمجموعة من الصور

  function renderLoop() {
    draw();

    // create prerender images
    canvasPrerender.toBlob(blob => {
      const reader = new FileReader();
      reader.readAsDataURL(blob);

      reader.onload = function() {
        const image = document.createElement("img");
        image.src = reader.result;
        prerenderArr.push(image);
      };
    });

    if (prerenderIsCompleted) {
      requestAnimationFrame(renderLoop);
    } else {
      requestAnimationFrame(drawPreImg);
    }
  }

2 — —

  function drawPreImg() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(prerenderArr[i], 0, 0);

    requestAnimationFrame(drawPreImg);
  }

Analytic

. macbook 13 2019 .

.

FPS

Fps "" .

Fps "" (prerender): 14-22
Fps "" ( ): 58-60

, live demo.

Prerender — 9
— 3
— 12 ( live demo)

CPU / Performance

كما يتضح من لقطة الشاشة أدناه - يعاني معالجنا فقط في مرحلة العرض المسبق. رسم الصور الجاهزة ليست صعبة.

ذاكرة

بالنسبة إلى الرسوم المتحركة الصغيرة مثل الرسوم المتحركة ، يستغرق هذا الأمر بأكمله:
~ 432/2 = 200 إطارًا
~ 25 ميغابايت

استنتاج

إذا كان لديك الفرصة للانتظار قبل عرض الرسوم المتحركة للمستخدم ولن تستهلك غيغابايت من الذاكرة - حاول أن تفعل شيئًا كهذا.

ملاحظة

إذا كان لديك أفكار حول تحسين أداء هذا النهج - اكتب :)