🛌🏼 🧗🏼 👆🏼 उन्नत एनिमेशन requestAnimationFrame के साथ 👸🏽 🏨 ☝🏿

यदि आपने एनिमेशन करने के लिए कभी कोड नहीं लिखा है, तो आप आगे नहीं पढ़ सकते हैं :)

अनुरोध क्या है

आपकी सभी एनीमेशन विशेषताओं में, आप हर कुछ मिलीसेकंड में परिवर्तन लागू करने के लिए एक दोहराए जाने वाले टाइमर का उपयोग करते हैं। अच्छी खबर यह है: ब्राउज़र निर्माताओं ने फैसला किया है "हम आपको इसके लिए एपीआई क्यों नहीं देते क्योंकि हम आपके लिए कुछ बिंदुओं को अनुकूलित करने में सक्षम हो सकते हैं।" इसलिए, यह DOM शैलियों को बदलने, कैनवास को बदलने या वेबजीएल पर आधारित एनिमेशन बनाने के लिए मुख्य एपीआई है

मुझे इसका उपयोग क्यों करना चाहिए?

ब्राउज़र्स एक ही समय में चल रहे एनिमेशन को अनुकूलित कर सकते हैं, जिससे रिफ्लो और रेपेंट की संख्या कम हो सकती है, जो बदले में एनीमेशन की सटीकता को बढ़ाएगा। उदाहरण के लिए, जावास्क्रिप्ट में एनिमेशन सीएसएस संक्रमण या एसवीजी एसएमआईएल के साथ सिंक्रनाइज़ हैं। इसके अलावा, अगर एनीमेशन एक टैब में किया जाता है जो अदृश्य है, तो ब्राउज़र फिर से चालू नहीं रहेंगे , जिससे सीपीयू, जीपीयू, मेमोरी का कम उपयोग होगा और परिणामस्वरूप मोबाइल उपकरणों में बैटरी की खपत कम हो जाएगी।

उदाहरण का उपयोग करें

//    -    window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function(/* function */ callback, /* DOMElement */ element){ window.setTimeout(callback, 1000 / 60); }; })(); // : (function animloop(){ render(); requestAnimFrame(animloop, element); })();

नोट: मैं requestAnimFrame का उपयोग करता हूं क्योंकि विनिर्देश अभी भी विकास के अधीन है और इसलिए मैं एक वैश्विक अनुरोध की घोषणा नहीं करना चाहता हूं। अग्रिम में नामकरण करें (पॉलीफ़िल लागू करें)

यहां देखें क्रिया: jsfiddle.net/paul/XQpzU

requestAnimationFrame API

 window.requestAnimationFrame(function(/* time */ time){ // time ~= +new Date }, /*   */ elem);

वर्तमान समय कॉलबैक में स्थानांतरित हो गया है, यह आपके लिए वैसे भी आवश्यक होगा। दूसरा पैरामीटर वर्तमान एनीमेशन (अनुकूलन के लिए) से जुड़े तत्व को पास करता है। कैनवास और वेबजीएल के लिए, यह <कैनवास> तत्व होगा। अन्य एनिमेशन के लिए, आप प्रदर्शन में सुधार के लिए कुछ भी स्थानांतरित नहीं कर सकते हैं या कुछ भी परिभाषित नहीं कर सकते हैं।

पहले से ही इस्तेमाल किया जा सकता है?

अब वेबकिट ( नाइटली सफारी और क्रोम देव चैनल ) और मोज़िला (एफएफ 4) थोड़ा अलग हैं। मोज़िला में एक बग है जो एनीमेशन के फ़्रेम की संख्या को सीमित करता है (लगभग 30) वास्तव में, "यह 1000 / (16 + एन) एफपीएस तक सीमित है, जहां एन एनीमेशन प्रदर्शन करने के लिए आवश्यक मिलीसेकंड की संख्या है। यदि फ़ंक्शन 1 सेकंड लेता है, तो फ़्रेम की संख्या 1 प्रति सेकंड से कम होगी। यदि एनीमेशन फ़ंक्शन 1 एमएस लेता है, तो फ्रेम की संख्या लगभग 60 होगी । यह अगले एफएफ रिलीज पर तय किया जाएगा, लेकिन एफएफ 4 के बाद। इसके अलावा, क्रोम 10 में समय पैरामीटर (m11 में जोड़ा गया) नहीं है, एफएफ अब एलम तर्क को अनदेखा करता है।

समीक्षा लिखें!

यदि आप एनिमेशन के साथ काम करते हैं, तो वेबकिट और गेको के डेवलपर्स आपकी प्रतिक्रिया और सुझावों को सुनकर खुश होंगे। ड्राफ्ट स्पेसिफिकेशन के लिए requestAnimationFrame को देखें। अब यह सेटटाइमआउट की तरह काम करता है; क्या यह setInterval के साथ बदलने के लायक है? क्या एक ही समय में कई वस्तुओं को एनिमेट करते समय इस एपीआई में खामियां हैं? क्या एलिमेंट ऑप्टिमाइज़ेशन काम करता है? क्या यह एपीआई सभी एनीमेशन जरूरतों को कवर करता है?

अन्य स्रोत

ड्राफ्ट कल्पना (हाइकैम और जैमसर द्वारा लिखित)
क्रोमियम डिज़ाइन डॉक
एक मूल उदाहरण
कुछ उपलब्ध कॉन्फ़िगरेशन के साथ एक अधिक व्यापक उदाहरण
MoCRequestAnimationFrame पर MDC डॉक्स
एनिमेशन टाइमर्स यूआई एनीमेशन लूप , थ्री.जेएस , लाइमज , जीआईसी के कार्यान्वयन के लिए टिकट का उपयोग करते हुए पुस्तकालय
प्रोसेसर लोड पर स्विच करते समय टैब पर लुईस-रेमी बाबे द्वारा प्रदर्शित किया गया
नोकर्मा के अनुरोध का कवरेज
मोज़िला के रॉबर्ट ओ'कैल्हान ने आरएएफ पर शुरुआती पोस्ट की

उन्नत एनिमेशन requestAnimationFrame के साथ