पिछले साल के आखिर में मैंने Chrome डेवलपर समिट साइट बनाई. मैं चाहती थी कि इसका मटीरियल डिज़ाइन दिखे, क्योंकि यह एक बेहतरीन डिज़ाइन भाषा है. साथ ही, मुझे लगा कि जिस तरह की साइट मुझे बनानी है उसके लिए यह बहुत बढ़िया होगा. हालांकि, किसी भी नई डिज़ाइन लैंग्वेज की तरह, इसमें सवाल, चुनौतियां, और फ़ैसले लेने की ज़रूरत होती है. खास तौर पर, ऐसा वेब की परंपराओं के साथ काम करते समय होता है.
जब आप किसी कार्ड पर क्लिक करते हैं, तो साइट का एक ऐसा पहलू जो खास तौर पर बनाने में चुनौती भरा था, वह है “टेकओवर” प्रभाव.
60fps पर इस तरह का इफ़ेक्ट पाने के लिए हमने कुछ सोचा, प्रोटोटाइप करना, और कुछ दिलचस्प समझौते किए हैं. Chrome Dev Summit में, मैंने इस इफ़ेक्ट के बारे में बात की और विस्तार से बताया कि इसे कैसे बनाया जाए.
बेहतरीन परफ़ॉर्मेंस वाला ऐनिमेशन बनाना
अच्छी परफ़ॉर्मेंस वाले ऐनिमेशन ऐसे ही होते हैं जो ब्राउज़र के कंपोज़िटर को पसंद आते हैं. अगर आप ट्रांसफ़ॉर्मेशन और ओपैसिटी से जुड़ी प्रॉपर्टी में बदलाव नहीं कर पा रहे हैं, तो आम तौर पर आपको शानदार परफ़ॉर्मेंस दिखेगी. कार्ड ऐनिमेशन के लिए मैंने जो सामान्य तरीका अपनाया है, वही काम करता है:
- कार्ड को छोटा करने पर, उसमें मौजूद सभी एलिमेंट की पोज़िशन मेज़र करें.
- कार्ड की क्लास को बड़ा करने के लिए उसे टॉगल करें (ऐनिमेट किए बिना).
- अब कार्ड बड़ा हो गया है. इसके बाद, एलिमेंट की पोज़िशन फिर से मापें.
- अंतर का हिसाब लगाएं.
- एलिमेंट को वापस शुरुआती पोज़िशन पर ले जाने के लिए, नेगेटिव ट्रांसफ़ॉर्म का इस्तेमाल करें.
- ऐनिमेशन की सुविधा चालू करें.
- नेगेटिव ट्रांसफ़ॉर्म को हटाएं और स्क्रीन पर एलिमेंट को उनकी आखिरी जगह पर ले जाते हुए देखें.
यह सब काफ़ी महंगा लग सकता है, लेकिन ऐनिमेशन शुरू होने से पहले उपयोगकर्ता के इंटरैक्ट करने के समय से 100 मिलीसेकंड की विंडो होती है. इससे ज़्यादा होने पर और उपयोगकर्ता को थोड़ी देरी होगी. इस समय का इस्तेमाल महंगे काम करने में किया जा सकता है, ताकि ऐनिमेशन के दौरान ही आप ज़्यादा सस्ते में काम कर सकें. चीज़ों को व्यवस्थित करने के लिए, करीब 50 से 100 मि॰से॰ की अवधि के बाद एक विंडो भी दिखती है. यह विंडो आपके काम के हिसाब से मददगार हो सकती है.
ऐनिमेशन करने में काफ़ी खर्चा आता है. इसमें पहले 100 मि॰से॰ के अंदर ही इस्तेमाल किया जा सकता है. साथ ही, Nexus 5 पर यह काम 70 मि॰से॰ के क्षेत्र में ही करना पड़ता है. इसलिए, समय-समय पर थोड़ा और समय भी होता है.
कोड पाएं
अगर आपकी दिलचस्पी इस साइट के बारे में ज़्यादा जानकारी चाहिए, तो आपको यह जानकर खुशी होगी कि कोड को GitHub पर रिलीज़ कर दिया गया है. इसलिए, इसे देखें और इसे आज़माएं!