अपने ऐनिमेशन को नर्म बनाने और अहमियत देने का तरीका जानें.
प्रकृति में कुछ भी एक से दूसरे बिंदु पर एक-दूसरे से हिलता नहीं है. असल में, चीज़ों के हिलने-डुलने पर उनकी रफ़्तार बढ़ती या घटती है. हमारा दिमाग इस तरह की गतिविधि की उम्मीद करता है. इसलिए, ऐनिमेशन तैयार करते समय आपको इसका इस्तेमाल अपने फ़ायदे के लिए करना चाहिए. नैचुरल मोशन से, उपयोगकर्ताओं को आपके ऐप्लिकेशन इस्तेमाल करने में ज़्यादा आसानी होती है. इससे, उपयोगकर्ताओं को ऐप्लिकेशन का बेहतर अनुभव मिलता है.
खास जानकारी
- ईज़िंग से आपके ऐनिमेशन और भी स्वाभाविक लगते हैं.
- यूज़र इंटरफ़ेस (यूआई) एलिमेंट के लिए ईज़-आउट ऐनिमेशन चुनें.
- आसानी से इस्तेमाल होने वाले या आसानी से दिखने वाले ऐनिमेशन से बचें. ऐसा तब ही करें, जब उन्हें छोटा रखा जा सके. असली उपयोगकर्ताओं को ये ऐनिमेशन ज़्यादा पसंद नहीं आते.
क्लासिक ऐनिमेशन में, धीरे-धीरे शुरू होने वाले और तेज़ी से बढ़ने वाले मोशन को "स्लो इन" कहा जाता है. वहीं, जब तुरंत शुरू होने वाले और तेज़ी से बढ़ने लगते हैं, तो मोशन को "धीमा" कहा जाता है. इनके लिए वेब पर आम तौर पर सबसे ज़्यादा इस्तेमाल की जाने वाली शब्दावली “आसानी से” और “आसान” हैं. कभी-कभी ये दोनों एक साथ हो जाते हैं, जिसे "ईज़ इन आउट" कहा जाता है. ईज़िंग का मतलब है, ऐनिमेशन को ज़्यादा गंभीर या बेहतर बनाना.
ईज़िंग कीवर्ड
सीएसएस ट्रांज़िशन और ऐनिमेशन, दोनों आपको यह चुनने की सुविधा देते हैं कि आपको अपने ऐनिमेशन के लिए किस तरह की ईज़िंग का इस्तेमाल करना है. ऐसे कीवर्ड का इस्तेमाल किया जा सकता है जो बताए गए ऐनिमेशन की ईज़िंग (या timing, इसे कभी-कभी कहा जाता है) पर असर डालते हैं. ईज़िंग के साथ पूरी तरह से मनमुताबिक बदलाव भी किया जा सकता है. इससे आपको अपने ऐप्लिकेशन की खासियत बताने की काफ़ी आज़ादी मिलती है.
सीएसएस में इस्तेमाल किए जा सकने वाले कुछ कीवर्ड यहां दिए गए हैं:
linearease-inease-outease-in-out
सोर्स: CSS ट्रांज़िशन, W3C
steps कीवर्ड का भी इस्तेमाल किया जा सकता है. इससे ऐसे ट्रांज़िशन बनाने में मदद मिलती है जिनमें अलग-अलग चरण होते हैं. हालांकि, ऊपर बताए गए कीवर्ड ऐसे ऐनिमेशन बनाने के लिए सबसे ज़्यादा काम के होते हैं जो सामान्य लगते हैं.
लीनियर ऐनिमेशन
किसी भी तरह की ईज़िंग के बिना ऐनिमेशन को लीनियर कहा जाता है. लीनियर ट्रांज़िशन का ग्राफ़ इस तरह दिखता है:
समय के साथ-साथ, वैल्यू में भी बराबर बढ़ोतरी होती है. रैखिक गति से, चीज़ें रोबोटिक और अस्वाभाविक लगने लगती हैं और यह कुछ ऐसा होता है जिससे उपयोगकर्ताओं को परेशानी होती है. आम तौर पर, आपको लीनियर मोशन से बचना चाहिए.
चाहे सीएसएस या JavaScript का इस्तेमाल करके, ऐनिमेशन को कोडिंग की जा रही हो, आपको लीनियर मोशन का एक विकल्प हमेशा दिखेगा.
सीएसएस की मदद से, ऊपर बताए गए इफ़ेक्ट को पाने के लिए, कोड कुछ ऐसा दिखेगा:
transition: transform 500ms linear;
आसान ऐनिमेशन
लीनियर वीडियो की तुलना में, ऐनिमेशन को ईज़िंग के दौरान तेज़ी से शुरू किया जाता है. साथ ही, आखिर में ऐनिमेशन की रफ़्तार धीमी हो जाती है.
यूज़र इंटरफ़ेस के काम के लिए, आसानी से विज्ञापन दिखाना सबसे अच्छा होता है, क्योंकि फ़ास्ट स्टार्ट आपके ऐनिमेशन को रिस्पॉन्सिव का एहसास दिलाता है. साथ ही, यह वीडियो आखिर में धीमी रफ़्तार से काम करता है.
आसानी से इफ़ेक्ट देने के कई तरीके हैं. हालांकि, सीएसएस में ease-out कीवर्ड सबसे आसान है:
transition: transform 500ms ease-out;
आसान ऐनिमेशन
आसान ऐनिमेशन धीरे-धीरे शुरू होते हैं और तेज़ी से खत्म होते हैं. यह ईज़-आउट वाले ऐनिमेशन के बिलकुल उलट है.
इस तरह का ऐनिमेशन, किसी भारी पत्थर के गिरने की तरह होता है, जहां यह धीरे-धीरे शुरू होता है और तेज़ी से ज़मीन पर टकराता है.
हालांकि, बातचीत के नज़रिए से देखें, तो ऐसा लग सकता है कि मन में उठने वाली चीज़ें अचानक खत्म हो जाने की वजह से थोड़ी असामान्य लग सकती है. वहीं, असल दुनिया में चीज़ें अचानक दिखने के बजाय धीरे-धीरे कम हो जाती हैं. आम तौर पर, सूचना पाने की प्रोसेस में शामिल होने पर, आपको शुरुआत में आलस की समस्या होती है. साथ ही, आपकी साइट या ऐप्लिकेशन के रिस्पॉन्स मिलने में आसानी होती है और इसका बुरा असर पड़ता है.
ईज़-इन ऐनिमेशन का इस्तेमाल करने के लिए, ईज़-आउट और लीनियर ऐनिमेशन की तरह ही इसका कीवर्ड इस्तेमाल करें:
transition: transform 500ms ease-in;
आसान ऐनिमेशन
घर के अंदर और बाहर, दोनों जगहों पर इस तरह से ठहरना, कार की गति और रफ़्तार को कम करने जैसा है. साथ ही, सूझ-बूझ से इस्तेमाल करने पर, गाड़ी चलाने का मन शांत करने के बजाय, गाड़ी के अंदर आने और बाहर निकलने, दोनों का अनुभव बेहतर होता है.
ऐनिमेशन में बहुत ज़्यादा लंबी अवधि का इस्तेमाल न करें, क्योंकि ऐनिमेशन आसानी से शुरू हो जाता है. आम तौर पर, 300 से 500 मि॰से॰ की रेंज वाली कोई चीज़ सही होती है. हालांकि, उसकी सटीक संख्या इस बात पर निर्भर करती है कि आपका प्रोजेक्ट कैसा है. हालांकि, स्लो स्टार्ट, फ़ास्ट मिडल, और स्लो एंड की वजह से, ऐनिमेशन में कंट्रास्ट बढ़ गया है. यह उपयोगकर्ताओं के लिए काफ़ी फ़ायदेमंद साबित हो सकता है.
आसानी से इस्तेमाल किया जा सकने वाला ऐनिमेशन पाने के लिए, ease-in-out सीएसएस कीवर्ड का इस्तेमाल करें:
transition: transform 500ms ease-in-out;