मोबाइल अनुप्रयोगों में एनिमेशन: परीक्षण आकर्षक

बहुत से लोग LottieFiles पुस्तकालय के बारे में जानते हैं, लेकिन वे व्यवहार में प्रयास करने के लिए जल्दी में नहीं हैं। इस विषय पर कुछ लेख हैं, इसलिए मैंने लॉटी का उपयोग करके मोबाइल एप्लिकेशन के लिए एनिमेशन बनाने में अपने अनुभव को साझा करने का निर्णय लिया।



आप मोबाइल इंटरफेस में एनीमेशन के बिना नहीं कर सकते। यह एप्लिकेशन को पुनर्जीवित करता है, उपयोगकर्ता को नेविगेट करने और अपने कार्यों के लिए प्रतिक्रिया प्राप्त करने में मदद करता है, भावनाओं का कारण बनता है।

बातचीत के प्रकार से, आप एनीमेशन को कई श्रेणियों में विभाजित कर सकते हैं:

1. microinteractions - उपयोगकर्ता कार्यों के लिए दृश्य प्रतिक्रियाएं, स्क्रीन पर विशिष्ट इंटरफ़ेस तत्वों का एनीमेशन, उदाहरण के लिए, बटन या आइकन;
2. स्क्रीन के भीतर स्वतंत्र ग्राफिक एनीमेशन , उदाहरण के लिए, ऑनबोर्डिंग या स्प्लैश-स्क्रीन में एनिमेटेड चित्रण;
3. संक्रमण - एक एनीमेशन जो दो स्क्रीन को जोड़ता है।

आइए स्पष्ट करें कि लॉटी के लिए किस प्रकार के इंटरैक्शन उपयुक्त हैं।

हम बारीकियों को समझते हैं

LottieFiles iOS, Android, Web और Windows के लिए एक लाइब्रेरी है। इस लेख में मैं केवल iOS और Android के लिए सुविधाओं के बारे में बात करूंगा, क्योंकि मैं मोबाइल इंटरफेस में विशेषज्ञ हूं।

एक छोटा शैक्षिक कार्यक्रम - पुस्तकालय में json फाइलें होती हैं जो Adobe After Effect से एनीमेशन इनकोड करती हैं। ऐसी फ़ाइलों को बनाने में जो प्लगइन शामिल है, उसे Bodymovin कहा जाता है। यह एक जावास्क्रिप्ट इंजन है और वास्तविक समय में एनीमेशन प्रदान करता है।

यदि आपने पहले इस कार्यक्रम के साथ काम नहीं किया है तो आप एडोब आफ्टर इफेक्ट के परीक्षण संस्करण का उपयोग कर सकते हैं। एक सप्ताह के उपयोग में, आपके पास परीक्षण करने और यह तय करने का समय होगा कि आपको इसकी आवश्यकता है या नहीं।

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


समर्थित सुविधाएँ iOS और Android के लिए पिवट टेबल

आकर्षक फ़ाइलें बनाएँ

डिजाइनर एडोब आफ्टर इफेक्ट में एनीमेशन बनाता है, सीमाएं दी जाती हैं, फिर बोडिमोविन प्लगइन का उपयोग करके इसे निर्यात करता है। उसके बाद, आपको पूर्वावलोकन सेवाओं में एक परीक्षण फ़ाइल करने की आवश्यकता है - Bodymovin Player या Lottie पूर्वावलोकन ।

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

• ओवरडॉर्ड (एडम प्लॉफ़ से) एडोब आफ्टर इफेक्ट और एडोब इलस्ट्रेटर को एकीकृत करने के लिए - फ़ाइलों को आयात और व्यवस्थित किए बिना कार्यक्रमों के बीच जल्दी से वेक्टर रूपों को स्थानांतरित करने के लिए;
• AEUX (एडम प्लॉफ़ और Google SUMux से) - ओवरलॉर्ड के समान एडोब आफ्टर इफेक्ट और स्केच के एकीकरण के लिए। जल्द ही उपलब्ध होगा फिम्मा के लिए!

यदि प्लग इन खरीदना संभव नहीं है, तो बस Adobe Illustrator फ़ाइल को Adobe After Effect में संरचना के रूप में आयात करें। शुरू करने से पहले, आयातित परतों से आकार बनाएं। यदि ऐसा नहीं किया जाता है, तो जब आप json को निर्यात करते हैं, तो आप Adobe Illustrator फ़ाइल से बाध्य होने के कारण एनीमेशन के दृश्य भाग को खो देंगे।


Adobe Illustrator फ़ाइल में वेक्टर लेयर्स से आकृतियाँ बनाएँ

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


ऑनबोर्डिंग में एनीमेशन (छवि स्रोत - फ्लिकॉन )


बटन एनीमेशन और दो स्क्रीन के बीच संक्रमण के लिए एनीमेशन

लाइब्रेरी कनेक्ट करें

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

सभी मामलों का परीक्षण किया गया और जुड़ा हुआ है - विभिन्न उद्देश्यों के लिए लोट्टो का उपयोग एनिमेशन के लिए किया जा सकता है।


IOS पर Lottie को कनेक्ट करें

नया क्या है

हाल ही में, मैक्सिम रॉबिनैट ने Psycle Research के साथ मिलकर, Figma (love) Lottie प्रयोग शुरू किया, जिसमें उन्होंने लेआउट पर json प्रदर्शित करने के लिए Figma API का उपयोग करने का प्रयास किया।

सेवा का उपयोग करने के लिए, Figma में लेआउट के साथ प्रारंभिक जोड़तोड़ करें। उस पर परतों का एक समूह रखें: एनिमेशन, पाठ ब्लॉक में एनीमेशन मापदंडों (प्लेबैक गति और चक्रीयता) के लिए एक कंटेनर। यहाँ विस्तृत निर्देश ।

प्रदर्शन के लिए, आपको json की आवश्यकता होगी, एक्सेस के लिए एक व्यक्तिगत टोकन (आप इसे खाता सेटिंग्स में प्राप्त कर सकते हैं) और Figma में स्क्रीन लेआउट के लिए एक लिंक। वांछित मोकैप डिवाइस को लेआउट रिज़ॉल्यूशन में स्वचालित रूप से जोड़ा जाएगा। परिणामस्वरूप, आपको एक लिंक मिलेगा जिसे आप साझा कर सकते हैं। वह लगभग दो महीने तक काम करेगी।

मुझे यही मिला है।

Figma (प्यार) Lottie आपको इंटरफ़ेस में सीधे json प्रदर्शित करने और एक डेवलपर की मदद के बिना एनीमेशन मापदंडों को कॉन्फ़िगर करने में मदद करेगा। Lottie पूर्वावलोकन और Bodymovin प्लेयर इन सुविधाओं की कमी है।

व्यवहार में?

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

यहां आप मेरे द्वारा बनाए गए json को डाउनलोड कर सकते हैं और उन्हें Lottie पूर्वावलोकन में देख सकते हैं।



Lottie पूर्वावलोकन ऐप खुद - iOS और Android