अपने ऐनिमेशन में दर्शकों की दिलचस्पी बढ़ाने और उन्हें नर्म बनाने का तरीका जानें.
प्रकृति में कोई भी चीज़ एक जगह से दूसरी जगह नहीं चलती है. असल में, चीज़ों के चलने के साथ-साथ उनमें तेज़ी या कमी आने की संभावना होती है. हमारा दिमाग इस तरह की गति के लिए काम करता है. इसलिए, ऐनिमेशन के दौरान आपको इसका इस्तेमाल अपने फ़ायदे के लिए करना चाहिए. नैचुरल मोशन की मदद से, उपयोगकर्ता आपके ऐप्लिकेशन को आसानी से इस्तेमाल कर पाते हैं. इससे उन्हें बेहतर अनुभव मिलता है.
खास जानकारी
- ईज़िंग से आपके ऐनिमेशन ज़्यादा स्वाभाविक लगते हैं.
- यूज़र इंटरफ़ेस (यूआई) एलिमेंट के लिए, आसानी से दिखने वाले ऐनिमेशन चुनें.
- आसान ऐनिमेशन या आसानी से दिखने वाले ऐनिमेशन तब तक इस्तेमाल न करें, जब तक कि आप उन्हें छोटा न रखें; उन्हें असली उपयोगकर्ताओं को ज़्यादा थकान महसूस होती है.
क्लासिक ऐनिमेशन में, रफ़्तार की शुरुआत धीरे-धीरे होती है और रफ़्तार बढ़ती है, तो इसे "धीमा" कहते हैं. साथ ही, उस गति के लिए "धीमा" है जो तेज़ी से शुरू होती है और कम होती है. वेब पर आम तौर पर, इन शब्दों का इस्तेमाल “ईज़ इन” और “ईज़ आउट” के तौर पर किया जाता है. कभी-कभी दोनों एक साथ मिल जाते हैं. इसे "ईज़ इन आउट" कहा जाता है. ईमानदार रहें, असल में ऐनिमेशन को गंभीर बनाने या साफ़ तौर पर बताने की प्रक्रिया है.
ईज़िंग कीवर्ड
सीएसएस ट्रांज़िशन और ऐनिमेशन, दोनों की मदद से यह चुना जा सकता है कि ऐनिमेशन के लिए आपको किस तरह की ईज़िंग करनी है. जिस ऐनिमेशन का इस्तेमाल किया जा रहा है उसकी ईज़िंग (या timing, जैसा कि इसे कभी-कभी कहा जाता है) पर असर डालने वाले कीवर्ड इस्तेमाल किए जा सकते हैं. ईज़िंग को अपनी पसंद के मुताबिक भी बनाया जा सकता है. इससे आपको अपने ऐप्लिकेशन की खासियत को खुलकर ज़ाहिर करने की पूरी आज़ादी मिलती है.
सीएसएस में इस्तेमाल करने के लिए, यहां कुछ कीवर्ड दिए गए हैं:
linearease-inease-outease-in-out
सोर्स: CSS Passwords, W3C
आपके पास steps कीवर्ड का इस्तेमाल करने का भी विकल्प है. इसकी मदद से, अलग-अलग चरणों वाले ट्रांज़िशन बनाए जा सकते हैं. हालांकि, ऊपर बताए गए कीवर्ड, नैचुरल लगने वाले ऐनिमेशन बनाने के लिए सबसे ज़्यादा काम के हैं.
लीनियर ऐनिमेशन
जिन ऐनिमेशन में ईज़िंग नहीं होती उन्हें लीनियर कहा जाता है. रैखिक ट्रांज़िशन का ग्राफ़ इस तरह दिखता है:
समय के साथ-साथ वैल्यू भी एक जैसी बढ़ जाती है. एक लीनियर मोशन होने पर, चीज़ें अजीब और अजीब लगती हैं. ये चीज़ें लोगों को अजीब लगती हैं. आम तौर पर, आपको लीनियर मोशन से बचना चाहिए.
सीएसएस या JavaScript का इस्तेमाल करके ऐनिमेशन को कोड किया जा रहा हो, आपको लीनियर मोशन के लिए हमेशा एक विकल्प दिखेगा.
CSS के साथ ऊपर दिए गए प्रभाव को प्राप्त करने के लिए, कोड कुछ ऐसा दिखाई देगा:
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;