अगर requestAnimationFrame का इस्तेमाल किया जा रहा है, तो आपको स्क्रीन के रीफ़्रेश रेट के हिसाब से सिंक किए गए पेंट देखने में मज़ा आया होगा. इसकी वजह से, सबसे ज़्यादा हाई-फ़िडेलिटी वाले ऐनिमेशन दिखते हैं. साथ ही, जब उपयोगकर्ता किसी दूसरे टैब पर स्विच करते हैं, तो इससे सीपीयू के फ़ैन की आवाज़ कम होती है और बैटरी की खपत भी कम होती है.
हालांकि, एपीआई के कुछ हिस्से में बदलाव होने वाला है. आपके कॉलबैक फ़ंक्शन में पास किया गया टाइमस्टैंप, पेज खुलने के बाद से, सामान्य Date.now() जैसे टाइमस्टैंप से, फ़्लोटिंग पॉइंट मिलीसेकंड के हाई-रिज़ॉल्यूशन मेज़रमेंट में बदल रहा है. अगर इस वैल्यू का इस्तेमाल किया जाता है, तो आपको अपना कोड अपडेट करना होगा. इसके लिए, नीचे दी गई जानकारी देखें.
साफ़ तौर पर बताने के लिए, यहां हम इनके बारे में बात कर रहे हैं:
// assuming requestAnimationFrame method has been normalized for all vendor prefixes..
requestAnimationFrame(function(timestamp){
// the value of timestamp is changing
});
अगर यहां दिए गए सामान्य requestAnimFrame शिम का इस्तेमाल किया जा रहा है, तो इसका मतलब है कि टाइमस्टैंप वैल्यू का इस्तेमाल नहीं किया जा रहा है. अब आपको कोई शुल्क नहीं देना होगा. :)
क्यों
क्यों? rAF की मदद से, 60 एफ़पीएस (फ़्रेम प्रति सेकंड) की बेहतरीन सुविधा मिलती है. यह दर सबसे सही होती है. 60 एफ़पीएस का मतलब है कि हर फ़्रेम में 16.7 मिलीसेकंड लगते हैं. हालांकि, इंटिजर मिलीसेकंड में मेज़र करने का मतलब है कि हमें जो भी डेटा देखना और टारगेट करना है उसके लिए हमारे पास 1/16 की सटीक जानकारी है.
जैसा कि ऊपर देखा जा सकता है, नीले रंग का बार दिखाता है कि 60 एफ़पीएस पर नया फ़्रेम पेंट करने से पहले, आपको अपना सारा काम पूरा करने के लिए ज़्यादा से ज़्यादा कितना समय मिलेगा. शायद आपने 16 से ज़्यादा चीज़ें की हों, लेकिन इंटिजर मिलीसेकंड में, सिर्फ़ उन चीज़ों को शेड्यूल और मेज़र किया जा सकता है जो बहुत ज़्यादा इंक्रीमेंट में होती हैं. यह जवाब काफ़ी नहीं है.
हाई रिज़ॉल्यूशन टाइमर, ज़्यादा सटीक जानकारी देकर इस समस्या को हल करता है:
Date.now() // 1337376068250
performance.now() // 20303.427000007
फ़िलहाल, हाई रिज़ॉल्यूशन वाला टाइमर Chrome में window.performance.webkitNow() के तौर पर उपलब्ध है. आम तौर पर, यह वैल्यू rAF कॉलबैक में पास की गई नई आर्ग्युमेंट वैल्यू के बराबर होती है. जब स्पेसिफ़िकेशन को स्टैंडर्ड के मुताबिक तैयार कर लिया जाएगा, तब इस तरीके से प्रीफ़िक्स हटा दिया जाएगा और यह performance.now() के ज़रिए उपलब्ध हो जाएगा.
आपको यह भी दिखेगा कि ऊपर दी गई दो वैल्यू, एक-दूसरे से काफ़ी अलग हैं. performance.now(), फ़्लोटिंग पॉइंट के मिलीसेकंड में मेज़र किया जाता है. यह मेज़रमेंट, उस पेज के लोड होने के बाद से शुरू होता है (खास तौर पर performance.navigationStart).
इस्तेमाल किया जा रहा है
इस डिज़ाइन पैटर्न का इस्तेमाल करने वाली ऐनिमेशन लाइब्रेरी से मुख्य समस्याएं आती हैं:
function MyAnimation(duration) {
this.startTime = Date.now();
this.duration = duration;
requestAnimFrame(this.tick.bind(this));
}
MyAnimation.prototype.tick = function(time) {
var now = Date.now();
if (time > now) {
this.dispatchEvent("ended");
return;
}
...
requestAnimFrame(this.tick.bind(this));
}
इसे ठीक करने के लिए, window.performance.now() का इस्तेमाल करने के लिए startTime और now को बढ़ाएं.
this.startTime = window.performance.now ?
(performance.now() + performance.timing.navigationStart) :
Date.now();
यह एक बहुत ही आसान तरीका है. इसमें प्रीफ़िक्स वाले now() मेथड का इस्तेमाल नहीं किया जाता. साथ ही, यह Date.now() के साथ काम करने की सुविधा का भी अनुमान लगाता है, जो IE8 में नहीं है.
फ़ीचर का पता लगाना
अगर ऊपर दिए गए पैटर्न का इस्तेमाल नहीं किया जा रहा है और आपको सिर्फ़ यह पता करना है कि आपको किस तरह की कॉलबैक वैल्यू मिल रही है, तो इस तकनीक का इस्तेमाल करें:
requestAnimationFrame(function(timestamp){
if (timestamp < 1e12){
// .. high resolution timer
} else {
// integer milliseconds since unix epoch
}
// ...
if (timestamp < 1e12) की जांच करके, यह पता लगाया जा सकता है कि हम कितने बड़े डेटा से निपट रहे हैं. तकनीकी तौर पर, यह गलत नतीजा दे सकता है. हालांकि, ऐसा सिर्फ़ तब होगा, जब कोई वेबपेज 30 साल तक लगातार खुला रहे. हालांकि, हम यह जांच नहीं कर पा रहे हैं कि यह फ़्लोटिंग पॉइंट वाली संख्या है या पूर्णांक में बदली गई है. ज़्यादा रिज़ॉल्यूशन वाले टाइमर का अनुरोध करें. ऐसा करने पर, आपको किसी समय पूर्णांक वैल्यू मिलना तय है.
हम इस बदलाव को Chrome 21 में लागू करने जा रहे हैं. इसलिए, अगर आपने पहले से ही इस कॉलबैक पैरामीटर का फ़ायदा लेना शुरू कर दिया है, तो अपना कोड ज़रूर अपडेट करें!