ईज़िंग की बुनियादी बातें

अपने ऐनिमेशन में दर्शकों की दिलचस्पी बढ़ाने और उन्हें सॉफ़्ट बनाने का तरीका जानें.

प्रकृति में कोई भी चीज़, एक पॉइंट से दूसरे पॉइंट तक सीधे तौर पर नहीं जाती. असल में, चीज़ें आगे बढ़ने के दौरान धीमी या तेज़ हो जाती हैं. हमारा दिमाग इस तरह की मोशन की उम्मीद करता है. इसलिए, ऐनिमेशन बनाते समय, आपको इसका फ़ायदा लेना चाहिए. ऐप्लिकेशन में नेचुरल मोशन की सुविधा होने से, उपयोगकर्ताओं को आपके ऐप्लिकेशन इस्तेमाल करने में आसानी होती है. इससे उन्हें बेहतर अनुभव मिलता है.

खास जानकारी

• ऐनिमेशन को धीमा करने से, वे ज़्यादा नैचुरल लगते हैं.
• यूज़र इंटरफ़ेस (यूआई) एलिमेंट के लिए, आसानी से दिखने वाले ऐनिमेशन चुनें.
• आसानी से दिखने वाले या आसानी से समझ आने वाले ऐनिमेशन तब तक इस्तेमाल न करें, जब तक कि उन्हें छोटा न रखा जाए. असली उपयोगकर्ताओं को ये ऐनिमेशन धीमे लगते हैं.

क्लासिक ऐनिमेशन में, धीरे से शुरू होकर तेज़ी से आगे बढ़ने वाले मोशन को "धीरे से शुरू करें" और तेज़ी से शुरू होकर धीरे-धीरे धीमा होने वाले मोशन को "धीरे से खत्म करें" कहा जाता है. वेब पर आम तौर पर, इन शब्दों का इस्तेमाल “ईज़ इन” और “ईज़ आउट” के तौर पर किया जाता है. कभी-कभी दोनों को एक साथ इस्तेमाल किया जाता है. इसे "धीरे-धीरे इन और आउट करना" कहा जाता है. इसलिए, ऐनिमेशन को धीमा करने का मतलब है कि उसे ज़्यादा तेज़ या ज़्यादा ज़ोर से नहीं चलाया जाए.

आसान कीवर्ड

सीएसएस ट्रांज़िशन और ऐनिमेशन, दोनों में ऐनिमेशन के लिए इस्तेमाल की जाने वाली ईज़िंग चुनने का विकल्प होता है. जिस ऐनिमेशन का इस्तेमाल किया जा रहा है उसकी ईज़िंग (या timing, जैसा कि इसे कभी-कभी कहा जाता है) पर असर डालने वाले कीवर्ड इस्तेमाल किए जा सकते हैं. ऐसे में, ऐप्लिकेशन के हिसाब से इज़िंग की सुविधा को पूरी तरह से कस्टमाइज़ किया जा सकता है. इससे आपको अपने ऐप्लिकेशन की खासियत को ज़्यादा बेहतर तरीके से दिखाने में मदद मिलती है.

यहां कुछ कीवर्ड दिए गए हैं जिनका इस्तेमाल सीएसएस में किया जा सकता है:

• linear
• ease-in
• ease-out
• ease-in-out

सोर्स: सीएसएस ट्रांज़िशन, 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;