कैनवास 2 डी पर प्रेंडरेंडर

कैनवास में बनाए गए 2 डी एनीमेशन को अनुकूलित करने के प्रयासों में, एक दिलचस्प विकल्प मिला।

प्रारंभिक दृश्य - prerender।

"और क्या होगा यदि आप अग्रिम में सभी फ़्रेमों को रिकॉर्ड करते हैं और एनीमेशन के अंत के बाद उन्हें दिखाते हैं?" - हमने एक दोस्त के साथ सोचा और अगले दिन यही हुआ।

लाइव डेमो

amedomary.ru/prerender-canvas

कोड v1.0

पेज खुद गितुब पर है ।

तर्क बहुत सरल है और इसे 2 चरणों में लागू किया गया है:

चरण 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 mb

निष्कर्ष

यदि आपके पास उपयोगकर्ता को एनीमेशन दिखाने से पहले प्रतीक्षा करने का अवसर है और यह गीगाबाइट मेमोरी को नहीं खाएगा - ऐसा कुछ करने का प्रयास करें।

पुनश्च

यदि आपके पास इस दृष्टिकोण के प्रदर्शन में सुधार करने के बारे में विचार हैं - लिखें :)