एचटीएमएल कैनवास इंटरवल बनाम RequestAnimationFrame

Question

तो, शायद यहां कुल दिमाग। setInterval() के लिए वाक्यविन्यास बहुत स्पष्ट है। हर एक्स miliseconds कुछ करो। requestAnimationFrame() का उपयोग करने के लिए इसका सबसे अच्छा अनुवाद कैसे किया जाता है?

मेरे पास लगभग 300 ऑब्जेक्ट हैं और प्रत्येक को एक निश्चित अंतराल (प्रत्येक 8, 6, 2, आदि सेकंड) पर एनीमेशन अनुक्रम करने वाला माना जाता है? requestAnimationFrame() का उपयोग करके मैं इसे सबसे अच्छा कैसे पूरा कर सकता हूं जिसे ~ 60 बार सेकेंड कहा जाता है? शायद एक आसान जवाब है, मैं बस, मेरे जीवन के लिए, इसे समझ नहीं सकता।

Answer 1

requestAnimationFrame बहुत कम स्तर है, यह केवल वही करता है जो आपने पहले ही कहा था: मोटे तौर पर 60fps पर कॉल किया जाता है (यह मानते हुए कि ब्राउजर उस गति को बनाए रख सकता है)। तो आम तौर पर आपको इसके ऊपर कुछ बनाने की आवश्यकता होगी, एक गेम इंजन की तरह जिसमें गेम लूप होता है।

मेरे खेल इंजन में, मैं इस (paraphased/यहाँ सरलीकृत) है:

window.requestAnimationFrame(this._doFrame); 

... 

_doFrame: function(timestamp) { 
    var delta = timestamp - (this._lastTimestamp || timestamp); 

    for(var i = 0, len = this.elements.length; i < len; ++i) { 
     this.elements[i].update(delta); 
    } 

    this._lastTimestamp = timestamp; 

    // I used underscore.js's 'bindAll' to make _doFrame always 
    // get called against my game engine object 
    window.requestAnimationFrame(this._doFrame); 
} 

तब मेरे खेल इंजन में प्रत्येक तत्व खुद को अपडेट करने के बारे में जानता है।

update: function(delta) { 
    this.elapsed += delta; 

    // has 8 seconds passed? 
    if(this.elapsed >= 8000) { 
      this.elapsed -= 8000; // reset the elapsed counter 
      this.doMyUpdate(); // whatever it should be 
    } 
} 

साथ requestAnimationFrame साथ नहीं बल्कि कम स्तर हैं Canvas API, वे हैं: अपने मामले प्रत्येक तत्व है कि अद्यतन करना चाहिए में हर 2, 6, 8 सेकंड कितना समय बीत गया है का ट्रैक रखने और तदनुसार अपडेट करनी होगी एनीमेशन और गेम इंजन जैसी चीजों के लिए ब्लॉक बनाना। यदि संभव हो तो मैं इन दिनों cocos2d-js या जो कुछ भी बाहर है, मौजूदा मौजूदा का उपयोग करने का प्रयास करूंगा।

Answer 2

अनुरोध को मजबूर करने के लिए एनीमेशन फ्रेम एक विशिष्ट एफपीएस से चिपकने के लिए आप दोनों एक बार में उपयोग कर सकते हैं!

var fps = 15; 
function draw() { 
    setTimeout(function() { 
     requestAnimationFrame(draw); 
     // Drawing code goes here 
    }, 1000/fps); 
} 

थोड़ा अजीब, लेकिन दुनिया में सबसे भ्रमित चीज नहीं है।

आपने जिन वस्तुओं पिछले कॉल के बाद समय के अंतर के आधार अद्यतन करने की आवश्यकता है कि आकर्षित करने के लिए में requestAnimationFrame उपयोग कर सकते हैं एफपीएस के साथ नहीं लेकिन बीता हुआ समय के साथ:

var time; 
function draw() { 
    requestAnimationFrame(draw); 
    var now = new Date().getTime(), 
     dt = now - (time || now); 

    time = now; 

    // Drawing code goes here... for example updating an 'x' position: 
    this.x += 10 * dt; // Increase 'x' by 10 units per millisecond 
} 

इन दोनों के टुकड़े this fine article से कर रहे हैं, जिसमें अतिरिक्त विवरण शामिल हैं।

रास्ते से अच्छा सवाल! मुझे नहीं लगता कि मैंने इसे SO पर उत्तर दिया है (और मैं यहां बहुत अधिक हूं)