ऐनिमेशन के बारे में जानकारी

Compose को आज़माएं
Android के लिए, Jetpack Compose को यूज़र इंटरफ़ेस (यूआई) टूलकिट के तौर पर इस्तेमाल करने का सुझाव दिया जाता है. Compose में ऐनिमेशन इस्तेमाल करने का तरीका जानें.

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

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

ऐनिमेशन का इस्तेमाल कब करना चाहिए, इस बारे में बेहतर तरीके से समझने के लिए, मोशन के बारे में Material Design की गाइड भी देखें.

बिटमैप को ऐनिमेट करना

पहली इमेज. ऐनिमेट किया जा सकने वाला ड्रॉएबल.

आइकॉन या इलस्ट्रेशन जैसे बिटमैप ग्राफ़िक को ऐनिमेट करने के लिए, ड्रॉएबल ऐनिमेशन एपीआई का इस्तेमाल करें. आम तौर पर, इन ऐनिमेशन को ड्रॉएबल रिसॉर्स के साथ स्टैटिक तौर पर तय किया जाता है. हालांकि, रनटाइम के दौरान भी ऐनिमेशन के व्यवहार को तय किया जा सकता है.

उदाहरण के लिए, उपयोगकर्ता को यह बताने का एक अच्छा तरीका है कि दो कार्रवाइयां एक-दूसरे से जुड़ी हुई हैं. इसके लिए, चलाएं बटन को ऐनिमेट किया जा सकता है. जब इस पर टैप किया जाता है, तो यह रोकें बटन में बदल जाता है.

ज़्यादा जानकारी के लिए, ड्रॉ किए जा सकने वाले ग्राफ़िक को ऐनिमेट करना लेख पढ़ें.

यूज़र इंटरफ़ेस को दिखने और मोशन में ऐनिमेट करना

दूसरी इमेज. डायलॉग बॉक्स के दिखने और गायब होने पर, हल्का ऐनिमेशन दिखने से यूज़र इंटरफ़ेस (यूआई) में बदलाव कम दिखता है.

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

मौजूदा लेआउट में व्यू को मूव करने, दिखाने या छिपाने के लिए, android.animation पैकेज की ओर से उपलब्ध कराए गए प्रॉपर्टी ऐनिमेशन सिस्टम का इस्तेमाल किया जा सकता है. यह Android 3.0 (एपीआई लेवल 11) और इसके बाद के वर्शन में उपलब्ध है. ये एपीआई, समय-समय पर आपके View ऑब्जेक्ट की प्रॉपर्टी अपडेट करते हैं. साथ ही, प्रॉपर्टी में बदलाव होने पर व्यू को लगातार फिर से रेंडर करते हैं. उदाहरण के लिए, पोज़िशन प्रॉपर्टी बदलने पर, व्यू स्क्रीन पर इधर-उधर घूमता है. ऐल्फ़ा प्रॉपर्टी बदलने पर, व्यू धीरे-धीरे दिखता या गायब होता है.

इन एनिमेशन को आसानी से बनाने के लिए, अपने लेआउट पर एनिमेशन चालू करें. इससे, व्यू की दृश्यता बदलने पर, एनिमेशन अपने-आप लागू हो जाएगा. ज़्यादा जानकारी के लिए, लेआउट में हुए बदलावों को अपने-आप ऐनिमेट करना लेख पढ़ें.

प्रॉपर्टी ऐनिमेशन सिस्टम का इस्तेमाल करके ऐनिमेशन बनाने का तरीका जानने के लिए, प्रॉपर्टी ऐनिमेशन की खास जानकारी पढ़ें. सामान्य ऐनिमेशन बनाने के लिए, इन पेजों पर भी जाएं:

फ़िज़िक्स पर आधारित मोशन

तीसरी इमेज. ObjectAnimator का इस्तेमाल करके बनाया गया ऐनिमेशन.

चौथी इमेज. फ़िज़िक्स पर आधारित एपीआई की मदद से बनाया गया ऐनिमेशन.

जब भी मुमकिन हो, अपने ऐनिमेशन में असल दुनिया की फ़िज़िक्स का इस्तेमाल करें, ताकि वे स्वाभाविक दिखें. उदाहरण के लिए, जब उनके टारगेट में बदलाव होता है, तब उन्हें मोमेंटम बनाए रखना चाहिए. साथ ही, किसी भी बदलाव के दौरान आसानी से ट्रांज़िशन करना चाहिए.

इन व्यवहारों को उपलब्ध कराने के लिए, Android Support Library में फ़िज़िक्स पर आधारित ऐनिमेशन एपीआई शामिल हैं. ये एपीआई, फ़िज़िक्स के नियमों पर काम करते हैं. इनकी मदद से, यह कंट्रोल किया जाता है कि आपके ऐनिमेशन कैसे दिखें.

फ़िज़िक्स पर आधारित दो सामान्य ऐनिमेशन यहां दिए गए हैं:

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

फ़िज़िक्स पर आधारित ऐनिमेशन एपीआई, जैसे कि DynamicAnimation की मदद से बनाए गए ऐनिमेशन, फ़ोर्स की वजह से चलते हैं. टारगेट वैल्यू में बदलाव होने से, फ़ोर्स में बदलाव होता है. नई फ़ोर्स, मौजूदा वेलोसिटी पर लागू होती है. इससे नए टारगेट पर लगातार ट्रांज़िशन होता है. इस प्रोसेस से, ज़्यादा नैचुरल दिखने वाला ऐनिमेशन बनता है. इसे चौथे डायग्राम में दिखाया गया है.

लेआउट में हुए बदलावों को ऐनिमेट करना

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

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

उदाहरण के लिए, जब कोई उपयोगकर्ता किसी आइटम के बारे में ज़्यादा जानकारी देखने के लिए उस पर टैप करता है, तो लेआउट को आइटम की जानकारी से बदला जा सकता है. इसके लिए, फ़िगर 5 में दिखाए गए ट्रांज़िशन का इस्तेमाल करें.

शुरू और खत्म होने वाले लेआउट, दोनों को Scene में सेव किया जाता है. हालांकि, शुरुआती सीन आम तौर पर मौजूदा लेआउट से अपने-आप तय हो जाता है. आपको Transition बनाना होगा, ताकि सिस्टम को पता चल सके कि आपको किस तरह का ऐनिमेशन चाहिए. इसके बाद, TransitionManager.go() को कॉल करें. इससे सिस्टम, लेआउट बदलने के लिए ऐनिमेशन चलाएगा.

ज़्यादा जानकारी के लिए, ट्रांज़िशन का इस्तेमाल करके लेआउट में किए गए बदलावों को ऐनिमेट करना लेख पढ़ें. सैंपल कोड के लिए, BasicTransition देखें.

ऐक्टिविटी के बीच ऐनिमेशन

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

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

हमेशा की तरह, startActivity() को कॉल करें. हालांकि, इसे ActivityOptions.makeSceneTransitionAnimation() से मिले विकल्पों का बंडल पास करें. इस बंडल में यह जानकारी भी शामिल हो सकती है कि किन व्यू को गतिविधियों के बीच शेयर किया जाता है, ताकि ट्रांज़िशन फ़्रेमवर्क उन्हें ऐनिमेशन के दौरान कनेक्ट कर सके.

ज़्यादा संसाधनों के लिए, यहां जाएं: