मैं HTML5 कैनवास पर जटिल दृश्यों के जंक-मुक्त प्रतिपादन के साथ प्रयोग कर रहा हूं। विचार है कि प्रत्येक बैच के साथ अधिकतम बैच में प्रतिपादन को विभाजित करना, 12 एमएस कहें, ताकि समवर्ती रूप से चल रहे एनिमेशन (निष्पादित करने के लिए बहुत सस्ता) बाधित न हो।अनुरोधएनीमेशन फ्रेम फ्रेम के अंत से पहले सही कहा जाता है?
वैचारिक रूप से, बैच-प्रतिपादन इस तरह कार्यान्वित किया जाता है:
function draw(ctx) {
var deadline = window.performance.now() + 12; // inaccurate, but enough for the example
var i = 0;
requestAnimationFrame(function drawWithDeadline() {
for (; i < itemsToRender.length; i++) {
if (window.performance.now() >= deadline) {
requestAnimationFrame(drawWithDeadline);
return;
}
var item = itemsToDraw[i];
// Draw item
}
});
}
पूरा कोड इस JSFiddle में है: https://jsfiddle.net/fkfnjrc2/5/।
- प्रत्येक फ्रेम पर, सीएसएस कैनवास की संपत्ति को बदलने (जो समवर्ती समय से चल रहे तेज करने के लिए निष्पादित एनीमेशन का एक उदाहरण है) को संशोधित: कोड निम्नलिखित बातें करता है।
- थोड़ी देर में, ऊपर दिखाए गए बैच किए गए फैशन में कैनवास की पुन: प्रतिपादन शुरू करें।
दुर्भाग्यवश, मैं उस समय भयानक जा रहा हूं जब कैनवास सामग्री को फिर से प्रस्तुत किया जाता है।
गिरा फ्रेम तथ्य यह है कि requestAnimationFrame शुरू में सही नहीं बुलाया जाता है की वजह से हो रहे हैं: क्या मैं व्याख्या करने में सक्षम होने लगते हैं कि क्या Chrome डेवलपर टूल समय लग रहा है की तरह है फ्रेम के, लेकिन आदर्श 16ms अवधि के अंत की ओर। यदि कॉलबैक पिछले फ्रेम पूर्ण प्रतिपादन के ठीक बाद शुरू हुआ, तो कोड समय पर पूरा होने की संभावना है।
ऑफ-स्क्रीन कैनवास (https://jsfiddle.net/fkfnjrc2/6/) को प्रस्तुत करना और फिर स्क्रीन कैनवास में पूरी छवि की प्रतिलिपि बनाना थोड़ा सा मदद करता है, लेकिन जंक अभी भी वही विशेषताओं (आरएएफ कॉलबैक के निष्पादन में देरी) के साथ हैं।
उस कोड के साथ क्या गलत है? या शायद मेरे ब्राउज़र/मशीन के साथ कुछ गलत है? मैं विंडोज 10 और मैक ओएस पर क्रोम (49.0.2623.112) पर एक ही व्यवहार देख रहा हूं।