नमस्ते। मैं zm soft हूँ, जिसने पिछले साल (2023 के अंत में) डेवलपर के रूप में पंजीकरण किया और ऐप रिलीज़ करना शुरू किया। डेवलपर्स के लिए एक ऐप भी लॉन्च करने की योजना है, इसलिए चाहें तो ज़रूर देखें।
क्या आप सब अपने ऐप्स में एनिमेशन का उपयोग करते हैं? थोड़ा एनिमेशन होने से ऐप अधिक समझने योग्य और आकर्षक बन जाता है, है ना? इसलिए आज मैं Android ऐप्स में एनिमेशन प्रदर्शित करने के बारे में लिखना चाहता हूँ।
LottieAnimation
मैं जो लाइब्रेरी उपयोग करता हूँ वह LottieAnimation है, जो एनिमेशन प्रदर्शित करने वाली लाइब्रेरी है। मैं इसे इसलिए उपयोग करता हूँ क्योंकि यह अपेक्षाकृत आसानी से हल्के एनिमेशन प्रदर्शित करने की सुविधा देती है।
किस प्रकार के एनिमेशन प्रदर्शित किए जा सकते हैं / एनिमेशन के प्रकार
सबसे पहले, इस लाइब्रेरी की एक अच्छी बात यह है कि इसमें मुफ्त उपयोग योग्य एनिमेशन की भरमार है। उदाहरण के लिए, इस प्रकार के एनिमेशन उपलब्ध हैं।
ये एनिमेशन LottieFiles की आधिकारिक वेबसाइट पर प्रकाशित हैं। कई भुगतान वाले एनिमेशन भी हैं, लेकिन केवल मुफ्त वाले फ़िल्टर करने पर जो मिलते हैं वे उपयोग के लिए पर्याप्त हैं। मूल रूप से, चूँकि मेरे पास एनिमेशन खरोंच से बनाने का न कौशल है न ऊर्जा, इसलिए जब भी कोई हलचल जोड़नी होती है, मैं पहले इस साइट पर कुछ उपयोगी ढूंढने के बारे में सोचता हूँ। उदाहरण के लिए, इस तरह के एनिमेशन का उपयोग करके, पहले प्रदर्शन के समय उपयोगकर्ता को सामान्य क्लिक स्थानों के बारे में बताया जा सकता है। मैंने वास्तव में दाईं ओर के इस एनिमेशन का उपयोग करके उपयोगकर्ता को संचालन मार्गदर्शन प्रदान किया।
मुख्य बिंदु: सरलता
कार्यान्वयन में भी काफी सरल तरीके से काम किया जा सकता है। उदाहरण के लिए, यदि आप केवल एक निश्चित लेआउट में एनिमेशन प्रदर्शित करना चाहते हैं, तो इसे नीचे दिए तरीके से परिभाषित करना ही पर्याप्त है। बिना कोई लॉजिक कार्यान्वित किए यह काम करे, क्या यह शानदार नहीं है?
Lottie की सरल कार्यान्वयन विधि
Lottie का कार्यान्वयन अत्यंत सरल है। किसी विशेष लेआउट में एनिमेशन एम्बेड करना ही पर्याप्त है, बिना किसी अतिरिक्त लॉजिक के।
कार्यान्वयन उदाहरण:
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_id"
app:lottie_rawRes="@raw/your_lottie_animation"/>
Lottie का बुनियादी उपयोग
Lottie के उपयोग के मुख्य चरण इस प्रकार हैं:
- लाइब्रेरी एकीकरण (build.gradle का संशोधन)
- एनिमेशन फ़ाइल प्राप्त करना और रखना
- लेआउट फ़ाइल का सेटअप
- एनिमेशन का अनुकूलन
विशिष्ट कार्यान्वयन उदाहरण और कोड
नीचे Lottie का उपयोग करते समय विशिष्ट कार्यान्वयन उदाहरण दिए गए हैं। इसमें लाइब्रेरी का एकीकरण, एनिमेशन फ़ाइल रखने की विधि, लेआउट फ़ाइल सेटअप विधि और एनिमेशन अनुकूलन विधि शामिल हैं।
build.gradle में जोड़ना / लाइब्रेरी एकीकरण:
सबसे पहले, Lottie का उपयोग करने के लिए लाइब्रेरी एकीकृत करें।
यदि कोई संगतता समस्या नहीं है, तो कृपया नवीनतम संस्करण का उपयोग करें।
dependencies {
implementation 'com.airbnb.android:lottie:3.4.0'
}
एनिमेशन फ़ाइल का स्थान:
LottieFiles की आधिकारिक साइट से अपनी पसंदीदा एनिमेशन फ़ाइल (.json) डाउनलोड करें और ऐप के res/raw फ़ोल्डर में रखें।
लेआउट फ़ाइल का सेटअप:
XML लेआउट में LottieAnimationView जोड़ें ताकि वह डाउनलोड की गई एनिमेशन फ़ाइल को संदर्भित कर सके।
एनिमेशन का अनुकूलन:
आवश्यकतानुसार एनिमेशन के व्यवहार को अनुकूलित करें। एनिमेशन सेटिंग्स में निम्नलिखित किया जा सकता है:
- लूप प्लेबैक का उपयोग या नहीं
- लूप की संख्या निर्दिष्ट करना
- प्लेबैक गति निर्दिष्ट करना (रिवर्स प्लेबैक सहित)
डायनामिक प्रसंस्करण जोड़कर, आप मनचाहे समय पर प्लेबैक/स्टॉप कर सकते हैं और प्लेबैक गति बदल सकते हैं।
पहले स्थैतिक निर्दिष्टीकरण विधि के बारे में। निम्नलिखित निर्दिष्टीकरण के अनुसार एनिमेशन व्यवहार बदलता है।
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/lottie_id"
android:scaleType="centerCrop"
app:lottie_autoPlay="true"
app:lottie_loop="true"
app:lottie_speed="0.15"
app:lottie_rawRes="@raw/your_lottie_animation"/>
इस उदाहरण में, your_lottie_animation.json फ़ाइल 0.15x की प्लेबैक गति से स्वतः और दोहराकर चलती है।
इसके बाद, डायनामिक प्रसंस्करण:
lottieAnimationView.playAnimation()
उपरोक्त प्रसंस्करण से प्लेबैक हो सकता है। प्लेबैक के अलावा, सेटिंग्स बदलकर रोकना और गति बदलना भी किया जा सकता है। निम्नानुसार लिसनर सेट करके प्लेबैक समाप्ति का पता लगाकर प्रसंस्करण भी किया जा सकता है:
lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animation: Animator) {
// アニメーション開始時の処理
}
override fun onAnimationEnd(animation: Animator) {
// アニメーション終了時の処理
}
override fun onAnimationCancel(animation: Animator) {
// アニメーションがキャンセルされた時の処理
}
override fun onAnimationRepeat(animation: Animator) {
// アニメーションがリピートされる時の処理
}
})
सावधानियाँ और समस्या निवारण
Lottie बहुत उपयोगी है, लेकिन कुछ सावधानियाँ भी हैं। विशेष रूप से, ऑब्जेक्ट की स्थिति बदलना कभी-कभी अपेक्षा के अनुसार काम नहीं कर सकता। साथ ही, एनिमेशन समाप्ति के समय प्रसंस्करण से संबंधित स्टैक ओवरफ्लो की समस्या और onPause के बाद के व्यवहार के बारे में भी बताऊँगा।
समस्या निवारण उदाहरण 1:
यह मेरे कार्यान्वयन की समस्या थी: एनिमेशन समाप्ति के समय प्रसंस्करण को संभालने के तरीके से स्टैक ओवरफ्लो हुआ। विशेष रूप से, एनिमेशन के अंत तक पहुँचने पर रिवर्स प्लेबैक करने और प्लेबैक व रिवर्स प्लेबैक को बार-बार दोहराने वाले प्रसंस्करण में समस्या थी। मुख्य थ्रेड पर पोस्ट करके और क्यू में पुनः डालकर समस्या हल की:
lottieAnimationView.addAnimatorListener(object : Animator.AnimatorListener {
override fun onAnimationStart(animation: Animator) {
// アニメーション開始時の処理
}
override fun onAnimationEnd(animation: Animator) {
// アニメーション終了時の処理
lottieAnimationView.speed = lottieAnimationView.speed*(-1) // 逆再生のためにスピードを逆にする
lottieAnimationView.post {
// 直接呼ぶと再起呼び出しでスタックオーバーフローするのでPOSTする
if(isAttachedToWindow) {
lottieAnimationView.playAnimation()
}
}
}
override fun onAnimationCancel(animation: Animator) {
// アニメーションがキャンセルされた時の処理
}
override fun onAnimationRepeat(animation: Animator) {
// アニメーションがリピートされる時の処理
}
})
समस्या निवारण उदाहरण 2:
एक और ध्यान देने योग्य बात onPause के बाद का प्रसंस्करण है। अनावश्यक ऑपरेशन से बचने के लिए, बैकग्राउंड में एनिमेशन बंद कर देना चाहिए।
override fun onResume(owner: LifecycleOwner) {
super.onResume(owner)
// アニメーションを開始
lottieAnimationView.playAnimation()
}
override fun onPause(owner: LifecycleOwner) {
lottieAnimationView.cancelAnimation()
super.onPause(owner)
}
हालांकि, जब एनिमेशन समाप्ति आदि पर प्रसंस्करण हो रहा हो, तो यह अकेला पर्याप्त नहीं था। इसलिए पैरेंट व्यू डिटैच हुआ है या नहीं यह जांचना और पुनः प्रसंस्करण करना आवश्यक था:
if(isAttachedToWindow) {
binding.lottieBackground.playAnimation()
}
सारांश
Lottie ऐप के UI को बेहतर बनाने के लिए एक शक्तिशाली उपकरण है। मुफ्त उपयोग योग्य एनिमेशन की भरमार है और कार्यान्वयन भी सरल है। सावधानियों को समझकर और उचित तरीके से उनसे निपटकर, ऐप विकास में बड़े लाभ उठाए जा सकते हैं। कुछ सावधानियाँ होने के बावजूद, समग्र रूप से यह बहुत उपयोग में आसान है और मुफ्त संसाधन भी बहुत हैं, इसलिए मुझे यह एक उत्कृष्ट लाइब्रेरी लगती है। ऐप की उपस्थिति सुधारने में निश्चित रूप से मदद करेगी, इसलिए इसे ज़रूर आज़माएं।