फ़्लटर के लिए रिव एनीमेशन: आसानी से आश्चर्यजनक एनिमेशन बनाने के लिए एक शुरुआती मार्गदर्शिका!

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

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

विषयसूची

• रिवाइव का परिचय🧙‍♂️

  • Rive🧗 में बुनियादी अवधारणाएँ

• एक सरल इंटरैक्टिव लॉगिन एनीमेशन🚀

  • अपने आर्टबोर्ड पर तत्व सेट करें📃
  • एनिमेशन समय!🕶️
  • अपनी स्टेट मशीन सेट करें🏍️
  • अपने फ़्लटर ऐप में एनिमेशन लागू करें👨‍🚒

• निष्कर्ष🏋️‍♀️

• सन्दर्भ🧶

  
  

रिवाइव का परिचय🧙‍♂️

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

Rive🧗 में बुनियादी अवधारणाएँ

यहां प्रमुख अवधारणाएं हैं:

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

एक सरल इंटरैक्टिव लॉगिन एनीमेशन🚀

हम एक सरल लॉगिन एनीमेशन बनाने और इसे अपने फ़्लटर ऐप पर निर्यात करने की प्रक्रिया से गुजरेंगे। हम ऐप में इस एनीमेशन की अन्तरक्रियाशीलता को प्रबंधित करने के लिए स्टेटमशीन का उपयोग करेंगे। अंत में, इसे इस तरह दिखना चाहिए 👇🏽

अपने आर्टबोर्ड पर तत्व सेट करें📃

रिव आर्टबोर्ड पर तत्व स्थापित करने के लिए नीचे दिए गए चरणों का पालन करें:

• सबसे पहले, हमें स्वयं तत्व प्राप्त करने की आवश्यकता होगी। मुझे यह फिग्मा पर यूजर पर्सन इलस्ट्रेशन टेम्प्लेट्स से मिला। तत्व को SVG फ़ाइल के रूप में निर्यात करें।
• अपने ड्राफ्ट खोलने के लिए रिव पर जाएं गेटस्टार्टेड बटन पर क्लिक करें
• अपने ड्राफ्ट में, एक नई फ़ाइल बनाएं और एक खाली आर्टबोर्ड चुनें।
• तत्व को आर्टबोर्ड पर खींचें और छोड़ें, यह स्वचालित रूप से एसेट फ़ोल्डर में जुड़ जाएगा और आप इसे अपने आर्टबोर्ड पर रखा हुआ देख सकते हैं, यह इस तरह दिखना चाहिए 👇🏽

• साइड बार पर, हम इस तत्व को बनाने वाली विभिन्न आकृतियों को समूहित करेंगे और तदनुसार उन्हें नाम देंगे। Ctrl या Ctrl + Shift का उपयोग करके वह सब चुनें जिसे आप समूहित करना चाहते हैं। जब आप इसे चुनते हैं, तो उन्हें समूहित करने के लिए Ctrl + G का उपयोग करें। इसे इस तरह दिखना चाहिए 👇🏽

• अब हम इस तत्व में हड्डियाँ जोड़ेंगे। हड्डियाँ अधिक गतिशील और यथार्थवादी एनिमेशन बनाने में मदद करती हैं। इस बात पर विचार करते हुए कि हम इस एनीमेशन को कैसे देखना चाहते हैं, हम सांस लेने का भ्रम पैदा करने के लिए गर्दन और छाती में हड्डियाँ जोड़ेंगे। हम बालों में हड्डियाँ भी जोड़ेंगे क्योंकि हम चाहते हैं कि बाल भी थोड़े हिलें।
• ऊपरी बाएँ कोने पर बोन टूल का चयन करें या Ctrl + B का उपयोग करें। हड्डियाँ जोड़ने के बाद यह इस तरह दिखना चाहिए 👇🏽

• अब हम आसान पहचान के लिए हड्डियों का नाम बदल देंगे। हम चेहरे के सभी तत्वों को भी समूहित करेंगे और इस नए समूह को चेहरा नाम देंगे। पदानुक्रमित संबंधों का उपयोग करके, हम हड्डियों को इस तत्व के उन हिस्सों से जोड़ सकते हैं जिन्हें हमें प्रभावित या विकृत करने की आवश्यकता है। हम हड्डियों को उन आकारों में ले जाकर ऐसा कर सकते हैं जिन पर वे सीधे प्रभाव डालते हैं। किसी समूह या हड्डी को स्थानांतरित करने के लिए, अपने माउस का उपयोग करके उसे चुनें और स्थानांतरित करें। यह इस तरह दिखेगा 👇🏽

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

  

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

• हम इस एनीमेशन में पलक झपकाने का प्रभाव चाहते हैं, इसे प्राप्त करने के लिए, हम इस तरह की दो आंखों के आकार पर क्लिप सुविधा का उपयोग करेंगे 👇🏽

• इसके बाद, हम इस तत्व में अनुवाद बाधाओं का उपयोग करके हेड ट्रैकिंग जोड़ेंगे क्योंकि हम एनीमेशन के दौरान हेड को स्थानांतरित करना चाहते हैं। चूँकि यह एक 2डी तत्व है, अनुवाद संबंधी बाधाओं को जोड़ने से इसे गहराई और कुछ प्रकार का 3डी प्रभाव मिलेगा। सब कुछ चुनें और उसे समूहित करें। अब हमारा एक समूह है.

• फिर, ऊपरी बाएं कोने पर, समूह टूल का चयन करें और सिर के केंद्र में (नाक क्षेत्र पर) एक समूह बनाएं। दाईं ओर टूलबार पर, इसकी शैली को समूह से लक्ष्य में बदलें, इसे ctrl_front नाम दें, इसे डुप्लिकेट करें, और डुप्लिकेट को ctrl_back नाम दें।

• लक्ष्य ctrl_back के लिए, दाईं ओर टूलबार से बाधा विकल्प का चयन करें। उपलब्ध बाधाओं के विकल्पों की सूची से अनुवाद बाधाओं को चुनें। इसके गुणों को सेट करने के लिए चयनित बाधा विकल्प से पहले आइकन पर क्लिक करें।

• ताकत को -100 पर सेट करें और इसके लक्ष्य को Ctrl फ्रंट पर सेट करें। अब जब आप Ctrl को आगे की ओर ले जाते हैं, तो Ctrl पीछे की ओर विपरीत दिशा में चला जाता है। यह हमें चेहरे के उन हिस्सों के लिए बाधाएं निर्धारित करने में मदद करेगा जिन्हें कानों की तरह विपरीत दिशा में चलना चाहिए। इसे इस तरह दिखना चाहिए 👇🏽

  
  

  

• अब हम चेहरे के बाकी हिस्सों के लिए बाधाएँ निर्धारित करेंगे। हम उन्हें बेहतर ढंग से प्रबंधित करने में मदद करने के लिए आंखों (बाएं और दाएं) और कानों (बाएं और दाएं) को भी समूहित करेंगे। हम आंखों के लिए कुछ इस तरह से बंदिशें तय करेंगे 👇🏽

• ध्यान दें कि कैसे हमने सबसे पहले आंखों के समूह की उत्पत्ति को ctrl_front के समान निर्धारित किया है। ताकि जब हम ctrl_front लक्ष्य को आगे बढ़ाएं, तो आंखों का समूह जो अब इस लक्ष्य तक सीमित है, बिना अजीब तरह से उछल-कूद किए इसके साथ आगे बढ़ेगा। हम निम्नलिखित के लिए भी ऐसा ही करेंगे:

हमें होठों के लिए कोई सीमा निर्धारित करने की आवश्यकता नहीं है।

अपनी सभी बाधाओं को जोड़ने के बाद यह इस तरह दिखता है 👇🏽

💃🏽 🥳 बधाई हो, हम जिस प्रकार के एनीमेशन को प्राप्त करना चाहते हैं उसके लिए हमने अपना तत्व सफलतापूर्वक तैयार कर लिया है। वाह!!

एनिमेशन समय!🕶️

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

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

• सबसे पहले, हम एनीमेशन प्रक्रिया शुरू करने से पहले अपने तत्व के सभी हिस्सों को समूहित करते हैं और इसे चरित्र का नाम देते हैं।
• फिर हमने अवधि 4 मिनट निर्धारित की,
• हमारा कार्यक्षेत्र सेट करें, और टाइमलाइन प्रकार को लूप पर सेट करें। यह निष्क्रिय एनीमेशन के लिए आदर्श है.

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

ऊपर दिए गए GIF से, आप देख सकते हैं कि टाइमलाइन पर अलग-अलग कीफ़्रेम पर, हमने चयनित आइटम के लिए अलग-अलग पोज़ सेट किए हैं। एक कीफ़्रेम से दूसरे कीफ़्रेम में यह संक्रमण एनीमेशन बनाता है। इसी प्रक्रिया का उपयोग करके, हम अन्य पाँच समय-सीमाएँ बनाएंगे। इस एनिमेशन को देखने और विभिन्न समय-सीमाओं को विस्तार से देखने के लिए आप यहां क्लिक कर सकते हैं। ऐसा दिखता है 👇🏽

अपनी स्टेट मशीन सेट करें🏍️

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

स्टेट मशीन में, हमारे पास तीन प्रकार के इनपुट होते हैं:

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

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

अपनी राज्य मशीन स्थापित करने के लिए नीचे दिए गए चरणों का पालन करें:

1. हमारी स्टेट मशीन में दो परतें बनाएं और एक का नाम बदलकर टाइप करें। एकाधिक परतें हमें कई राज्यों को एक साथ खेलने में मदद करती हैं। अपनी स्टेट मशीन में एक और परत प्राप्त करने के लिए, स्टेटमशीन ग्राफ़ के शीर्ष पर प्लस आइकन पर क्लिक करें।
2. इनपुट अनुभाग पर, आपको इसे राज्य मशीन के ठीक बगल में लेबल किया हुआ देखना चाहिए। प्लस आइकन पर क्लिक करें, एक नंबर इनपुट चुनें और इसे लुक नाम दें। हम इस इनपुट का उपयोग लुक_लेफ्ट और लुक_राइट टाइमलाइन एनिमेशन को ब्लेंड (मिश्रण) करते समय करेंगे ताकि जैसे-जैसे संख्या बढ़े, ऐसा लगे कि चरित्र बाएं से दाएं दिख रहा है।
3. एक और इनपुट बनाएं, इस बार एक बूलियन, और इसे चेक नाम दें। यह नियंत्रित करता है कि हम एनीमेशन कब देखना चाहते हैं। दो ट्रिगर इनपुट बनाएं, एक का नाम बदलें असफल और दूसरे का सफलता । सफलता और असफलता की स्थिति को ट्रिगर करने के लिए आपको इसकी आवश्यकता होगी।
4. अब टाइप लेयर ग्राफ़ पर लुक_आइडल एनीमेशन और लुक_लेफ्ट एनीमेशन को खींचें और छोड़ें। इस ग्राफ़ पर, आपको कुछ डिफ़ॉल्ट स्थितियाँ दिखाई देंगी:
   • प्रवेश - यह इस राज्य से जुड़े किसी भी एनीमेशन राज्य का प्रवेश बिंदु है।
   • निकास - यह इस राज्य से जुड़े किसी भी एनीमेशन राज्य का निकास बिंदु है
   • एनीस्टेट - इससे जुड़ा कोई भी एनीमेशन स्टेट तब तक चलता रहता है जब तक वह ट्रांज़िशन की शर्तों को पूरा करता है।
5. संक्रमण दो या दो से अधिक राज्यों को जोड़ने वाली रेखा और तीर है। तीर की दिशा को देखते हुए, आप देख सकते हैं कि राज्य अब कैसे जुड़े हुए हैं। जब आप इस पर क्लिक करते हैं, तो आप ट्रांज़िशन के गुण देख सकते हैं। गुणों में, आप एक शर्त बना सकते हैं. आपके द्वारा पहले बनाए गए किसी भी इनपुट का उपयोग करके, आप उस शर्त को परिभाषित कर सकते हैं जो आप चाहते हैं कि संक्रमण में अगली स्थिति से पहले पूरी होनी चाहिए।
6. प्रकार परत में, रैखिक रूप से ट्रांज़िशन का उपयोग करके Entry , look_Idle , और look_left स्थितियों को कनेक्ट करें। लुक_लेफ्ट स्थिति के लिए, हम चाहेंगे कि यह लुक_लेफ्ट और लुक_राइट एनीमेशन का मिश्रण हो। ऐसा करने के लिए, ग्राफ़ पर लुक_लेफ्ट स्थिति का चयन करें, और पैनल के बाईं ओर, ब्लेंड 1डी चुनें। इनपुट विकल्प के लिए, लुक इनपुट का चयन करें। यह इनपुट हमारे मिश्रण को नियंत्रित करेगा. फिर टाइमलाइन अनुभाग में, लुक_लेफ्ट और लुक_राइट टाइमलाइन का चयन करें, और उन्हें 0 और 100 पर सेट करें। जब आप लुक इनपुट आंकड़ा बढ़ाते हैं, तो यह दो एनिमेशन को मिश्रित करता है।
7. संक्रमण रेखा और तीर का उपयोग करके मिश्रण स्थिति को लुक_आइडल से कनेक्ट करें। अब तीर पर क्लिक करें और चेक इनपुट गलत होने पर स्थिति सेट करें। यह हमें एनीमेशन को नियंत्रित करने में मदद करेगा और स्टेटमशीन को बताएगा कि चेक बूलियन गलत होने पर लुक_आइडल स्थिति दिखाएं। लुक_आइडल से वापस मिश्रण स्थिति की ओर इशारा करने वाले संक्रमण तीर के लिए भी ऐसा ही करें, लेकिन अब जांचें कि बूलियन सत्य पर सेट है।
8. अब जब आप चेक इनपुट के लिए चेक बॉक्स पर क्लिक करते हैं, तो आप इसे सही या गलत पर सेट कर सकते हैं। जब आप स्टेट मशीन चलाते हैं, तो यह लुक_आइडल स्थिति दिखाता रहेगा जब तक कि आप चेक बूलियन को सत्य में नहीं बदल देते, तब यह लुक_लेफ्ट एनीमेशन शुरू कर देगा। लुक_लेफ्ट और लुक_राइट को मिश्रित करने के लिए, आप लुक इनपुट संख्या मान बढ़ाते हैं।
9. अब लेयर 1 में, यह वह जगह है जहां आप सफलता और असफल ट्रिगर जोड़ेंगे। प्रवेश स्थिति से, आप निष्क्रिय स्थिति को जोड़ेंगे। निष्क्रिय अवस्था से, सफलता और असफल दोनों अवस्थाओं को जोड़ें। निष्क्रिय से सफल स्थिति में संक्रमण में, एक शर्त जोड़ें। इस स्थिति में, सफलता ट्रिगर इनपुट जोड़ें। यह कह रहा है कि राज्य मशीन को सफलता एनीमेशन तभी चलाना चाहिए जब सफलता इनपुट ट्रिगर हो।
10. विफल स्थिति संक्रमण के लिए भी ऐसा ही करें लेकिन इसके बजाय स्थिति में विफल ट्रिगर जोड़ें। अब सफलता से, निष्क्रिय पर वापस एक संक्रमण रेखा बनाएं। यहां एग्जिट टाइम चुनें और इसे 100% पर सेट करें। इसका मतलब है कि निष्क्रिय एनीमेशन केवल तभी चलेगा जब सफल एनीमेशन चलना समाप्त हो जाएगा। असफल बैक टू आइडल ट्रांज़िशन के लिए भी ऐसा ही करें।

अब स्टेट मशीन में पूरा एनिमेशन इस तरह दिखेगा 👇🏽

संपूर्ण एनिमेशन और स्टेट मशीन यहां देखें।

बधाई हो 🥳, हमने अपने तत्व को सफलतापूर्वक एनिमेटेड कर दिया है और इसे एक स्टेट मशीन के साथ स्थापित कर दिया है! हालाँकि, रिव फ़ाइल को निर्यात करने से पहले, हम पृष्ठभूमि और चरित्र की शर्ट के रंग बदल देंगे। यह इस तरह दिखेगा👇🏽

पृष्ठभूमि का रंग (#B581EB) है और पात्र की शर्ट का रंग (#BD08D7) है

सब कुछ विस्तार से देखने के लिए एनीमेशन का लिंक यहां दिया गया है

अपने फ़्लटर ऐप में एनिमेशन लागू करें👨‍🚒

हम इस एनिमेशन का उपयोग अपने लॉगिन पेज पर करेंगे। फ़्लटर ऐप प्रोजेक्ट बनाएं और Rive निर्भरता को pubspec.yaml में जोड़ें

 dependencies: rive: ^0.11.12

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

• ईमेल/पासवर्ड सही होने पर सफलता एनीमेशन के साथ प्रतिक्रिया करें
• ईमेल/पासवर्ड गलत होने पर असफल एनीमेशन के साथ प्रतिक्रिया करें
• टेक्स्ट फ़ील्ड में कर्सर की दिशा के साथ प्रतिक्रिया दें

हम विजेट बिल्ड फ़ंक्शन से पहले कुछ चीजों को परिभाषित करेंगे।

 ///Login details String emailCred = "[email protected]"; String passwordCred = "123456"; /// input form controller FocusNode emailFocusNode = FocusNode(); TextEditingController emailCtr = TextEditingController(); FocusNode passwordFocusNode = FocusNode(); TextEditingController passwordCtr = TextEditingController(); /// rive controller and input values StateMachineController? controller; SMIInput<bool>? check; SMIInput<double>? look; SMIInput<bool>? success; SMIInput<bool>? fail; bool isLoading = false; bool isError = false; @override void initState() { emailFocusNode.addListener(emailFocus); passwordFocusNode.addListener(passwordFocus); super.initState(); } @override void dispose() { emailFocusNode.removeListener(emailFocus); passwordFocusNode.removeListener(passwordFocus); super.dispose(); } void emailFocus() { check?.change(emailFocusNode.hasFocus); } void passwordFocus() { check?.change(passwordFocusNode.hasFocus); }

यहां, हम निम्नलिखित नोट कर सकते हैं:

• सही ईमेल और पासवर्ड परिभाषित हैं.
• ईमेल और पासवर्ड के लिए फोकस नोड और टेक्स्ट एडिटिंग कंट्रोलर को भी परिभाषित किया गया है।
• यहां रिव कंट्रोलर और इनपुट को निरर्थक के रूप में परिभाषित किया गया है। आपने देखा कि इनपुट को उसी सटीक नाम का उपयोग करके परिभाषित किया गया है जिसका उपयोग वे राज्य मशीन में करते हैं।
• लोडिंग और त्रुटि बूलियन परिभाषित किया गया है।
• emailFocus और passwordFocus फ़ंक्शन में, चेक इनपुट को बूलियन FocusNode.hasFocus के आधार पर बदला जाता है
• फिर initState और dispose फ़ंक्शंस में, हम देखते हैं कि श्रोताओं को जोड़ा और हटाया जाता है। श्रोता फ़ोकस परिवर्तन को सुनने के आदी हैं।

आप यूआई के लिए कोड और बाकी कोड यहां देख सकते हैं। कोड का यह भाग दिखाता है कि RiveAsset कैसे जोड़ें:

 SizedBox( height: 250, width: 250, child: RiveAnimation.asset( "assets/login_screen.riv", fit: BoxFit.fitHeight, stateMachines: const ["Login State Machine"], onInit: (artboard) { controller = StateMachineController.fromArtboard( artboard, "Login State Machine", ); if (controller == null) return; artboard.addController(controller!); check = controller?.findInput("check"); look = controller?.findInput("look"); success = controller?.findInput("success"); fail = controller?.findInput("fail"); }, ), ),

उपरोक्त कोड से, हम निम्नलिखित नोट कर सकते हैं:

• स्टेटमशीन का वही नाम है जिसे हमने रिव संपादक में रखा था
• नियंत्रक और इनपुट परिभाषित हैं

यहाँ लॉगिन फ़ंक्शन के लिए कोड है:

 void login()async{ //extract the text coming from the text fields final email = emailCtr.text; final password = passwordCtr.text; //Set loading boolean to true and delay to give an illusion of loading setState(() { isLoading = true; }); await Future.delayed( const Duration(milliseconds: 2000), ); // check if details entered is the same as the correct creditials defined if (email == emailCred && password == passwordCred) { //if correct trigger the success input and set error boolean to false success?.change(true); setState(() { isError = false; }); if(context.mounted){ // delay and navigate to home screen await Future.delayed( const Duration(seconds: 2),(){ Navigator.push(context, MaterialPageRoute(builder: (context) =>const HomeScreen())); }); } } else { // if details don't match defined credentials // set error boolean to true and trigger the fail input // set loading boolean to false setState(() { isError = true; }); fail?.change(true); } setState(() { isLoading = false; }); }

पूरा कोड यहां देखें।

ऐसा करके, हमने अपना लॉगिन एनीमेशन कोड पूरा कर लिया है। यहां बताया गया है कि सब कुछ कैसा दिखता है:

निष्कर्ष🏋️‍♀️

बधाई हो! हमने यह सरल इंटरैक्टिव लॉगिन एनीमेशन पूरा कर लिया है। हम जो कुछ भी हासिल करने में सक्षम थे उसका एक सिंहावलोकन यहां दिया गया है:

• रिव आर्टबोर्ड पर अपना तत्व सेट करें,
• इस तत्व की विभिन्न एनिमेटेड अवस्थाएँ बनाएँ,
• राज्य मशीन की सहायता से इन सभी राज्यों को एक साथ रखें
• निर्यात करें और इसे फ़्लटर ऐप में जोड़ें

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

रिव एनीमेशन को बेहतर ढंग से समझने के लिए इन वीडियो ट्यूटोरियल को देखें

आप Rive एनिमेशन पर कई वीडियो ट्यूटोरियल के लिए Rive चैनल भी देख सकते हैं।

सन्दर्भ🧶

एनिमेटेड लॉगिन चरित्र