बैंक के मोबाइल एप्लिकेशन में आकर्षक लाइब्रेरी का उपयोग करने का अभ्यास

नमस्कार, हेब्र!

एक समय में, उत्पाद स्वामी ने हमें अपने एंड्रॉइड / आईओएस एप्लिकेशन में एनीमेशन शुरू करने के लिए एक प्रभावी प्रक्रिया बनाने के बारे में सोचने के लिए कहा। उस समय, हमने ऋण उत्पाद के लिए व्यक्तिगत डेटा के साथ एप्लिकेशन को पूर्व-भरने का कार्य किया, और सर्वर को प्रतिक्रिया देने में कुछ समय लगा, जिसके दौरान हम एक सुंदर लोडिंग एनीमेशन दिखाना चाहते थे।


कार्य स्पष्ट था: डिजाइनर दोनों को स्रोत कोड देने के लिए, खूबसूरती से आकर्षित करना चाहते थे
उसके हिस्से पर डोपिलिवैनिया के बिना प्लेटफार्म, और इसलिए कि यह पुराने उपकरणों पर नहीं चलता है (हाँ, हम अभी भी एंड्रॉइड 4.1 का समर्थन करते हैं)।

एनीमेशन शुरू करने के लिए मेरे पास क्या विकल्प थे:

1. एनिमेटेड वेक्टर का उपयोग कर कलम। अच्छी बात यह है कि प्रतिपादन कार्य करता है
   एक अलग थ्रेड (एपीआई 25 के साथ शुरू) में, इस तरह के एनिमेशन बनाने और वस्तुओं के साथ कम संख्या में हेरफेर करने की जटिलताएं हैं। सरल एनिमेशन के लिए, यह सब अच्छी तरह से काम करता है, लेकिन थोड़ा और अधिक जटिल है, और नरक शुरू होता है। हां, और विभिन्न प्लेटफार्मों पर आप शुरू नहीं करेंगे।
2. जीआईएफ - वे बहुत वजन करते हैं, एक निश्चित आकार होता है, जिसका अर्थ है कि वे सामान्य रूप से पैमाने पर नहीं होते हैं। और आप उनके साथ कोई विशेष हेरफेर नहीं करेंगे।
3. Png अनुक्रम (कोई टिप्पणी नहीं)।

कुछ समय के लिए Android और gif के मूल वेक्टर एनीमेशन की दिशा में खुदाई करना (ओह माय गॉड, हमने अभी भी इस विकल्प पर विचार किया है), मैंने अद्भुत लोटी लाइब्रेरी को याद किया, और अपने सहयोगियों को दिखाया।

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

Lottie का आविष्कार और Airbnb द्वारा क्रॉस-प्लेटफॉर्म एनीमेशन की बढ़ती मांग के जवाब में लागू किया गया था, इसलिए यह सभी प्लेटफार्मों पर समान रूप से (अच्छी तरह से, लगभग) काम करता है। डेवलपर्स खुद दावा करते हैं कि उनका लक्ष्य आफ्टर इफेक्ट्स सुविधाओं की अधिकतम संख्या का एहसास करना है, और वे इसमें सफल रहे। अब Lottie एनीमेशन को एम्बेड करना उतना ही आसान है जितना कि ImageView में कोई चित्र सम्मिलित करना।

मुख्य 3 कक्षाएं:

1. LottieAnimationView ImageView का उत्तराधिकारी है, और एनीमेशन का उपयोग करने का सबसे आसान तरीका है। आप xml में एनीमेशन का वर्णन कर सकते हैं, या आप कोड में कर सकते हैं, अधिकांश तरीके समर्थित हैं।
2. LottieDrawable - Drawable descendant, पिछली कक्षा के समान कार्यक्षमता के साथ, आपको किसी भी दृश्य में एनीमेशन लागू करने की अनुमति देता है।
3. LottieComposition और इसके साथी LottieCompositionFactory आपको विभिन्न स्रोतों से एनिमेशन प्रीलोड करते हैं और LottieDrawable और LottieAnimationView पर लागू होते हैं।

संसाधन लोड हो रहा है

से लोडिंग संसाधनों का समर्थन करता है:

1. रेस / कच्चा
2. src / संपत्तियां
3. जसन स्ट्रिंग
4. नेटवर्क से कोई भी url एक json या zip फ़ाइल की ओर जाता है (HttpURLConnection के माध्यम से कार्यान्वित किया जाता है, ताकि बाहरी निर्भरताएं न जोड़ें। यदि आपके पास चित्रों के साथ एनीमेशन है, तो आपको ज़िप का उपयोग करने की आवश्यकता है)
5. InputStream json या ज़िप फ़ाइल

एनिमेशन कैशिंग

अच्छी बात यह है कि रेस / रॉ या एसेट्स के माध्यम से डाउनलोड किए गए सभी एनिमेशन एलआरयू कैश द्वारा सहेजे जाते हैं, जो हमें उपयोगकर्ता के समय को पुनः लोड करने और एनीमेशन को पार्स करने में बर्बाद नहीं करने की अनुमति देता है, क्योंकि जटिल एनिमेशन के मामले में कुछ समय लग सकता है। यहां तक ​​कि कूलर भी, यदि आपको एनीमेशन को पूर्व-लोड करने की आवश्यकता है, और फिर अगले टुकड़े में एनीमेशन को तुरंत प्रदर्शित करते हैं, तो आप कोड का उपयोग कर सकते हैं

LottieCompositionFactory.fromRawRes(context, rawFile) 

अपरिष्कृत कुंजी का उपयोग करके एनीमेशन को कैश किया गया है, और जहां आपको वास्तव में इसका उपयोग करने की आवश्यकता है, यह लगभग तुरंत शुरू होता है।

प्रगति प्रबंधन

Lottie आपको setProgress (...) के माध्यम से वर्तमान एनिमेशन स्थिति सेट करने की अनुमति देता है। यदि आप फ़ाइल अपलोड स्थिति, स्क्रॉल स्थिति, विभिन्न इशारों आदि को चेतन करना चाहते हैं तो यह काम आ सकता है। मैंने बॉटमशीट, पुलटॉर्फफ्रेश, कोलैप्सिंगटूलबार लयआउट पर विभिन्न कार्यान्वयन देखे।

AppBarLayout के साथ प्रगति का उपयोग कैसे करें:

 appBarLayout.addOnOffsetChangedListener(AppBarLayout.OnOffsetChangedListener { appBarLayout, verticalOffset -> val percent = Math.abs(verticalOffset).toFloat()/appBarLayout.totalScrollRange animationView.progress = percent }) 

पाशन

लोटी लूपिंग सेटरिपेटमोड () या सेटरीपेटकाउंट () में न केवल पूरे एनीमेशन का समर्थन करती है, बल्कि किसी भी टुकड़े के भीतर (0.0 ... 1.0) का समर्थन करती है। यह गुण setMinFrame, setMaxFrame, setMinAndMaxFrame द्वारा कार्यान्वित किया जाता है। हमने इसका उपयोग विभिन्न फाइल अपलोड राज्यों के लिए 3 एनिमेशन लागू नहीं करने के लिए किया है: निष्क्रिय, प्रगति, पूर्ण। यहाँ एक छोटा सा कोड है जो इसे हल करता है:

 when (loadingStatus) { LoadingStatus.IDLE -> { animationView.setMaxProgress(0.1f) } LoadingStatus.PROGRESS -> { animationView.setMinAndMaxProgress(0.2f, 0.9f) animationView.repeatCount = LottieDrawable.INFINITE animationView.playAnimation() } LoadingStatus.COMPLETE -> { animationView.setMinAndMaxProgress(0.9f, 1f) animationView.repeatCount = 1 animationView.playAnimation() }} 

तस्वीरें

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

एक स्थिर तस्वीर के मामले में, सब कुछ सरल है: डिजाइनर जन्स प्लस के संग्रह के साथ ही तस्वीर को भी उतारता है।

 { "v": "5.1.13", "fr": 29.9700012207031, "ip": 0, "op": 47.0000019143492, "w": 1034, "h": 1334, "nm": " 1", "ddd": 0, "assets": [ { "id": "image_0", "w": 130, "h": 436, "u": "images/", "p": "img_0.png" }, { "id": "comp_0", "layers": [ ... ]}] } 

यह img_0.png, यह वह चित्र है जिसे आपको src / आस्तियों में लगाना चाहिए, और जो कि एनीमेशन के अंदर होगा।

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

 glideLoader.loadAsBitmap(imageUrl).into(object: CustomTarget<Bitmap>() { override fun onResourceReady(resource: Bitmap, transition: Transition<in Bitmap>?) { viewAnimation.setImageAssetDelegate(object: ImageAssetDelegate { override fun fetchBitmap(asset: LottieImageAsset?): Bitmap { asset?.let { val resizeBitmap =Bitmap.createScaledBitmap(resource, it.width, it.height, true); return resizeBitmap } ?: run { return resource } } }) setAnimation(viewAnimation, animationImage) } override fun onLoadCleared(placeholder: Drawable?) {} }) 

उत्पादकता

बेशक, स्क्रीन पर बहुत सारे एनीमेशन का उपयोग नहीं करना बेहतर है जहां उपयोगकर्ता बहुत समय बिताता है, क्योंकि यह प्रोसेसर पर मांग कर रहा है। हमारे परीक्षणों के अनुसार, कुछ एनिमेशनों पर प्रोसेसर लोड 20% तक पहुंच जाता है। इसलिए, इस तरह के एनीमेशन का आदर्श मामला इंटरैक्टिव तत्व हैं जो एक बार आग लगाते हैं।

यदि कुछ उपकरणों पर एनीमेशन धीमा हो जाता है, तो कभी-कभी यह मदद करता है

 viewAnimation.useHardwareAcceleration(true) 

हालांकि, डेवलपर्स इस पद्धति का उपयोग सावधानी से करने की सलाह देते हैं, क्योंकि विभिन्न फोन विभिन्न तरीकों से हार्डवेयर त्वरण का उपयोग करते हैं, इसलिए त्वरण के बजाय, आप विपरीत प्रभाव प्राप्त कर सकते हैं।

निष्कर्ष

सामान्य तौर पर, लॉटी लाइब्रेरी का उपयोग करने से एप्लिकेशन में एनीमेशन के कार्यान्वयन को बहुत सरल किया जाता है।

लोटी के मुख्य लाभ जिन्हें हमने उजागर किया:

1. छोटे पुस्तकालय का आकार (300 kb)
2. क्रॉस-प्लेटफ़ॉर्म समाधान ios / android / web
3. वेब से एनिमेशन डाउनलोड करें
4. प्रगति प्रबंधन और कहीं भी पाशन
5. प्रभाव के बाद से सुविधाओं की एक बड़ी संख्या डिजाइनर को इच्छित प्रभाव का एहसास करने की अनुमति देती है।

विपक्ष:

1. मुख्य धागे में रेंडरिंग किया जाता है, और एफपीएस आवेदन में महत्वपूर्ण रूप से गिर सकता है।
2. पार्सिंग लोट्टी एनिमेशन जटिल एनिमेशन के साथ काफी समय ले सकते हैं।

वैसे, संसाधन-गहन एनीमेशन कैसा है, यह जांचने के लिए, आप Google Play से आधिकारिक लोट्टी ऐप का उपयोग कर सकते हैं। एक रेंडर ग्राफ़ है जहाँ आप किसी फ़्रेम को रेंडर करने के लिए समय देख सकते हैं, और यह भी देख सकते हैं कि यदि आप इसे फ्रेम में काटते हैं, या हार्डवेयरअक्लरेशन और बहुत कुछ कैसे प्रभावित करेगा, तो एनीमेशन कैसा दिखेगा।