हार्डवेयर से तेज़ी से चलने वाले ऐनिमेशन की क्षमताओं में अपडेट

Una Kravets

खास जानकारी: Chromium, SVG ऐनिमेशन और प्रतिशत पर आधारित ट्रांसफ़ॉर्मेशन के साथ-साथ, जल्द ही बैकग्राउंड के रंग और क्लिप-पाथ ऐनिमेशन के लिए, हार्डवेयर से तेज़ी लाने की अपनी क्षमताओं को अपने-आप अपडेट कर रहा है.

वेब ऐनिमेशन की परफ़ॉर्मेंस के मामले में, "हार्डवेयर से तेज़ी लाएं" और "GPU-एक्सेलरेटेड" ऐनिमेशन का इस्तेमाल किया जा सकता है. लेकिन इनका क्या मतलब है? हार्डवेयर की मदद से फटाफट काम करने वाले स्टाइल वे होते हैं जो विज़ुअल स्टाइल को रेंडर करने के लिए, सीपीयू (सेंट्रल प्रोसेसिंग यूनिट) के बजाय जीपीयू (ग्राफ़िकल प्रोसेसिंग यूनिट) का इस्तेमाल करते हैं. ऐसा इसलिए होता है, क्योंकि जीपीयू के मुकाबले जीपीयू ज़्यादा तेज़ी से वेब पेज पर विज़ुअल बदलाव रेंडर कर सकता है.

ग्राफ़िक इंटेंसिव ट्रांज़िशन और ऐनिमेशन को ऑफ़लोड करने के लिए, जीपीयू का इस्तेमाल करने का मतलब है आसान विज़ुअल और कम जैंक सेटिंग. ऐसा इसलिए, क्योंकि इन ऐनिमेशन पर मुख्य थ्रेड का कोई असर नहीं पड़ता. आपके ऐनिमेशन को मुख्य थ्रेड से खींचकर, पेज पर चल रही दूसरी ऐक्टिव स्क्रिप्ट को बायपास किया जा सकता है. इससे आपके विज़ुअल की रफ़्तार धीमी हो जाएगी और जैंक होने लगेगा.

हार्डवेयर की मदद से तेज़ी से चलने वाले ऐनिमेशन चालू करना

हार्डवेयर की मदद से दिखाए जाने वाले ऐनिमेशन को लेयर के तौर पर कंपोज़ किया जाता है. इससे डेवलपर को 60 FPS (फ़्रेम प्रति सेकंड) ऐनिमेशन बनाने में मदद मिलती है, ताकि विज़ुअल रेंडरिंग की परफ़ॉर्मेंस बेहतर हो सके. फ़िलहाल, वेब पर हार्डवेयर की मदद से तेज़ी से दिखाए जाने वाले ऐनिमेशन और ट्रांज़िशन की जानकारी देने और उन्हें चालू करने के कुछ तरीके दिए गए हैं:

• सीएसएस transform फ़ंक्शन का इस्तेमाल करें या opacity या filter वैल्यू का ट्रांज़िशन करें
• अपने एलिमेंट में will-change प्रॉपर्टी जोड़ें.
• OffscreenCanvas की मदद से ऐनिमेशन वाले कैनवस ड्रॉइंग बनाएं
• WebGL 3D ड्रॉइंग बनाना

Chromium में, किस तरह के कॉन्टेंट को डिफ़ॉल्ट रूप से हार्डवेयर ऐक्सेलरेटेड बनाया जा रहा है? SVG ऐनिमेशन के साथ-साथ कुछ अन्य काम भी चल रहे हैं. डेवलपर इसके लिए लगातार अनुरोध कर रहे हैं.

हार्डवेयर ऐक्सेलरेटेड SVG ऐनिमेशन

SVG की सुविधा किसी भी वेबसाइट के लिए एक बेहतरीन विकल्प है. साथ ही, अब SVG के साथ होने वाले इंटरैक्शन बेहतर परफ़ॉर्म कर सकते हैं. Chromium 89 के बाद, SVG ऐनिमेशन पर डिफ़ॉल्ट रूप से हार्डवेयर ऐक्सेलरेशन चालू करने के लिए Chrome, Firefox की पसंदों में शामिल हो जाएगा. डेवलपर को आपको क्या करना होगा? कुछ नहीं—यह Chromium 89 के बाद के वर्शन में SVG ऐनिमेशन के लिए अपने-आप लागू हो जाएगा.

उदाहरण

हार्डवेयर से तेज़ी लाने की सुविधा चालू होने पर और उसके बिना, SVG ऐनिमेशन के बीच के अंतरों पर एक नज़र डालते हैं. लोड होने की जानकारी देने वाले इंडिकेटर, आम तौर पर इस्तेमाल होने वाले यूज़र इंटरफ़ेस (यूआई) एलिमेंट होते हैं. उदाहरण के लिए, यह facebook.com पर देखा जा सकता है. ये इंंडिकेटर यह बताते हैं कि सर्वर पर कोई काम हो रहा है और उस समय उपयोगकर्ता जवाब का इंतज़ार करता है. यहां दिखाए गए मामले में, रिस्पॉन्स के तौर पर साइडबार में अन्य नतीजे लोड किए जाएंगे.

DevTools खुलने पर, हम प्रोफ़ाइल बनाना शुरू कर सकते हैं और सीपीयू और GPU के ज़रिए बनाए गए ऐनिमेशन के बीच के फ़र्क़ को देख सकते हैं.

आप देख सकते हैं कि बाईं ओर (Chromium 87), स्पिनर के ऐनिमेट होने पर (जो लगातार हो रहा है) फिर से पेंट होता है. दाईं ओर, फिर से पेंट करने की सुविधा नहीं है (Chromium 89 और Firefox). पेंट फ़्लैशिंग चालू करते समय, हम DevTools रेंडरिंग पैनल में इसकी जांच कर सकते हैं.

परफ़ॉर्मेंस पैनल को करीब से देखने पर, आपको यह असर फिर से दिखेगा. साथ ही, यह भी दिखेगा कि आपकी वेब प्रॉपर्टी की पूरी परफ़ॉर्मेंस पर इसका क्या असर पड़ता है. आपको ऐनिमेशन के लिए रेंडर और पेंटिंग करने में लगने वाले समय को पूरी तरह से नहीं दिखाना है. इसका मतलब है कि ऐनिमेशन में स्मूद ऐनिमेशन और बेहतर परफ़ॉर्मेंस देने वाले ऐप्लिकेशन इस्तेमाल किए जाते हैं. Facebook, SVG पर आधारित इस लोडर की शिपिंग तब तक नहीं करेगा, जब तक ब्राउज़र पर हार्डवेयर से तेज़ी से काम करने वाले SVG के लिए बेहतर सहायता बेहतर नहीं हो जाती. हालांकि, इससे थीम बनाने, स्केलिंग, और रिज़ॉल्यूशन की शर्तों के साथ-साथ रखरखाव के लिए ज़्यादा सुविधाएं मिलेंगी.

प्रतिशत वाले ऐनिमेशन

इंटरैक्शन टीम, Chromium 89 में ऐनिमेशन का प्रतिशत बदलने के लिए सहायता भी भेज रही है. प्रतिशत के हिसाब से बने ऐनिमेशन ऐसे इंटरैक्शन के बारे में बताते हैं जिनमें प्रतिशत के हिसाब से मूवमेंट शामिल होता है. उदाहरण के लिए, किसी चीज़ को 20% तक स्केल किया जा सकता है या translateX: -100% जैसे किसी टूल का इस्तेमाल करके, ऑफ़-स्क्रीन से रिस्पॉन्सिव साइडबार मेन्यू को स्लाइड किया जा सकता है.

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

आगे क्या करना है?

अपडेट किए गए ये ऐनिमेशन, वेब स्टाइलिंग को और आसान बना देंगे. जैसा कि ऊपर बताया गया है, टीम हमेशा यह देखती रहती है कि आने वाले समय में वेब से जुड़ी किस तरह की ज़रूरतों को पूरा किया जा सकता है. फ़िलहाल, हम background-color और clip-path को बदलकर, Chromium के आने वाले वर्शन में हार्डवेयर से तेज़ी लाने की सुविधा अपने-आप चालू करने वाले हैं.

ट्रांज़िशन और इफ़ेक्ट के लिए, background-color का इस्तेमाल ज़्यादा होने की वजह से इसे प्राथमिकता दी गई है. साथ ही, clip-path वेब पर ज़्यादा बेहतर ट्रांज़िशन इफ़ेक्ट की सुविधा देता है. जब परफ़ॉर्मेंस के साथ इंटरैक्टिविटी तय होती है, तो सभी का फ़ायदा होता है!

कवर इमेज: अनस्प्लैश के लिए सियोरा फ़ोटोग्राफ़ी.