बहुत ज़्यादा शब्द हैं, पढ़ा नहीं गया
Chrome 53 से, सभी कॉन्टेंट के ट्रांसफ़ॉर्म स्केल में बदलाव होने पर, उसे फिर से रास्टर कर दिया जाता है. ऐसा तब होता है, जब कॉन्टेंट में will-change: transform सीएसएस प्रॉपर्टी न हो. दूसरे शब्दों में, will-change: transform का मतलब है "कृपया इसे तेज़ी से ऐनिमेट करें".
यह सिर्फ़ उन स्केल पर लागू होता है जो स्क्रिप्ट में बदलाव करके होते हैं. यह सीएसएस ऐनिमेशन या वेब ऐनिमेशन पर लागू नहीं होता.
इसका मतलब है कि आपकी साइट को बेहतर दिखने वाला कॉन्टेंट मिलने की संभावना है. हालांकि, यहां कुछ आसान बदलाव किए बिना यह धीमी भी हो सकती है.
वेब डेवलपर के लिए खास जानकारी
इस बदलाव के तहत, will-change: transform को कॉन्टेंट को एक तय बिटमैप में ज़बरदस्ती
दिखाने के लिए माना जा सकता है, जो बाद में 'अपडेट करें' के तहत कभी नहीं बदलता. इससे डेवलपर उस बिट मैप पर ऐनिमेशन बदलने की रफ़्तार बढ़ा सकते हैं, जैसे कि उसे इधर-उधर ले जाना, घुमाना या
स्केल करना.
हम स्केल और अनुवाद कन्वर्ज़न के बीच कोई फ़र्क़ नहीं करते.
सुझाई गई कार्रवाइयां
जब आपको बहुत तेज़ (दूसरे शब्दों में, 60fps) की ज़रूरत हो, तो एलिमेंट में will-change: transform डालें. इससे ऐनिमेशन की स्पीड बदल जाती है और हर फ़्रेम पर एलिमेंट को अच्छी क्वालिटी पर रास्टर करने की रफ़्तार काफ़ी नहीं है. अगर ऐसा नहीं है, तो will-change: transform से बचें.
अगर आपको ऐनिमेशन के शुरू होने पर will-change:
transform को जोड़ना है और खत्म होने के बाद हटा देना है, तो बेहतरीन परफ़ॉर्मेंस में मदद करने वाले समझौते को ऑप्टिमाइज़ करने के लिए. हालांकि, ध्यान रखें कि will-change: transform को जोड़ने या हटाने पर, एक बार में ही परफ़ॉर्मेंस की काफ़ी ज़्यादा लागत आती है.
लागू करने के बारे में अन्य बातें
will-change: transform को हटाने से, कॉन्टेंट बहुत बार साफ़ हो जाता है, लेकिन वह requestAnimationFrame) की मदद से सिर्फ़ अगले ऐनिमेशन फ़्रेम में होता है. इसलिए, अगर
आपके पास will-change: transform वाला कोई लेयर है और आपको सिर्फ़ री-रास्टर ट्रिगर करना है, लेकिन ऐनिमेशन जारी रखना है, तो पहले से बने बदलाव को
हटाना होगा: ट्रांसफ़ॉर्मेशन को हटाना होगा. इसके बाद, उसे requestAnimationFrame() cऑलबैक में फिर से जोड़ना होगा.
अगर ऐनिमेशन के दौरान किसी भी समय, आपको मौजूदा स्केल पर रास्टर करना है, तो
एक फ़्रेम से हटाने के लिए ऊपर दी गई तकनीक लागू करें. इसके बाद, will-change:
transform को अगले फ़्रेम में फिर से जोड़ें.
इसकी वजह से हो सकता है कि कॉन्टेंट अपनी कंपोज़िट लेयर के कम हो जाए. इस वजह से, ऊपर दिया गया सुझाव थोड़ा महंगा हो सकता है. अगर ऐसा कोई समस्या है, तो हमारा सुझाव है कि आप transform: translateZ(0) को कॉन्टेंट में जोड़ें. इससे यह भी पक्का किया जा सकेगा कि इस कार्रवाई के दौरान, यह किसी कंपोज़िट लेयर में भी बना रहे.
असर के बारे में खास जानकारी
इस बदलाव का असर, रेंडर किए गए कॉन्टेंट की क्वालिटी, परफ़ॉर्मेंस, और डेवलपर कंट्रोल पर पड़ता है.
- रेंडर की गई कॉन्टेंट की क्वालिटी: ऐनिमेशन वाले एलिमेंट का रेंडर किया गया आउटपुट, जो स्केल में बदलाव करता है, डिफ़ॉल्ट रूप से हमेशा बेहतर दिखता है.
- परफ़ॉर्मेंस:
will-change: transformमौजूद होने पर ट्रांसफ़ॉर्मेशन ऐक्शन तेज़ी से होगा. - डेवलपर कंट्रोल: डेवलपर, हर एलिमेंट और हर ऐनिमेशन फ़्रेम के आधार पर क्वालिटी और स्पीड में से किसी एक को चुन सकते हैं. इसके लिए, उन्हें जोड़कर और हटाएं
will-change: transform.
ज़्यादा जानकारी के लिए, ऊपर दिया गया रेफ़रंस डिज़ाइन दस्तावेज़ देखें.
उदाहरण
इस उदाहरण में, इस बदलाव के बाद remainsBlurry आईडी वाला एलिमेंट धुंधला रहेगा. हालांकि, noLongerBlurry आईडी वाला एलिमेंट धुंधला रहेगा. ऐसा इसलिए है, क्योंकि पिछली ऐसेट में will-
change: transform सीएसएस प्रॉपर्टी मौजूद है.
असल ऐप्लिकेशन से स्केल ऐनिमेशन बदलने के उदाहरण
- इस बग से: टाइगर ज़ूम करना
- मोबाइल पर Google Maps (maps.google.com) - मैप को ज़ूम करें
- डेस्कटॉप पर Google Maps Lite
- टिकटमास्टर सीट का मैप