स्प्लैश स्क्रीन एनिमेशन के लिए Lottie बनाम Rive बनाम वीडियो

लॉन्च पर कौन से फ़ॉर्मेट कहाँ चल सकते हैं?

iOS लॉन्च स्क्रीन कोई भी एनिमेटेड फ़ॉर्मेट स्वीकार नहीं करती: launch storyboard में सिर्फ़ standard UIKit classes इस्तेमाल हो सकती हैं, बिना custom classes या code connections के (Apple Developer Documentation)। Android पर सिस्टम स्प्लैश सिर्फ़ AVD को एनिमेट करता है (Android Developers)। बाकी सभी फ़ॉर्मेट आपकी पहली स्क्रीन में चलते हैं।

स्प्लैश इंट्रो के लिए Lottie कब सही है?

जब किसी डिज़ाइनर ने इंट्रो पहले ही After Effects में बना लिया हो और वह शुरू से अंत तक सीधा चलता हो। Lottie वेक्टर है, सरल shapes के लिए हल्का है, और हर रनटाइम बताता है कि यह कब खत्म हुआ: iOS पर LottieView में animationDidFinish modifier है (lottie-ios), और Android का LottieAnimationView animator listeners स्वीकार करता है (lottie-android)। इससे handoff की timing बहुत आसान हो जाती है।

सीमाएँ लॉन्च के बाद सामने आती हैं। अगर उसी कैरेक्टर को बाद में idle रहना हो, loading दिखाना हो या खुशी मनानी हो, तो Lottie में अलग-अलग फ़ाइलें या segments चाहिए, जिनमें से आपका code चुनता है, और उनके बीच के transitions झटके से कटते हैं। जटिल 3D या raster आर्टवर्क के लिए भी यह ठीक नहीं है।

स्प्लैश स्क्रीन से आगे की सामान्य फ़ॉर्मेट तुलना के लिए Rive vs Lottie देखें, और cross-platform बारीकियों के लिए React Native और Flutter में Lottie vs Rive।

Rive कब बेहतर विकल्प है?

जब लॉन्च इंट्रो किसी ऐसे कैरेक्टर की पहली झलक हो जो ऐप में आगे भी काम करता रहता है। एक .riv फ़ाइल में इंट्रो, idle लूप, loading और रिएक्शन सब रह सकते हैं, और स्टेट मशीन किसी भी फ़्रेम से इनके बीच स्विच करती है। इंट्रो idle पर खत्म होता है, और जैसे ही पहली request शुरू होती है, वही view loading मूड पर स्विच कर सकता है।

दो काम की बातें:

• अंत। स्टेट मशीन सिर्फ़ वही events बताती है जो उसके author ने जोड़े हों। फ़ाइल जाँच लें: अगर उसमें कोई end event नहीं है, तो callback का इंतज़ार करने की बजाय timer से इंट्रो की अवधि जितना इंतज़ार करें।
• सेटअप। Rive को आपके ऐप में अपना रनटाइम चाहिए; Expo में इसका मतलब है Expo Go की बजाय development build (Rive)।

स्प्लैश इंट्रो के लिए वीडियो कब इस्तेमाल करें?

जब आइकन में बहुत डिटेल हो: चमकदार 3D, mesh gradients, lettering, photographic texture। वीडियो हर pixel को हूबहू दिखाता है और decoding के अलावा कोई rendering काम नहीं लेता। आपके बैकग्राउंड के ऊपर ट्रांसपेरेंसी के लिए, Apple प्लेटफ़ॉर्म अल्फ़ा वाले HEVC को सपोर्ट करते हैं (WWDC19) और Chrome WebM में अल्फ़ा वाले VP9 को सपोर्ट करता है (Chrome for Developers)।

हर प्लेटफ़ॉर्म पर सबसे सरल और भरोसेमंद विकल्प एक opaque क्लिप है जिसका बैकग्राउंड ठीक आपके स्प्लैश के रंग जैसा हो: अल्फ़ा सपोर्ट की कोई चिंता नहीं, और जब तक hex values मेल खाती हैं, जोड़ दिखता ही नहीं। इसकी कमियाँ हैं फ़ाइल साइज़ और interaction का न होना: क्लिप चलती है, खत्म होती है और बस।

क्या AnimatedVectorDrawable इस्तेमाल करना चाहिए भी?

हाँ, लेकिन सिर्फ़ उसके एक ही काम के लिए: Android 12+ की सिस्टम स्प्लैश स्क्रीन। इसे छोटा रखें (Google 1,000 ms से ज़्यादा न रखने की सलाह देता है) और सरल रखें, क्योंकि यह वेक्टर पाथ और ग्रुप को एनिमेट करता है, डिटेल वाले आर्टवर्क को नहीं। Android 12 से नीचे यह compat library के साथ भी एक स्थिर आइकन के रूप में ही दिखता है (androidx रेफ़रेंस)।

Android पर सबसे असरदार लॉन्च दो फ़ॉर्मेट को मिलाकर बनता है: सिस्टम स्प्लैश में एक छोटा AVD पॉप-इन, और फिर पहली स्क्रीन पर उसी बैकग्राउंड के साथ Rive या वीडियो में पूरा इंट्रो। विस्तार से जानकारी Android स्प्लैश स्क्रीन एनिमेटेड आइकन गाइड में है।

Charmotion इनमें से कौन-से फ़ॉर्मेट एक्सपोर्ट करता है?

सीधी बात: Charmotion, Rive और वीडियो एक्सपोर्ट करता है, और Lottie JSON, dotLottie या AnimatedVectorDrawable XML एक्सपोर्ट नहीं करता। आपके आइकन या मैस्कॉट की एक इमेज से आपको LaunchStateMachine (2.6 सेकंड का इंट्रो, कोई एंड इवेंट नहीं), ऐप के अंदर की स्टेट के लिए CharacterViewModelMachine और CharacterStateMachine वाली एक .riv मिलती है, साथ में 1080×1080 पर MP4, एक 9:16 लॉन्च वीडियो, GIF, ट्रांसपेरेंट VP9 WebM और HEVC MOV, और वेब, React और SwiftUI कोड। यह सब पेड प्लान के साथ मिलता है।

अगर आपके स्टैक में Lottie ज़रूरी है, या Android सिस्टम स्प्लैश के लिए आपको AVD चाहिए, तो वे किसी दूसरे टूल या डिज़ाइनर से बनवाने होंगे। इस गाइड में दी गई हैंडऑफ़ की सलाह दोनों ही स्थितियों में काम आती है।

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

स्प्लैश एनिमेशन के लिए Rive हल्का है या Lottie?

यह फ़ॉर्मेट से ज़्यादा आर्टवर्क पर निर्भर करता है। सरल वेक्टर शेप दोनों में छोटी रहती हैं। Rive का फ़ायदा यह है कि एक ही फ़ाइल में आपके idle और loading स्टेट भी आ सकते हैं, इसलिए आपको कई Lottie फ़ाइलें ship नहीं करनी पड़तीं। सामान्य अनुपातों पर भरोसा करने के बजाय अपने असली एक्सपोर्ट का साइज़ मापें।

क्या Android पर ट्रांसपेरेंट वीडियो को स्प्लैश स्क्रीन की तरह इस्तेमाल कर सकते हैं?

सिस्टम स्प्लैश में नहीं, क्योंकि वह सिर्फ़ AnimatedVectorDrawable को एनिमेट करता है। अपनी पहली स्क्रीन पर आप वीडियो चला सकते हैं; उसी बैकग्राउंड कलर पर एक opaque क्लिप सबसे भरोसेमंद विकल्प है, क्योंकि अल्फ़ा सपोर्ट के बिना भी जोड़ दिखाई नहीं देता।

क्या Charmotion स्प्लैश स्क्रीन के लिए Lottie एक्सपोर्ट करता है?

नहीं। Charmotion Rive फ़ाइलें, MP4, एक 9:16 लॉन्च वीडियो, GIF, ट्रांसपेरेंट WebM और HEVC MOV, और कोड सैंपल एक्सपोर्ट करता है। यह Lottie या AnimatedVectorDrawable एक्सपोर्ट नहीं करता। इसका लॉन्च इंट्रो एक स्टैटिक लॉन्च स्क्रीन के बाद आपकी पहली स्क्रीन पर चलता है।

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

• क्या Charmotion Lottie या AnimatedVectorDrawable एक्सपोर्ट करता है?

स्रोत

• Specifying your app's launch screen, Apple Developer Documentation
• Splash screens, Android Developers
• SplashScreen (androidx.core:core-splashscreen), Android Developers
• lottie-ios, Airbnb on GitHub
• lottie-android, Airbnb on GitHub
• Adding Rive to Expo, Rive
• HEVC Video with Alpha (WWDC19), Apple Developer
• Alpha transparency in Chrome video, Chrome for Developers