requestAnimationFrame IE10

Question

में अप्रत्याशित पैरामीटर गुजर रहा है

तो मैं एक अच्छा शुद्ध नागरिक गया है, सुविधा का पता लगाने का उपयोग कर ब्राउज़र requestAnimationFrame का समर्थन करता है या नहीं और केवल वापस एक setTimeout आधारित समाधान के लिए अन्यथा (Paul Irish's famous post की तर्ज चारों ओर कुछ) गिर जाते हैं।

var NOW = Date.now || function() { return new Date.getTime(); }; 
var reqAnimFrame = 
     window.requestAnimationFrame || 
     window.webkitRequestAnimationFrame || 
     /*      ... ||      */ 
     function (callback) { 
      setTimeout(function() { callback(NOW()); }, 1000/60); 
     }; 

var previousTime = NOW(); 
function animStep(time) { 
    var timePassed = time - previousTime; 
    myCharacter.move(myCharacter.speed * timePassed); 
    previousTime = time; 
    reqAnimationFrame(animStep); 
} 

// start the animation 
reqAnimationFrame(animStep); 

यह इंटरनेट एक्सप्लोरर 10 के साथ आने तक हर जगह महान काम करता था। आईई 10 में, time पारित पैरामीटर वर्तमान समय के साथ कुछ भी करने के लिए प्रतीत नहीं होता है, timePassed की गणना को खराब कर रहा है।

क्या चल रहा है?

Answer 1

सभी (के रूप में तक मुझे पता है) अन्य ब्राउज़र में विनिर्देश द्वारा requestAnimationFrame जाने को लागू (लेखन के समय) वर्तमान Working Draft:

समय हो [redraw समय] चलो व्यक्त 1970-01-01T00: 00: 00Z के बाद मिलीसेकंड की संख्या के रूप में।

यह आपके NOW() करता है जैसे समय का प्रतिनिधित्व करता है।

IE10 हालांकि वर्तमान Editor's Draft में कल्पना द्वारा goes:

चलो समय इस संदर्भ में now method of the Performance interface लागू का नतीजा हो।

कौन सा अनिवार्य रूप से मिलीसेकेंड की संख्या का मतलब है के बाद से ब्राउज़र यह पेज भरी हुई है (यह भी मतलब है और अधिक सटीक माप, performance.now रिटर्न आंशिक मिलीसेकेंड के बाद से है)।

और इस प्रकार जब आप आईई 10 में पहली बार timePassed की गणना करते हैं, तो आपको नकारात्मक 43 साल की तरह कुछ मिल रहा है।

सौभाग्य से, क्योंकि requestAnimationFrame पर दिए गए मान को किसी भी मामले में एक ही इकाई है, संदर्भ के एक अलग बिंदु, आप आसानी से इसे समायोजित कर सकते हैं।

1. तुम बस पहले ही एनीमेशन कदम दूर फेंक सकता है, यह का उपयोग कर केवलpreviousTime स्थापित करने के लिए है, लेकिन कुछ भी नहीं कर रही है:

   तीन संभावनाएं हैं।

2. आप पास पैरामीटर को अनदेखा कर सकते हैं और हर बार अपने NOW() (या performance.now) का उपयोग कर सकते हैं, इस प्रकार हमेशा संदर्भ के समान बिंदु होते हैं।

3. या आप इस के लिए एनीमेशन की शुरुआत को बदल सकता है:

   // start the animation 
   reqAnimationFrame(function (t) { 
       previousTime = t - (NOW() - previousTime); 
       animStep(t); 
   ); 
   

   यह (पहले एक सहित) गणना कर देगा timePassed की कोई बात नहीं है जो विशिष्ट जानकारी ब्राउज़र इस प्रकार को ठीक करें। और चूंकि यह केवल पहला आविष्कार बदलता है, इसलिए आपके पास लंबे समय तक कोई अतिरिक्त ओवरहेड नहीं है।