dotLottie बनाम Lottie JSON: .lottie क्या जोड़ता है

.lottie फ़ाइल क्या है?

.lottie फ़ाइल एक container है, जिसे खुली dotLottie specification परिभाषित करती है और LottieFiles इसे MIT license के तहत maintain करता है। Spec का वर्ज़न 2.0 इसे Deflate से compressed ZIP archive के रूप में परिभाषित करता है, जिसका extension .lottie और MIME type application/zip+dotlottie है।

Archive के अंदर:

• manifest.json बताता है कि फ़ाइल में क्या-क्या है।
• a/ में एनिमेशन होते हैं, हर एक सामान्य Lottie JSON document होता है।
• i/ में उन एनिमेशन में इस्तेमाल होने वाली इमेज होती हैं।
• s/ में स्टेट मशीन होती हैं।
• t/ में themes होती हैं।

यानी .lottie, Lottie JSON की जगह नहीं लेता, बल्कि उसे पैक करता है। अंदर का हर एनिमेशन वही JSON है जो After Effects और Bodymovin बनाते हैं। इसी वजह से टूल्स दोनों के बीच आसानी से convert कर लेते हैं और आपके मौजूदा एनिमेशन काम करते रहते हैं।

क्या .lottie सच में JSON से छोटा है?

आमतौर पर हाँ, लेकिन जब आप देखते हैं कि फ़ाइलें असल में कैसे पहुँचती हैं, तो फ़र्क मार्केटिंग से कम निकलता है। LottieFiles का pricing पेज कहता है कि optimized JSON और dotLottie फ़ॉर्मेट फ़ाइल साइज़ 80% तक कम कर सकते हैं, और उसका dotLottie पेज 10 गुना तक छोटी फ़ाइलों का दावा करता है। दोनों vendor के दावे हैं, जिनका तरीका प्रकाशित नहीं है।

इसके पीछे सामान्य compression है। Lottie JSON लंबा-चौड़ा text है जिसमें keys और numbers बार-बार आते हैं, इसलिए यह अच्छी तरह compress होता है। dotLottie फ़ाइल के अंदर Deflate लगाता है। लेकिन ज़्यादातर web servers और CDN पहले से ही transit में JSON को gzip या brotli से compress करते हैं। अगर आपका भी ऐसा करता है, तो JSON फ़ाइल और .lottie फ़ाइल लगभग एक जैसे साइज़ में पहुँच सकती हैं, क्योंकि दोनों network पर compressed होती हैं।

जहाँ dotLottie ज़्यादा भरोसे से बचत करता है:

• Images. JSON अक्सर इमेज को base64 text के रूप में inline करता है, जिससे उनका साइज़ लगभग एक तिहाई बढ़ जाता है। dotLottie उन्हें binary फ़ाइलों के रूप में रखता है।
• कई एनिमेशन। एक archive कई requests की जगह ले लेता है, और साझा इमेज एक ही बार store होती हैं।
• Storage और ऐप bundles। मोबाइल ऐप के अंदर भेजी गई फ़ाइलें CDN से compress नहीं होतीं, इसलिए फ़ाइल के अंदर का compression पूरा काम आता है।

सिर्फ़ साइज़ के आधार पर फ़ैसला लेने से पहले, दोनों फ़ॉर्मेट को उसी रूप में मापें जिसमें आपके users उन्हें असल में पाते हैं।

क्या एक .lottie में कई एनिमेशन हो सकते हैं?

हाँ। a/ फ़ोल्डर में कई एनिमेशन हो सकते हैं, जो manifest में लिस्ट होते हैं, और dotLottie player id के ज़रिए उनके बीच स्विच कर सकता है। यह उन सेट के लिए काम का है जो साथ में इस्तेमाल होते हैं: किसी इलस्ट्रेशन के idle, loading और success वर्ज़न, या किसी आइकन के light और dark वेरिएंट।

Bundle करने के व्यावहारिक फ़ायदे हैं। आपका ऐप या पेज कई फ़ाइलों की जगह एक फ़ाइल लोड करता है, एनिमेशन के बीच साझा इमेज i/ में एक बार store होती हैं, और s/ में मौजूद स्टेट मशीन user input के जवाब में bundle किए गए एनिमेशन के बीच जा सकती है।

इसके कुछ नुकसान भी हैं। Users को archive का हर एनिमेशन डाउनलोड करना पड़ता है, भले ही वे सिर्फ़ एक देखें। बड़े सेट के लिए कुछ फ़ाइलों में बाँटने से पहली स्क्रीन तेज़ लोड हो सकती है। और bundle का हर एनिमेशन अब भी एक स्वतंत्र Lottie timeline है। उनके बीच स्विच करना स्टेट मशीन में तय किया गया cut या tweened transition होता है, एक साथ चल रहे दो एनिमेशन का blend नहीं।

यही आखिरी बात dotLottie और Rive के तरीके में फ़र्क दिखाती है। .riv फ़ाइल में भी कई एनिमेशन होते हैं, लेकिन वे एक ही आर्टबोर्ड, एक रिग और shapes का एक ही सेट साझा करते हैं, और स्टेट मशीन उनके बीच blend कर सकती है। कई स्टेट वाले कैरेक्टर के लिए दोनों की तुलना करें। Lottie बनाम Rive स्टेट मशीन देखें।

dotLottie themes क्या हैं?

Themes t/ फ़ोल्डर में रखी फ़ाइलें हैं जो एनिमेशन को बदले बिना उसकी properties, जैसे रंग, override करती हैं। एक ही इलस्ट्रेशन के साथ light theme, dark theme और brand-color theme भेजी जा सकती है, और player रनटाइम पर उनमें से एक लागू करता है।

Themes के बिना, plain JSON के साथ आम तरीका यह है कि हर color scheme के लिए अलग फ़ाइल एक्सपोर्ट करें, या code से JSON में color values बदलें, जो आसानी से टूट सकता है। Themes की वजह से color variants किसी जुगाड़ के बजाय format का एक supported feature बन जाते हैं।

Themes इंटरैक्टिविटी से भी जुड़ी हैं। dotLottie state machine specification में SetTheme action शामिल है, इसलिए एक स्टेट मशीन किसी इनपुट या event के जवाब में theme बदल सकती है, जैसे किसी आइकन के active होने पर उसके रंग बदलना।

स्टेट मशीन की तरह, themes भी सिर्फ़ उन players में काम करती हैं जो dotLottie format को implement करते हैं। Classic lottie-web player सिर्फ़ plain Lottie JSON पढ़ता है और .lottie archive खोल ही नहीं सकता, इसलिए अगर आप themes पर निर्भर हैं, तो हर उस प्लेटफ़ॉर्म पर अपना player जाँचें जहाँ आप ship करते हैं।

dotLottie स्टेट मशीन कैसे काम करती हैं?

dotLottie स्टेट मशीन एक JSON definition है जो s/ फ़ोल्डर में रखी जाती है। LottieFiles ने 23 सितंबर 2025 को Lottie Creator में इनके लिए एक visual editor जोड़ा, ताकि डिज़ाइनर JSON लिखे बिना इन्हें बना सकें।

Specification में ये चीज़ें बताई गई हैं:

• स्टेट: playback स्टेट जो कोई segment या एनिमेशन चलाती हैं, साथ ही एक global स्टेट जिसके transitions सबसे पहले जाँचे जाते हैं, चाहे मौजूदा स्टेट कोई भी हो।
• इनपुट: numeric, string, boolean और event।
• Transitions: instant या cubic-bezier easing के साथ tweened, जिन पर इनपुट values के guards लागू होते हैं।
• Interactions: pointer enter, exit, down, up और move; click; animation complete और loop complete।
• Actions: इनपुट को set, toggle, increment या decrement करना, events फ़ायर करना, frame या progress set करना, theme set करना, URL खोलना, या आपके code को custom event भेजना।

Hover और press स्टेट, toggles, multi-step इलस्ट्रेशन और सरल कैरेक्टर के लिए इतना काफ़ी है। यह सिर्फ़ dotLottie players में चलता है; JSON-only players एनिमेशन तो चलाते हैं, लेकिन कोई logic नहीं।

Diagram में loop-plus-trigger pattern दिखाया गया है जिसे कई इंटरैक्टिव कैरेक्टर इस्तेमाल करते हैं। dotLottie इसे इनपुट और guards से बना सकता है; Rive इसे अपनी स्टेट मशीन और data binding से बनाता है। आमने-सामने की तुलना वाली टेबल के लिए Lottie vs Rive स्टेट मशीन देखें।

कौन से players .lottie सपोर्ट करते हैं?

सपोर्ट तेज़ी से फैला है, लेकिन हर प्लेटफ़ॉर्म अलग से जाँचें:

• Web: LottieFiles का @lottiefiles/dotlottie-web .json और .lottie दोनों चलाता है और इसके React, Vue, Svelte, Solid और Web Components के लिए wrappers हैं। यह WASM में compile किए गए ThorVG से render करता है। Classic lottie-web सिर्फ़ JSON चलाता है और इसका आखिरी release मई 2025 में हुआ था।
• React Native: lottie-react-native Metro config में बदलाव करके .lottie सपोर्ट करता है और web पर @lottiefiles/dotlottie-react इस्तेमाल करता है। इसके मौजूदा README के अनुसार React Native 0.84 या नया और New Architecture ज़रूरी है।
• Flutter: लोकप्रिय lottie package एक unofficial pure Dart port है जो custom decoder के साथ .lottie पढ़ सकता है; LottieFiles अलग से dotlottie_flutter plugin maintain करता है जिसमें स्टेट मशीन और themes हैं।

Web पर trade-off रनटाइम के वज़न का है। अक्टूबर 2026 में npm packages की हमारी माप के अनुसार, dotlottie-web का WASM engine लगभग 433 KB brotli और लगभग 23 KB JavaScript है, जबकि lottie-web का full build लगभग 76 KB gzipped है। LottieFiles का कहना है कि उसका ThorVG renderer उसके पिछले इंजन से तेज़ है और कम memory लेता है; यह vendor की अपने ही पुराने इंजन से तुलना है, lottie-web से नहीं। एक सरल JSON एनिमेशन के लिए lottie-web हल्का है; themes, स्टेट मशीन या कई एनिमेशन के लिए dotLottie का बड़ा player फ़ायदेमंद है।

LottieFiles के अनुसार dotLottie के npm downloads जून 2024 में लगभग 65,000 प्रति माह से बढ़कर नवंबर 2025 में 47 लाख (4.7 million) हो गए। यह vendor का बताया आँकड़ा है, फिर भी इससे ecosystem की दिशा पता चलती है।

dotLottie इस्तेमाल करें या Lottie JSON?

Lottie JSON चुनें अगर आप web पर एक या दो सरल एनिमेशन ship करते हैं, सबसे छोटा player (lottie-web) चाहते हैं, या ऐसा प्लेटफ़ॉर्म या plugin इस्तेमाल करते हैं जो सिर्फ़ JSON लेता है।

dotLottie चुनें अगर आपको themes, स्टेट मशीन, एक फ़ाइल में कई एनिमेशन या embedded images चाहिए, या आप mobile app के अंदर फ़ाइलें ship करते हैं जहाँ in-file compression का पूरा फ़ायदा मिलता है।

Rive या वीडियो पर विचार करें अगर आप कई blended स्टेट वाला कैरेक्टर बना रहे हैं (Rive) या आर्ट vector नहीं बल्कि rendered है (वीडियो)। परफ़ॉर्मेंस की जानकारी के लिए Rive vs Lottie परफ़ॉर्मेंस देखें।

दोनों Lottie formats के बीच किसी भी दिशा में switch करना कम जोखिम वाला है, क्योंकि .lottie के अंदर के एनिमेशन सामान्य Lottie JSON ही हैं। आप पहले player बदल सकते हैं, फिर फ़ाइलें धीरे-धीरे migrate कर सकते हैं।

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

क्या मैं .json Lottie फ़ाइल का नाम बदलकर .lottie कर सकता हूँ?

नहीं। .lottie फ़ाइल एक ZIP archive है जिसमें manifest.json और a/ फ़ोल्डर होता है, यह नाम बदला हुआ JSON नहीं है। JSON को .lottie में package करने के लिए LottieFiles के tools या dotLottie libraries इस्तेमाल करें। उल्टी दिशा में यह काम करता है: .lottie को unzip करें, तो अंदर के एनिमेशन सामान्य Lottie JSON फ़ाइलें होते हैं।

क्या lottie-web .lottie फ़ाइलें चलाता है?

नहीं। lottie-web सिर्फ़ Lottie JSON चलाता है। Web पर .lottie फ़ाइलें उनके themes और स्टेट मशीन के साथ चलाने के लिए @lottiefiles/dotlottie-web या इसका कोई framework wrapper इस्तेमाल करें। यह plain JSON भी चलाता है, इसलिए आप पहले player बदल सकते हैं और फ़ाइलें धीरे-धीरे migrate कर सकते हैं।

क्या dotLottie open source है?

हाँ। dotLottie format एक open specification है जो dotlottie.io पर प्रकाशित है और LottieFiles इसे MIT license के तहत maintain करता है। LottieFiles dotlottie-web जैसे open-source players भी प्रकाशित करता है। Lottie Creator, यानी वह editor जिसमें स्टेट मशीन visually बनती हैं, LottieFiles के paid plans का हिस्सा है।

क्या Lottie स्टेट मशीन के लिए dotLottie ज़रूरी है?

हाँ। Lottie स्टेट मशीन dotLottie specification से define होती हैं और .lottie फ़ाइल के s/ फ़ोल्डर में रखी जाती हैं। ये सिर्फ़ dotLottie players में चलती हैं। lottie-web, lottie-ios या lottie-android में चलाए गए plain JSON एनिमेशन में इस तरह की स्टेट मशीन का सपोर्ट नहीं है।

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

• .lottie फ़ाइल क्या है?
• क्या dotLottie, Lottie JSON से छोटा है?

स्रोत

• dotLottie 2.0 specification, dotLottie
• dotLottie format, dotLottie
• dotLottie state machines: Specification, LottieFiles
• State machines are finally in Lottie Creator, LottieFiles
• LottieFiles pricing, LottieFiles
• dotLottie, LottieFiles
• dotlottie-web, LottieFiles (GitHub)
• lottie-react-native, GitHub