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