एनिमेशन आम तौर पर किसी ऐप या वेबसाइट की दृश्य अपील को बढ़ाते हैं और उपयोगकर्ताओं की समग्र सहभागिता में सुधार करते हैं। फॉरेस्टर रिसर्च के एक अध्ययन के अनुसार, अच्छी तरह से निष्पादित एनिमेशन वाली वेबसाइटें उपयोगकर्ता जुड़ाव में 400% तक की वृद्धि का अनुभव करती हैं। आकर्षक एनिमेशन उपयोगकर्ताओं का ध्यान आकर्षित कर सकते हैं और उन्हें प्लेटफ़ॉर्म के साथ अधिक बातचीत करने के लिए प्रोत्साहित कर सकते हैं। हालाँकि, डेवलपर्स के लिए एनीमेशन में महारत हासिल करना सीखने की प्रक्रिया है, खासकर जब अधिक उन्नत एनीमेशन टूल और तकनीकों के साथ काम कर रहे हों। एनीमेशन में कोई अनुभव नहीं रखने वाले डेवलपर के रूप में रिव को समझना अन्य एनीमेशन टूल या फ्रेमवर्क की तुलना में अपेक्षाकृत आसान हो सकता है। रिव (पूर्व में फ़्लेयर के नाम से जाना जाता था) को उपयोगकर्ता के अनुकूल और डेवलपर्स के लिए सुलभ बनाया गया है, यहां तक कि उन लोगों के लिए भी जिनके पास एनीमेशन का बहुत कम या कोई पूर्व अनुभव नहीं है। इस लेख में, आप सीखेंगे कि कैसे आसानी से सरल आश्चर्यजनक रिव एनिमेशन बनाएं और उन्हें अपने फ़्लटर ऐप में प्रबंधित करें। विषयसूची रिवाइव का परिचय🧙♂️ Rive🧗 में बुनियादी अवधारणाएँ एक सरल इंटरैक्टिव लॉगिन एनीमेशन🚀 अपने आर्टबोर्ड पर तत्व सेट करें📃 एनिमेशन समय!🕶️ अपनी स्टेट मशीन सेट करें🏍️ अपने फ़्लटर ऐप में एनिमेशन लागू करें👨🚒 निष्कर्ष🏋️♀️ सन्दर्भ🧶 रिवाइव का परिचय🧙♂️ रिव एक और उपयोगकर्ता के अनुकूल एनीमेशन टूल और रनटाइम इंजन है जो डेवलपर्स और डिजाइनरों को मोबाइल ऐप, वेब एप्लिकेशन और गेम सहित विभिन्न प्लेटफार्मों के लिए आश्चर्यजनक और इंटरैक्टिव एनिमेशन बनाने में सक्षम बनाता है। शक्तिशाली Rive🧗 में बुनियादी अवधारणाएँ यहां प्रमुख अवधारणाएं हैं: आर्टबोर्ड एक कैनवास है जहां आप अपना एनीमेशन बनाते हैं। यह एनीमेशन तत्वों, जैसे समूह, बाधाएं, हड्डियां आदि को बनाने और व्यवस्थित करने का प्राथमिक स्थान है। आर्टबोर्ड: समयरेखा वह जगह है जहां एनिमेशन परिभाषित किए जाते हैं। यह आपको मुख्य-फ़्रेम सेट करने और यह निर्दिष्ट करने की अनुमति देता है कि समय के साथ वस्तुओं को कैसे बदलना चाहिए। कीफ़्रेम समय में विशिष्ट बिंदुओं का प्रतिनिधित्व करते हैं जहां किसी वस्तु के गुणों को स्पष्ट रूप से परिभाषित किया जाता है। एनीमेशन सिस्टम सहज बदलाव बनाने के लिए मुख्यफ्रेम के बीच इंटरपोलेट करता है। समयरेखा: रिव में एक स्टेट मशीन सुविधा है जो आपको अपने एनीमेशन के लिए विभिन्न राज्यों को निर्दिष्ट करने की अनुमति देती है। आप उपयोगकर्ता इनपुट या अन्य स्थितियों के आधार पर राज्य परिवर्तन को ट्रिगर कर सकते हैं, जिससे वर्तमान स्थिति के आधार पर विभिन्न व्यवहारों के साथ इंटरैक्टिव एनिमेशन का निर्माण संभव हो सकेगा। स्टेट मशीन: रिव आपको एनिमेशन को कोड के रूप में निर्यात करने की अनुमति देता है, जिससे उन्हें आपके अनुप्रयोगों में एकीकृत करना आसान हो जाता है। फ़्लटर डेवलपर्स के लिए, 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 समूह बाधा शक्ति मूल स्थिति लक्ष्य चश्मा 5% ctrl_front मूल के समान ctrl_front भौंक 10% ctrl_front मूल के समान ctrl_front कान 5% मूल निर्धारित करने की कोई आवश्यकता नहीं है Ctrl_वापस नाक 5% ctrl_front मूल के समान ctrl_front चेहरा 5% ctrl_front मूल के समान ctrl_front हमें होठों के लिए कोई सीमा निर्धारित करने की आवश्यकता नहीं है। अपनी सभी बाधाओं को जोड़ने के बाद यह इस तरह दिखता है 👇🏽 💃🏽 🥳 बधाई हो, हम जिस प्रकार के एनीमेशन को प्राप्त करना चाहते हैं उसके लिए हमने अपना तत्व सफलतापूर्वक तैयार कर लिया है। वाह!! एनिमेशन समय!🕶️ दाईं ओर टूलबार पर, एनीमेशन इंटरफ़ेस पर स्विच करने के लिए बटन पर क्लिक करें। हम छह एनीमेशन टाइमलाइन बनाएंगे और सब कुछ एक स्टेट मशीन के साथ जोड़ देंगे। टाइमलाइन में, हमने पहले हड्डियों और बाधाओं के साथ जो सेट किया है उसका उपयोग करके, हम उस एनीमेशन को बनाने के लिए कीफ़्रेम सेट कर सकते हैं जिसे हम प्राप्त करना चाहते हैं। एनिमेट पहला टाइमलाइन एनीमेशन निष्क्रिय एनीमेशन है। यह एनीमेशन की निष्क्रिय स्थिति होगी। हम इसका उपयोग तब करेंगे जब एनिमेटेड तत्व संलग्न नहीं होगा। सबसे पहले, हम एनीमेशन प्रक्रिया शुरू करने से पहले अपने तत्व के सभी हिस्सों को समूहित करते हैं और इसे चरित्र का नाम देते हैं। फिर हमने अवधि 4 मिनट निर्धारित की, हमारा कार्यक्षेत्र सेट करें, और टाइमलाइन प्रकार को लूप पर सेट करें। यह निष्क्रिय एनीमेशन के लिए आदर्श है. इस निष्क्रिय एनीमेशन के लिए, हम सांस लेने, बालों की हल्की सी हलचल और पलकें झपकाने का भ्रम पैदा करेंगे। गर्दन की हड्डी, बालों की हड्डियों और दाहिनी/बाईं आंख के तत्वों का उपयोग करके, हम आवश्यक कीफ़्रेम को अलग-अलग पोज़ में सेट करेंगे, जिसका अर्थ है कि हम समयरेखा पर बिंदुओं पर चयनित आइटम के विशिष्ट गुणों को सेट कर सकते हैं। एक कीफ़्रेम से दूसरे कीफ़्रेम में परिवर्तन शैली को ध्यान में रखते हुए, हम उस प्रकार के इंटरपोलेशन का चयन करेंगे जिसकी हमें आवश्यकता है। आप इसे नीचे टाइमलाइन अनुभाग के दाईं ओर पा सकते हैं। इंटरपोलेशन या तो होल्ड, रैखिक या वक्र है, यह इस पर निर्भर करता है कि आप एक कीफ़्रेम से दूसरे कीफ़्रेम तक कैसे जाना चाहते हैं। यह इस तरह दिखेगा 👇🏽 ऊपर दिए गए GIF से, आप देख सकते हैं कि टाइमलाइन पर अलग-अलग कीफ़्रेम पर, हमने चयनित आइटम के लिए अलग-अलग पोज़ सेट किए हैं। एक कीफ़्रेम से दूसरे कीफ़्रेम में यह संक्रमण एनीमेशन बनाता है। इसी प्रक्रिया का उपयोग करके, हम अन्य पाँच समय-सीमाएँ बनाएंगे। इस एनिमेशन को देखने और विभिन्न समय-सीमाओं को विस्तार से देखने के लिए आप क्लिक कर सकते हैं। ऐसा दिखता है 👇🏽 यहां अपनी स्टेट मशीन सेट करें🏍️ हम इस एनीमेशन प्रक्रिया के अंतिम भाग पर आ गए हैं। स्टेट मशीन एनीमेशन को जोड़ने का एक दृश्य तरीका है। स्टेट मशीन का उपयोग करके, हम यह नियंत्रित कर सकते हैं कि हमारे द्वारा सेट किए गए इनपुट के आधार पर कौन सा एनीमेशन चलेगा। हम दो या दो से अधिक टाइमलाइन एनिमेशन को मिश्रित या मिश्रित कर सकते हैं ताकि वे एक साथ चल सकें। हमें स्टेट मशीन में सही प्रकार के इनपुट का चयन करना होगा क्योंकि यही वह है जिसका उपयोग हम ऐप में एनीमेशन को नियंत्रित करने के लिए करेंगे। स्टेट मशीन में, हमारे पास तीन प्रकार के इनपुट होते हैं: संख्या: संख्या इनपुट एक संख्यात्मक मान है जिसका उपयोग मात्रात्मक डेटा को दर्शाने और नियंत्रित करने के लिए राज्य मशीन में किया जाता है। आप संख्या इनपुट संख्यात्मक मान के आधार पर राज्य मशीन को किसी विशेष राज्य में संक्रमण के लिए सेट कर सकते हैं। बूलियन: बूलियन इनपुट एक बाइनरी मान है जो सही या गलत हो सकता है। अब राज्य मशीन इनपुट मान, सही या गलत, के आधार पर एक विशेष स्थिति में परिवर्तित हो जाती है। ट्रिगर: ट्रिगर इनपुट एक इनपुट है जिसका उपयोग किसी घटना को संकेत देने के लिए किया जाता है। बूलियन इनपुट के विपरीत, जो स्पष्ट रूप से बदले जाने तक अपनी स्थिति बनाए रखते हैं, ट्रिगर ट्रिगर होने के बाद अपनी डिफ़ॉल्ट स्थिति पर रीसेट हो जाते हैं। एनिमेशन पैनल पर, प्लस बटन पर क्लिक करें और एक स्टेट मशीन बनाएं। हम इसे नाम देंगे। यह नाम महत्वपूर्ण है क्योंकि हमें बाद में कोड में अपनी राज्य मशीन की पहचान करने के लिए इसी नाम की आवश्यकता होगी। लॉगिन स्टेट मशीन अपनी राज्य मशीन स्थापित करने के लिए नीचे दिए गए चरणों का पालन करें: हमारी स्टेट मशीन में दो परतें बनाएं और एक का नाम बदलकर करें। एकाधिक परतें हमें कई राज्यों को एक साथ खेलने में मदद करती हैं। अपनी स्टेट मशीन में एक और परत प्राप्त करने के लिए, स्टेटमशीन ग्राफ़ के शीर्ष पर प्लस आइकन पर क्लिक करें। टाइप इनपुट अनुभाग पर, आपको इसे राज्य मशीन के ठीक बगल में लेबल किया हुआ देखना चाहिए। प्लस आइकन पर क्लिक करें, एक नंबर इनपुट चुनें और इसे नाम दें। हम इस इनपुट का उपयोग और टाइमलाइन एनिमेशन को ब्लेंड (मिश्रण) करते समय करेंगे ताकि जैसे-जैसे संख्या बढ़े, ऐसा लगे कि चरित्र बाएं से दाएं दिख रहा है। लुक लुक_लेफ्ट लुक_राइट एक और इनपुट बनाएं, इस बार एक बूलियन, और इसे नाम दें। यह नियंत्रित करता है कि हम एनीमेशन कब देखना चाहते हैं। दो ट्रिगर इनपुट बनाएं, एक का नाम बदलें और दूसरे का । सफलता और असफलता की स्थिति को ट्रिगर करने के लिए आपको इसकी आवश्यकता होगी। चेक असफल सफलता अब लेयर ग्राफ़ पर एनीमेशन और एनीमेशन को खींचें और छोड़ें। इस ग्राफ़ पर, आपको कुछ डिफ़ॉल्ट स्थितियाँ दिखाई देंगी: टाइप लुक_आइडल लुक_लेफ्ट प्रवेश - यह इस राज्य से जुड़े किसी भी एनीमेशन राज्य का प्रवेश बिंदु है। निकास - यह इस राज्य से जुड़े किसी भी एनीमेशन राज्य का निकास बिंदु है एनीस्टेट - इससे जुड़ा कोई भी एनीमेशन स्टेट तब तक चलता रहता है जब तक वह ट्रांज़िशन की शर्तों को पूरा करता है। संक्रमण दो या दो से अधिक राज्यों को जोड़ने वाली रेखा और तीर है। तीर की दिशा को देखते हुए, आप देख सकते हैं कि राज्य अब कैसे जुड़े हुए हैं। जब आप इस पर क्लिक करते हैं, तो आप ट्रांज़िशन के गुण देख सकते हैं। गुणों में, आप एक आपके द्वारा पहले बनाए गए किसी भी इनपुट का उपयोग करके, आप उस परिभाषित कर सकते हैं जो आप चाहते हैं कि संक्रमण में अगली स्थिति से पहले पूरी होनी चाहिए। शर्त बना सकते हैं. शर्त को परत में, रैखिक रूप से ट्रांज़िशन का उपयोग करके , , और स्थितियों को कनेक्ट करें। स्थिति के लिए, हम चाहेंगे कि यह और एनीमेशन का मिश्रण हो। ऐसा करने के लिए, ग्राफ़ पर स्थिति का चयन करें, और पैनल के बाईं ओर, ब्लेंड 1डी चुनें। इनपुट विकल्प के लिए, इनपुट का चयन करें। यह इनपुट हमारे मिश्रण को नियंत्रित करेगा. फिर टाइमलाइन अनुभाग में, और टाइमलाइन का चयन करें, और उन्हें 0 और 100 पर सेट करें। जब आप इनपुट आंकड़ा बढ़ाते हैं, तो यह दो एनिमेशन को मिश्रित करता है। प्रकार Entry look_Idle look_left लुक_लेफ्ट लुक_लेफ्ट लुक_राइट लुक_लेफ्ट लुक लुक_लेफ्ट लुक_राइट लुक संक्रमण रेखा और तीर का उपयोग करके मिश्रण स्थिति को से कनेक्ट करें। अब तीर पर क्लिक करें और चेक इनपुट गलत होने पर स्थिति सेट करें। यह हमें एनीमेशन को नियंत्रित करने में मदद करेगा और स्टेटमशीन को बताएगा कि चेक बूलियन गलत होने पर स्थिति दिखाएं। से वापस मिश्रण स्थिति की ओर इशारा करने वाले संक्रमण तीर के लिए भी ऐसा ही करें, लेकिन अब बूलियन सत्य पर सेट है। लुक_आइडल लुक_आइडल लुक_आइडल जांचें कि अब जब आप इनपुट के लिए चेक बॉक्स पर क्लिक करते हैं, तो आप इसे सही या गलत पर सेट कर सकते हैं। जब आप स्टेट मशीन चलाते हैं, तो यह स्थिति दिखाता रहेगा जब तक कि आप बूलियन को सत्य में नहीं बदल देते, तब यह एनीमेशन शुरू कर देगा। और मिश्रित करने के लिए, आप लुक इनपुट संख्या मान बढ़ाते हैं। चेक लुक_आइडल चेक लुक_लेफ्ट लुक_लेफ्ट लुक_राइट को अब लेयर 1 में, यह वह जगह है जहां आप और ट्रिगर जोड़ेंगे। स्थिति से, आप स्थिति को जोड़ेंगे। अवस्था से, और दोनों अवस्थाओं को जोड़ें। से स्थिति में संक्रमण में, एक इस में, ट्रिगर इनपुट जोड़ें। यह कह रहा है कि राज्य मशीन को एनीमेशन तभी चलाना चाहिए जब इनपुट ट्रिगर हो। सफलता असफल प्रवेश निष्क्रिय निष्क्रिय सफलता असफल निष्क्रिय सफल शर्त जोड़ें। स्थिति सफलता सफलता सफलता स्थिति संक्रमण के लिए भी ऐसा ही करें लेकिन इसके बजाय में ट्रिगर जोड़ें। अब से, यहां चुनें और इसे 100% पर सेट करें। इसका मतलब है कि निष्क्रिय एनीमेशन केवल तभी चलेगा जब एनीमेशन चलना समाप्त हो जाएगा। बैक टू ट्रांज़िशन के लिए भी ऐसा ही करें। विफल स्थिति विफल सफलता निष्क्रिय पर वापस एक संक्रमण रेखा बनाएं। एग्जिट टाइम सफल असफल आइडल अब स्टेट मशीन में पूरा एनिमेशन इस तरह दिखेगा 👇🏽 संपूर्ण एनिमेशन और स्टेट मशीन देखें। यहां बधाई हो 🥳, हमने अपने तत्व को सफलतापूर्वक एनिमेटेड कर दिया है और इसे एक स्टेट मशीन के साथ स्थापित कर दिया है! हालाँकि, रिव फ़ाइल को निर्यात करने से पहले, हम पृष्ठभूमि और चरित्र की शर्ट के रंग बदल देंगे। यह इस तरह दिखेगा👇🏽 पृष्ठभूमि का रंग (#B581EB) है और पात्र की शर्ट का रंग (#BD08D7) है सब कुछ विस्तार से देखने के लिए एनीमेशन का यहां दिया गया है लिंक अपने फ़्लटर ऐप में एनिमेशन लागू करें👨🚒 हम इस एनिमेशन का उपयोग अपने लॉगिन पेज पर करेंगे। फ़्लटर ऐप प्रोजेक्ट बनाएं और Rive निर्भरता को में जोड़ें pubspec.yaml dependencies: rive: ^0.11.12 साथ ही, निर्यात की गई Rive फ़ाइल को अपनी प्रोजेक्ट संपत्तियों में जोड़ें। अब हम अपने डिज़ाइन के आधार पर यूआई बनाने के लिए आगे बढ़ सकते हैं। हमारा लक्ष्य है कि एनीमेशन निम्नलिखित कार्य करे: ईमेल/पासवर्ड सही होने पर सफलता एनीमेशन के साथ प्रतिक्रिया करें ईमेल/पासवर्ड गलत होने पर असफल एनीमेशन के साथ प्रतिक्रिया करें टेक्स्ट फ़ील्ड में कर्सर की दिशा के साथ प्रतिक्रिया दें हम विजेट बिल्ड फ़ंक्शन से पहले कुछ चीजों को परिभाषित करेंगे। ///Login details String emailCred = "nikki@gmail.com"; 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 चैनल सन्दर्भ🧶 एनिमेटेड लॉगिन चरित्र भी प्रकाशित किया गया है. यहाँ
