👨‍👩‍👦‍👦 🔂 👻 Kotlin और RxJava पर आधारित एंड्रॉइड एनिमेशन 📉 🛒 👰

नमस्कार, हेब्र! पिछले साल, PSPDFKit के इवान स्कोरिक्स ने MBLT DEV से कोटलिन और RxJava लाइब्रेरी पर आधारित एंड्रॉइड में एनिमेशन बनाने की रिपोर्ट पर बात की थी।

अब मैं अपनी परियोजना पर काम करने में रिपोर्ट की तकनीकों का उपयोग करता हूं, वे बहुत मदद करते हैं। Cutscene के तहत रिपोर्ट और वीडियो की प्रतिलिपि है, अब आप इन ट्रिक्स का लाभ उठा सकते हैं।

एनीमेशन

एंड्रॉइड में, 4 कक्षाएं हैं जो डिफ़ॉल्ट रूप से लागू होती हैं:

ValueAnimator - यह वर्ग उन एनिमेशन को चलाने के लिए एक सरल सिंक्रनाइज़ेशन तंत्र प्रदान करता है जो एनिमेटेड मानों की गणना करते हैं और उन्हें व्यू के लिए सेट करते हैं।
ObjectAnimator ValueAnimator का एक उपवर्ग है जो आपको ऑब्जेक्ट गुणों के लिए एनिमेशन का समर्थन करने की अनुमति देता है।
AnimatorSet का उपयोग एनीमेशन अनुक्रम बनाने के लिए किया जाता है। उदाहरण के लिए, आपके पास एनिमेशन का एक क्रम है:
1. स्क्रीन के बाईं ओर पत्तियां देखें।
2. पहला एनीमेशन पूरा करने के बाद, हम किसी अन्य दृश्य आदि के लिए एक उपस्थिति एनीमेशन करना चाहते हैं।
ViewPropertyAnimator - स्वचालित रूप से लॉन्च और चयनित दृश्य संपत्ति के लिए एनिमेशन का अनुकूलन करता है। हम मुख्य रूप से इसका उपयोग करेंगे। इसलिए, हम इस API का उपयोग करेंगे और फिर इसे प्रतिक्रियाशील प्रोग्रामिंग के भाग के रूप में RxJava में डालेंगे।

ValueAnimator

आइए ValueAnimator ढांचे का विश्लेषण करें । इसका उपयोग मूल्य को बदलने के लिए किया जाता है। आप मान मान के लिए कई श्रेणी निर्दिष्ट करते हैं। 0 से 100 तक आदिम फ़्लोट प्रकार के लिए ValueAnimator.ofFloat। अवधि मान निर्दिष्ट करें और एनीमेशन प्रारंभ करें।
एक उदाहरण पर विचार करें:

val animator = ValueAnimator.ofFloat(0f, 100f) animator.duration = 1000 animator.start() animator.addUpdateListener(object : ValueAnimator.AnimatorUpdateListener { override fun onAnimationUpdate(animation: ValueAnimator) { val animatedValue = animation.animatedValue as Float textView.translationX = animatedValue } })

यहां हम अपडेटलिस्ट को जोड़ते हैं और प्रत्येक अपडेट के साथ हम अपने व्यू को क्षैतिज रूप से स्थानांतरित करेंगे और इसकी स्थिति को 0 से 100 तक बदल देंगे, हालांकि यह ऑपरेशन करने के लिए बहुत अच्छा तरीका नहीं है।

ObjectAnimator

एक अन्य एनीमेशन कार्यान्वयन उदाहरण ObjectAimimator है:

 val objectAnimator = ObjectAnimator.ofFloat(textView, "translationX", 100f) objectAnimator.duration = 1000 objectAnimator.start()

हम उसे विशिष्ट दृश्य पैरामीटर को वांछित मान में निर्दिष्ट मान में बदलने के लिए देते हैं और सेटड्यूरेशन विधि का उपयोग करके समय निर्धारित करते हैं। लब्बोलुआब यह है कि आपकी कक्षा में सेटट्रांसलेशनएक्स विधि होनी चाहिए, फिर सिस्टम प्रतिबिंब के माध्यम से इस विधि को ढूंढेगा , और फिर दृश्य एनिमेटेड होगा। समस्या यह है कि प्रतिबिंब का उपयोग यहां किया जाता है।

AnimatorSet

अब एनिमेटरसेट क्लास पर विचार करें:

 val bouncer = AnimatorSet() bouncer.play(bounceAnim).before(squashAnim1) bouncer.play(squashAnim1).before(squashAnim2) val fadeAnim = ObjectAnimator.ofFloat(newBall, "alpha", 1f, 0f) fadeAnim.duration = 250 val animatorSet = AnimatorSet() animatorSet.play(bouncer).before(fadeAnim) animatorSet.start()

वास्तव में, यह उपयोग करने के लिए बहुत सुविधाजनक नहीं है, विशेष रूप से बड़ी संख्या में वस्तुओं के लिए। यदि आप अधिक जटिल एनिमेशन बनाना चाहते हैं - उदाहरण के लिए, एनिमेशन की उपस्थिति के बीच एक देरी सेट करें, और जितने अधिक एनिमेशन आप प्रदर्शन करना चाहते हैं, इसे नियंत्रित करना उतना ही मुश्किल है।

ViewPropertyAnimator

अंतिम वर्ग ViewPropertyAnimator है । यह व्यू को एनिमेट करने के लिए सर्वश्रेष्ठ कक्षाओं में से एक है। आपके द्वारा चलाए गए एनिमेशन के अनुक्रम को प्रस्तुत करने के लिए यह एक शानदार एपीआई है:

 ViewCompat.animate(textView) .translationX(50f) .translationY(100f) .setDuration(1000) .setInterpolator(AccelerateDecelerateInterpolator()) .setStartDelay(50) .setListener(object : Animator.AnimatorListener { override fun onAnimationRepeat(animation: Animator) {} override fun onAnimationEnd(animation: Animator) {} override fun onAnimationCancel(animation: Animator) {} override fun onAnimationStart(animation: Animator) {} })

हम ViewCompat.animate पद्धति को शुरू करते हैं, जो ViewPropertyAnimator को लौटाता है, और एनीमेशन ट्रांसलेशनएक्स के लिए हमने मान को 50 के लिए, ट्रांसलेटॉन पैरामीटर के लिए 100 पर सेट किया है। फिर हम एनीमेशन की अवधि, साथ ही इंटरपोलर को भी निर्दिष्ट करते हैं। इंटरपोलर उस क्रम को निर्धारित करता है जिसमें एनिमेशन दिखाई देते हैं। यह उदाहरण एक इंटरपोलर का उपयोग करता है जो एनीमेशन की शुरुआत को गति देता है और अंत में एक मंदी जोड़ता है। हम एनीमेशन शुरू करने में देरी भी करते हैं। इसके अतिरिक्त, हमारे पास एक AnimatorListener है । इसके साथ, आप एनीमेशन के दौरान होने वाली कुछ घटनाओं की सदस्यता ले सकते हैं। इस इंटरफ़ेस में 4 विधियाँ हैं: onAnimationStart , onAnimationCancel , onAnimationEnd , onAnimationRepeat ।

एक नियम के रूप में, हम केवल एनीमेशन को पूरा करने में रुचि रखते हैं। एपीआई स्तर 16 में
जोड़ा गया

 .withEndAction({ //API 16+ //do something here where animation ends })

इसमें, आप रननेबल इंटरफ़ेस को परिभाषित कर सकते हैं, और एक विशिष्ट एनीमेशन दिखाने के पूरा होने के बाद, एक कार्रवाई की जाती है।

अब सामान्य रूप से एनिमेशन बनाने की प्रक्रिया के बारे में कुछ टिप्पणियां:

प्रारंभ () विधि वैकल्पिक है: जैसे ही आप चेतन () विधि को कहते हैं, एनिमेशन का एक क्रम प्रस्तुत किया जाता है। जब ViewPropertyAnimator कॉन्फ़िगर किया गया है, सिस्टम जैसे ही यह करने के लिए तैयार है एनीमेशन शुरू हो जाएगा।
केवल एक ViewPropertyAnimator वर्ग केवल एक विशिष्ट दृश्य को चेतन कर सकता है। इसलिए, यदि आप कई एनिमेशन करना चाहते हैं, उदाहरण के लिए, आप कुछ स्थानांतरित करना चाहते हैं, और उसी समय आकार में वृद्धि होती है, तो आपको इसे एक एनिमेटर में निर्दिष्ट करने की आवश्यकता है।

हमने RxJava को क्यों चुना?

एक सरल उदाहरण से शुरू करते हैं। मान लीजिए कि हम एक फीका विधि बनाते हैं:

 fun fadeIn(view: View, duration: Long): Completable { val animationSubject = CompletableSubject.create() return animationSubject.doOnSubscribe { ViewCompat.animate(view) .setDuration(duration) .alpha(1f) .withEndAction { animationSubject.onComplete() } } }

यह एक काफी आदिम समाधान है, और इसे अपनी परियोजना में लागू करने के लिए, आपको कुछ बारीकियों को ध्यान में रखना होगा।

हम एक कंपेटिबल सब्जेक्ट बनाने जा रहे हैं, जिसका उपयोग हम एनिमेशन के पूरा होने का इंतजार करने के लिए करेंगे, और फिर सब्सक्राइबर्स को संदेश भेजने के लिए ऑन-कम्‍प्‍लीट विधि का उपयोग करेंगे। क्रमिक रूप से एनिमेशन चलाने के लिए, आपको तुरंत एनीमेशन शुरू करने की आवश्यकता नहीं है, लेकिन जैसे ही कोई इसे सदस्यता लेता है। इस तरह, कई प्रतिक्रियाशील शैली के एनिमेशन को क्रमिक रूप से चलाया जा सकता है।

एनीमेशन पर ही विचार करें। इसमें, हम दृश्य को स्थानांतरित करते हैं, जिस पर एनीमेशन का प्रदर्शन किया जाएगा, और एनीमेशन की अवधि को भी इंगित करेगा। और जब से यह एनीमेशन दिखाई देता है, हमें पारदर्शिता 1 का संकेत देना चाहिए।

आइए हमारी पद्धति का उपयोग करने का प्रयास करें और एक सरल एनीमेशन बनाएं। मान लीजिए कि हमारे पास स्क्रीन पर 4 बटन हैं, और हम उनके लिए 1 सेकंड की अवधि का एक एनीमेशन जोड़ना चाहते हैं:

 val durationMs = 1000L button1.alpha = 0f button2.alpha = 0f button3.alpha = 0f button4.alpha = 0f fadeIn(button1, durationMs) .andThen(fadeIn(button2, durationMs)) .andThen(fadeIn(button3, durationMs)) .andThen(fadeIn(button4, durationMs)) .subscribe()

परिणाम इस तरह के संक्षिप्त कोड है। .Then ऑपरेटर का उपयोग करके, आप क्रमिक रूप से एनिमेशन चला सकते हैं। जब हम इसे सब्सक्राइब करते हैं, तो यह doOnSubscribe Event को कंप्लीटटेबल में भेज देगा, जो एक्जीक्यूशन कतार में पहला है। इसके पूरा होने के बाद, वह श्रृंखला में दूसरे, तीसरे और इसी तरह सदस्यता लेगा। इसलिए, यदि किसी चरण में कोई त्रुटि होती है, तो संपूर्ण अनुक्रम एक त्रुटि फेंकता है। आपको एनीमेशन की शुरुआत से पहले अल्फा 0 भी निर्दिष्ट करना होगा ताकि बटन अदृश्य हों। और यह इस तरह दिखेगा:

कोटलिन का उपयोग करते हुए, हम एक्सटेंशन का उपयोग कर सकते हैं:

 fun View.fadeIn(duration: Long): Completable { val animationSubject = CompletableSubject.create() return animationSubject.doOnSubscribe { ViewCompat.animate(this) .setDuration(duration) .alpha(1f) .withEndAction { animationSubject.onComplete() } } }

व्यू क्लास के लिए, एक एक्सटेंशन फ़ंक्शन जोड़ा गया था। भविष्य में, देखें तर्क को fadeIn पद्धति से पारित करने की आवश्यकता नहीं है। अब आप इस कॉल को विधि के अंदर देखने के लिए सभी कॉल बदल सकते हैं। यह वही है जो कोटलिन सक्षम है ।

आइए देखें कि हमारी एनीमेशन श्रृंखला में इस फ़ंक्शन की कॉल कैसे बदल गई है:

 button1.fadeIn(durationMs) .andThen(button2.fadeIn(durationMs)) .andThen(button3.fadeIn(durationMs)) .andThen(button4.fadeIn(durationMs)) .subscribe()

अब कोड अधिक समझ में आता है। यह स्पष्ट रूप से बताता है कि हम वांछित प्रदर्शन के लिए एक निश्चित अवधि के साथ एनीमेशन लागू करना चाहते हैं। .Then ऑपरेटर का उपयोग करके, हम दूसरे, तीसरे बटन और इतने पर एनिमेशन की एक अनुक्रमिक श्रृंखला बनाते हैं।

हम हमेशा एनिमेशन की अवधि का संकेत देते हैं, यह मान सभी डिस्प्ले के लिए समान है - 1000 मिलीसेकंड। कोटलिन फिर से बचाव के लिए आता है। हम एक डिफ़ॉल्ट समय मान बना सकते हैं।

 fun View.fadeIn(duration: Long = 1000L):

यदि आप अवधि पैरामीटर निर्दिष्ट नहीं करते हैं, तो समय स्वचालित रूप से 1 सेकंड के लिए सेट हो जाएगा। लेकिन अगर हम इस समय को 2 सेकंड तक बढ़ाने के लिए नंबर 2 पर बटन चाहते हैं, तो हम इस विधि को इस विधि में निर्दिष्ट करते हैं:

 button1.fadeIn() .andThen(button2.fadeIn(duration = 2000L)) .andThen(button3.fadeIn()) .andThen(button4.fadeIn()) .subscribe()

दो एनिमेशन चल रहे हैं

हम और तब ऑपरेटर का उपयोग करके एनिमेशन का एक क्रम चलाने में सक्षम थे। क्या होगा अगर मुझे एक ही समय में 2 एनिमेशन चलाने की आवश्यकता है? ऐसा करने के लिए, RxJava में एक मर्जविट ऑपरेटर है जो आपको कंप्लीटेबल तत्वों को इस तरह से संयोजित करने की अनुमति देता है कि उन्हें एक साथ लॉन्च किया जाएगा। यह कथन सभी तत्वों को शुरू करता है और अंतिम तत्व प्रदर्शित होने के बाद समाप्त होता है। यदि हम बदलते हैं और विलय के साथ , हमें एक एनीमेशन मिलता है जिसमें सभी बटन एक ही समय में दिखाई देते हैं, लेकिन बटन 2 दूसरों की तुलना में थोड़ा लंबा दिखाई देगा:

 button1.fadeIn() .mergeWith(button2.fadeIn(2000)) .mergeWith(button3.fadeIn()) .mergeWith(button4.fadeIn()) .subscribe()

अब हम एनिमेशन को ग्रुप कर सकते हैं। आइए कार्य को जटिल बनाने का प्रयास करें: उदाहरण के लिए, हम बटन 1 और बटन 2 को एक ही समय में दिखाना चाहते हैं, और फिर बटन 3 और बटन बटन:

 (button1.fadeIn().mergeWith(button2.fadeIn())) .andThen(button3.fadeIn().mergeWith(button4.fadeIn())) .subscribe()

हम मर्जविथ ऑपरेटर के साथ पहले और दूसरे बटन को जोड़ते हैं , तीसरे और चौथे के लिए कार्रवाई को दोहराते हैं, और इन समूहों को क्रमिक रूप से -Then ऑपरेटर से शुरू करते हैं। अब हम पूरी तरह से विधि जोड़कर कोड में सुधार करेंगे:

 fun fadeInTogether(first: View, second: View): Completable { return first.fadeIn() .mergeWith(second.fadeIn()) }

यह आपको एक ही समय में दो दृश्य के लिए fadeIn एनीमेशन चलाने की अनुमति देगा। एनीमेशन श्रृंखला कैसे बदल गई है:

 fadeInTogether(button1, button2) .andThen(fadeInTogether(button3, button4)) .subscribe()

परिणाम निम्नलिखित एनीमेशन है:

एक अधिक जटिल उदाहरण पर विचार करें। मान लीजिए हमें कुछ देरी के साथ एक एनीमेशन दिखाने की आवश्यकता है। अंतराल कथन में मदद मिलेगी:

 fun animate() { val timeObservable = Observable.interval(100, TimeUnit.MILLISECONDS) val btnObservable = Observable.just(button1, button2, button3, button4) }

यह हर 100 मिलीसेकंड का मान उत्पन्न करेगा। प्रत्येक बटन 100 मिलीसेकंड के बाद दिखाई देगा। अगला, हम एक और ऑब्जर्वेबल को इंगित करते हैं जो बटन का उत्सर्जन करेगा। इस मामले में, हमारे पास 4 बटन हैं। हम जिप ऑपरेटर का उपयोग करते हैं।

इससे पहले कि हम घटनाओं की धाराएँ हों:

 Observable.zip(timeObservable, btnObservable, BiFunction<Long, View, Disposable> { _, button -> button.fadeIn().subscribe() })

पहला टाइमऑब्जर्वेबल से मेल खाता है । यह वेधशाला नियमित अंतराल पर संख्या उत्पन्न करेगी। मान लीजिए कि यह 100 मिलीसेकंड होगा।

दूसरा ऑब्जर्वेबल एक दृश्य उत्पन्न करेगा। जिप ऑपरेटर इंतजार करता है जब तक कि पहली वस्तु पहले धागे में दिखाई नहीं देती है, और इसे दूसरे धागे से पहली वस्तु से जोड़ती है। इस तथ्य के बावजूद कि दूसरे धागे में ये सभी 4 वस्तुएं तुरंत दिखाई देंगी, वह तब तक इंतजार करेगी, जब तक कि वस्तुएं पहले धागे में दिखाई न देने लगें। इस प्रकार, पहली धारा से पहली वस्तु हमारे दृष्टिकोण के रूप में दूसरी से पहली वस्तु से जुड़ेगी, और बाद में 100 मिलीसेकंड, जब कोई नई वस्तु दिखाई देगी, तो ऑपरेटर इसे दूसरी वस्तु के साथ संयोजित करेगा। इसलिए, दृश्य एक निश्चित देरी के साथ दिखाई देगा।

आइए RxJava में BiFinction से निपटते हैं । यह फ़ंक्शन इनपुट के रूप में दो ऑब्जेक्ट प्राप्त करता है, उन पर कुछ ऑपरेशन करता है, और एक तीसरी वस्तु देता है। हम समय लेना चाहते हैं और वस्तुओं को देखते हैं और इस तथ्य के कारण डिस्पोजेबल प्राप्त करते हैं कि हम fadeIn एनीमेशन कहते हैं और सदस्यता के लिए सदस्यता लेते हैं । समय का मूल्य हमारे लिए महत्वपूर्ण नहीं है। परिणामस्वरूप, हमें यह एनीमेशन मिलता है:

VanGogh

मैं आपको उस परियोजना के बारे में बताऊंगा जिसे इवान ने MBLT DEV 2017 के लिए विकसित करना शुरू किया था।

इवान द्वारा विकसित पुस्तकालय एनिमेशन के लिए विभिन्न गोले प्रस्तुत करता है। हम पहले ही इसके ऊपर विचार कर चुके हैं। इसमें रेडीमेड एनिमेशन भी हैं जिनका आप उपयोग कर सकते हैं। आपको अपने स्वयं के एनिमेशन बनाने के लिए उपकरणों का एक सामान्यीकृत सेट मिलता है। यह लाइब्रेरी आपको प्रतिक्रियाशील प्रोग्रामिंग के लिए अधिक शक्तिशाली घटक प्रदान करेगी।

उदाहरण का उपयोग करते हुए पुस्तकालय पर विचार करें:

 fun fadeIn(view:View) : AnimationCompletable { return AnimationBuilder.forView(view) .alpha(1f) .duration(2000L) .build().toCompletable() }

मान लीजिए कि आप एक एनीमेशन बनाना चाहते हैं, जो दिखाई देता है, लेकिन इस बार एक कंप्लीट ऑब्जेक्ट के बजाय एक एनीमेशन कॉमप्लेबल दिखाई देता है। यह वर्ग कंप्लीटटेबल से विरासत में मिला है, इसलिए अब अधिक कार्य दिखाई देते हैं। पिछले कोड की एक महत्वपूर्ण विशेषता यह थी कि एनिमेशन को रद्द करना असंभव था। अब आप एक एनीमेशनकॉमटेबलटेबल ऑब्जेक्ट बना सकते हैं जो एनीमेशन बंद कर देता है जैसे ही हम इससे अनसब्सक्राइब करते हैं।

एक लाइब्रेरी कक्षाओं में से एक - एनिमेशनब्यूरी का उपयोग करके एक उभरता हुआ एनीमेशन बनाएं। निर्दिष्ट करें कि किस दृश्य पर एनीमेशन लागू किया जाएगा। संक्षेप में, यह वर्ग ViewPropertyAnimator के व्यवहार को कॉपी करता है, लेकिन इस अंतर के साथ कि आउटपुट एक स्ट्रीम है।

अगला, अल्फा 1 एफ सेट करें और अवधि 2 सेकंड है। फिर हम एनीमेशन एकत्र करते हैं। जैसे ही हम बिल्ड स्टेटमेंट लागू करते हैं , एनीमेशन दिखाई देता है। हम एक अपरिवर्तनीय वस्तु की संपत्ति का एनिमेशन प्रदान करते हैं, इसलिए यह इन विशेषताओं को इसके लॉन्च के लिए बचाएगा। लेकिन एनीमेशन स्वयं शुरू नहीं होगा।

कॉमप्‍लेक्‍टेबल को कॉल करें , जो एक ऐनिमेशनकंप्‍लाईटेबल बनाएगा। यह प्रतिक्रियाशील प्रोग्रामिंग के लिए एक प्रकार के शेल में इस एनीमेशन के मापदंडों को लपेट देगा, और जैसे ही आप इसे सदस्यता लेंगे, यह एनीमेशन शुरू कर देगा। यदि आप प्रक्रिया पूरी होने से पहले इसे बंद कर देते हैं, तो एनीमेशन समाप्त हो जाएगा। अब आप कॉलबैक फ़ंक्शन भी जोड़ सकते हैं। आप ऑपरेटर doOnAnimationReady , doOnAnimationStart , doOnAnimationEnd और जैसे लिख सकते हैं:

 fun fadeIn(view:View) : AnimationCompletable { return AnimationBuilder.forView(view) .alpha(1f) .duration(2000L) .buildCompletable() .doOnAnimationReady { view.alpha = 0f } }

इस उदाहरण में, हमने दिखाया कि एनिमेशनब्यूलेर का उपयोग करना कितना सुविधाजनक है, और एनीमेशन शुरू करने से पहले हमारे दृश्य की स्थिति को बदल दिया।

रिपोर्ट वीडियो

हमने कोटलिन और RxJava का उपयोग करते हुए एनिमेशन बनाने, बनाने और संरेखित करने के विकल्पों में से एक को देखा। यहां एक परियोजना का लिंक दिया गया है जो उनके लिए बुनियादी एनिमेशन और उदाहरणों के साथ-साथ एनिमेशन के साथ काम करने के लिए मुख्य गोले का वर्णन करता है।

डिक्रिप्शन के अलावा, मैं रिपोर्ट का एक वीडियो साझा करता हूं:

स्पीकर MBLT DEV 2018

MBLT DEV 2018 से पहले, दो महीने से थोड़ा अधिक समय शेष है। हम निम्नलिखित प्रदर्शन करेंगे:

लॉरा मोरिनिगो, Google डेवलपर विशेषज्ञ
कौशिक गोपाल, खंडित पोडकास्ट के लेखक
अरटोम रुदोई, सगाई
दीना सिदोरोवा, Google, और अन्य ।

कल टिकट की कीमत बदल जाएगी। आज ही पंजीकरण करें ।

Kotlin और RxJava पर आधारित एंड्रॉइड एनिमेशन