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