After Effects के बिना मैस्कॉट को एनिमेट कैसे करें

मैस्कॉट के लिए After Effects क्यों छोड़ें?

After Effects वीडियो के लिए बेहतरीन है, लेकिन ऐप मैस्कॉट की ज़रूरतें अलग हैं: प्रोडक्ट में कुछ होने पर उसे स्टेट के बीच बदलना होता है, छोटा रहना होता है, और हर साइज़ पर शार्प दिखना होता है। After Effects के साथ आपको हर स्टेट अलग से एक्सपोर्ट करनी होगी (वीडियो के रूप में या Bodymovin प्लगइन के ज़रिए Lottie के रूप में) और बदलने का लॉजिक खुद लिखना होगा। यह अपने अलग प्लान वाला सब्सक्रिप्शन प्रोडक्ट भी है; मौजूदा कीमतों के लिए Adobe का प्लान पेज देखें।

नीचे दिए गए विकल्प (अल्टरनेटिव) या तो यह बदलने का लॉजिक साथ देते हैं या हाथ से एनिमेशन का काम पूरी तरह हटा देते हैं।

विकल्प क्या हैं?

दोनों मुख्य फ़ाइल फ़ॉर्मेट को गहराई से समझने के लिए Rive vs Lottie देखें।

Rive में मैस्कॉट को एनिमेट कैसे करें?

आर्टवर्क इम्पोर्ट करें (SVG एडिट किए जा सकने वाले वेक्टर बन जाते हैं; PNG, JPEG और WebP बिटमैप ही रहते हैं जिन्हें आप मेश से मोड़ सकते हैं), बोन्स का स्केलेटन बनाएँ, हिस्सों को उससे जोड़ें और हर स्टेट के लिए एक टाइमलाइन पर कीफ़्रेम बनाएँ। फिर टाइमलाइन को एक स्टेट मशीन में जोड़ें, ताकि आपका ऐप कह सके "खुश हो जाएँ" या "success एक बार चलाएँ"। PNG से Rive गाइड हर स्टेप समझाती है।

Lottie Creator या CSS कब काफ़ी है?

Lottie Creator उन मैस्कॉट के लिए ठीक है जो ज़्यादातर लूप में चलते हैं: लैंडिंग पेज पर हाथ हिलाता कैरेक्टर, एनिमेटेड आइकन, जश्न वाला बर्स्ट। यह ब्राउज़र में चलता है, पेस्ट या ड्रॉप किया गया SVG लेता है और Lottie एक्सपोर्ट करता है। अब इसमें स्टेट मशीन भी हैं, हालाँकि ऐप सपोर्ट Rive की तुलना में सीमित है।

जब "एनिमेशन" का मतलब किसी स्थिर इलस्ट्रेशन का हल्का ऊपर-नीचे होना या पलक झपकना हो, तब CSS या SVG एनिमेशन काफ़ी है। इसके लिए किसी library की ज़रूरत नहीं होती। असली एक्टिंग (हाथ हिलाना, एक्सप्रेशन बदलना) CSS में हाथ से बनाना जल्दी ही अव्यावहारिक हो जाता है।

आप जो भी चुनें, prefers-reduced-motion का ध्यान रखें और कम मोशन चाहने वाले यूज़र्स के लिए मैस्कॉट का एक स्थिर पोज़ दें।

क्या मैं एनिमेट करने का काम पूरी तरह छोड़ सकता हूँ?

हाँ, अगर आपके पास कैरेक्टर पहले से है। Charmotion आपके मैस्कॉट की एक इमेज लेकर 17 एनिमेशन (idle, happy, wave, thinking, loading, success, error और दूसरे) बनाता है, तैयार स्टेट मशीन वाली Rive फ़ाइल और पेस्ट करने लायक React और SwiftUI कोड के रूप में, हर पेड प्लान पर, आमतौर पर कुछ ही मिनटों में, साथ में MP4, ट्रांसपेरेंट WebM और MOV और GIF ज़रूरत पर एक्सपोर्ट होते हैं। After Effects या Rive आना ज़रूरी नहीं, और आप पहले अपने मैस्कॉट को असली लेआउट में प्रीव्यू कर सकते हैं, फ़्री।

यह फ़्लैट, सामने की ओर देखने वाले मैस्कॉट के लिए सही है। अगर आपके कैरेक्टर को खास एक्टिंग चाहिए (कोई कहानी वाला सीन या स्क्रिप्ट पर lip-sync), तो एनिमेटर हायर करें।

अक्सर पूछे जाने वाले सवाल

क्या Rive, After Effects से आसान है?

इंटरैक्टिव ऐप कैरेक्टर के लिए आमतौर पर हाँ: स्टेट और ट्रांज़िशन इसमें पहले से हैं और एक ही फ़ाइल वेब और मोबाइल पर चलती है। लीनियर वीडियो और कंपोज़िटिंग के लिए After Effects अब भी बेहतर टूल है।

क्या मैं After Effects के बिना Lottie एनिमेशन बना सकता हूँ?

हाँ। LottieFiles का Lottie Creator ब्राउज़र में चलता है और बताता है कि After Effects की ज़रूरत नहीं है। यह SVG इम्पोर्ट करता है और Lottie एनिमेशन एक्सपोर्ट करता है।

मैस्कॉट को एनिमेट करने का सबसे सस्ता तरीका क्या है?

अगर आपके पास समय है, तो Rive या Lottie Creator के फ़्री टियर और आपकी अपनी मेहनत। अगर आर्टवर्क है पर समय नहीं, तो Charmotion जैसा जनरेटर, फ़्री प्रीव्यू और पूरे सेट के साथ, Rive फ़ाइल समेत, $20/माह से।

इस गाइड से झटपट जवाब

• मैं अपने मौजूदा मैस्कॉट को अपने ऐप के लिए कैसे एनिमेट कर सकता हूँ?
• After Effects के बिना मैस्कॉट को एनिमेट कैसे करें?

स्रोत

• After Effects plans and pricing, Adobe
• Lottie Creator, LottieFiles
• State machines are finally in Lottie Creator, LottieFiles
• LottieFiles or Rive?, LottieFiles
• Importing assets, Rive
• Bones, Rive
• State Machine, Rive
• prefers-reduced-motion, MDN Web Docs