कंटेंट पर जाएँ
charmotion
शुरू करें

Lottie बनाम Rive: स्टेट मशीन और Data Binding

Charmotion टीम द्वारा · अपडेट:

तुलना गाइड का कवर इलस्ट्रेशन: Lottie vs Rive स्टेट मशीन और Data Binding

अब Lottie और Rive दोनों में स्टेट मशीन हैं। Lottie की स्टेट मशीन dotLottie फ़ाइलों में रहती हैं, सितंबर 2025 से Lottie Creator में बनती हैं, और इनमें इनपुट, guards, pointer interactions और actions हैं। Rive की स्टेट मशीन .riv format में built-in हैं और इनमें blend states के साथ view models के ज़रिए data binding भी है, जिसे Rive अब अपने legacy इनपुट की जगह recommend करता है।

मुख्य बातें

  • dotLottie स्टेट मशीन इनपुट, pointer events, guards, tweened transitions और SetTheme व OpenUrl जैसे actions संभालती हैं।
  • Rive स्टेट मशीन में blend states, layers और typed view model properties के साथ two-way data binding भी है।
  • Rive इनपुट को legacy कहता है; ये अभी भी काम करते हैं, लेकिन नया Apple रनटाइम सिर्फ़ data binding सपोर्ट करता है।
  • दोनों सिर्फ़ अपने players में चलती हैं: Lottie के लिए dotLottie players, Rive के लिए Rive runtimes।

क्या अब Lottie में स्टेट मशीन हैं?

हाँ। "Lottie में कोई इंटरैक्टिविटी नहीं है" वाली बात इसके ज़्यादातर इतिहास में सही थी, लेकिन अब पुरानी हो चुकी है। 23 सितंबर 2025 को LottieFiles ने अपने web-based editor Lottie Creator में visual स्टेट मशीन जोड़ीं। स्टेट मशीन एक dotLottie (.lottie) फ़ाइल के अंदर, dotLottie specification में define किए गए s/ फ़ोल्डर में save होती है।

असली शर्त player की है। सिर्फ़ dotLottie players, जैसे @lottiefiles/dotlottie-web और इसके React, Vue व अन्य wrappers, ये स्टेट मशीन चलाते हैं। Classic lottie-web player और पुराने JSON-only setups एनिमेशन चलाते हैं और logic को नज़रअंदाज़ कर देते हैं। यानी "Lottie स्टेट मशीन सपोर्ट करता है" का असल मतलब है "dotLottie, dotLottie player के साथ, इन्हें सपोर्ट करता है"।

Rive के design के केंद्र में स्टेट मशीन कहीं ज़्यादा समय से हैं। हर .riv में एक या ज़्यादा स्टेट मशीन हो सकती हैं, और सभी official Rive runtimes इन्हें चलाते हैं। Rive में बदलाव यह है कि code इनसे कैसे बात करता है: यह इनपुट से data binding की ओर बढ़ रहा है।

LottieFiles अपनी स्टेट मशीन को "लगभग Rive जितनी सक्षम" बताता है। यह उसका अपना आकलन है। नीचे की टेबल से आप अपने यूज़ केस के लिए फ़र्क खुद परख सकते हैं।

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

क्षमताdotLottie स्टेट मशीनRive स्टेट मशीन + data binding
इनपुट / propertiesNumeric, string, boolean, eventLegacy इनपुट: number, boolean, trigger। View models: इसके अलावा strings, enums, colors, lists, nested models, images, artboards
Pointer interactionsEnter, exit, down, up, move, clickआर्टवर्क के shapes और regions पर listeners
TransitionsInstant या tweened (cubic-bezier)एनिमेशन के बीच mixing के साथ timed transitions
Conditionsइनपुट values पर guardsइनपुट या bound properties पर conditions
Built-in actionsइनपुट set/toggle/increment करना, events फ़ायर करना, frame या progress set करना, SetTheme, OpenUrl, custom eventsEvents code को भेजे जाते हैं; data binding values को दोनों तरफ़ update करती है
टू-वे डेटा बाइंडिंगSpec में नहींहाँ, व्यू मॉडल के ज़रिए
Blend स्टेटSpec में नहींहाँ, किसी वैल्यू के आधार पर एनिमेशन मिलाकर
लेयरएक ऐक्टिव स्टेट और एक ग्लोबल स्टेटएक साथ चलने वाली कई लेयर
ऑथरिंग टूलLottie CreatorRive editor

"Spec में नहीं" वाले सेल ध्यान से पढ़ें: इनका मतलब है कि प्रकाशित dotLottie स्पेसिफ़िकेशन में यह फ़ीचर नहीं बताया गया है, यह नहीं कि कोई रचनात्मक तरीका निकालना असंभव है। दोनों प्रोजेक्ट लगातार बदल रहे हैं, इसलिए किसी भी ज़रूरी चीज़ के लिए मौजूदा docs ज़रूर देखें।

व्यवहार में, dotLottie इंटरैक्टिव आइकन, बटन, टॉगल और कुछ स्टेट वाले इलस्ट्रेशन को अच्छी तरह संभाल लेता है। Rive की अतिरिक्त चीज़ें (blend, लेयर और typed डेटा) उन कैरेक्टर के लिए सबसे ज़्यादा मायने रखती हैं जिनका व्यवहार एक साथ कई बातों पर निर्भर करता है।

Rive का Data Binding इनपुट के मुकाबले क्या जोड़ता है?

Rive का मूल कंट्रोल मॉडल इनपुट था: स्टेट मशीन पर एक नाम वाला number, boolean या ट्रिगर। आपका कोड mood = 3 सेट करता था या success फ़ायर करता था, और स्टेट मशीन उस पर प्रतिक्रिया देती थी। Rive के documentation में अब इनपुट वाले पेजों पर deprecation नोटिस है और उन्हें legacy कहा गया है, साथ ही नए प्रोजेक्ट को इसकी जगह Data Binding इस्तेमाल करने को कहा गया है। इनपुट वाली मौजूदा फ़ाइलें काम करती रहेंगी।

Data Binding अलग-अलग इनपुट की जगह एक view model इस्तेमाल करता है: editor में परिभाषित typed properties का एक सेट, जो एनिमेशन के हिस्सों से bind होता है। इससे ये चीज़ें मिलती हैं:

  • ज़्यादा टाइप: सिर्फ़ numbers, booleans और ट्रिगर ही नहीं, बल्कि strings, enums, colors, lists, nested view models, images और artboards भी।
  • दोनों तरफ़ sync: वैल्यू आपके कोड, editor, स्टेट मशीन या scripting से बदल सकती हैं, और आपका कोड बदलावों को subscribe कर सकता है।
  • डायरेक्ट binding: स्टेट से होकर गए बिना, एक text property आर्टवर्क में किसी label को और एक color property किसी fill को चला सकती है।

कुछ प्लेटफ़ॉर्म पर इस माइग्रेशन की समय-सीमा है। नया Apple रनटाइम सिर्फ़ Data Binding सपोर्ट करता है; इनपुट के लिए legacy Apple API चाहिए। Rive का React Native रनटाइम v0.5 में (अक्टूबर 2026 तक की मौजूदा release line) input methods के लिए warnings दिखाता है और v0.6 में deprecated APIs हटा देगा। मदद के लिए Rive editor में एक क्लिक वाला "Convert Inputs to View Models" एक्शन है।

छह वन-शॉट रिएक्शन: success, error, yes, no, enter और exit
वन-शॉट रिएक्शन ट्रिगर से फ़ायर होते हैं और खत्म होने पर मौजूदा मूड पर लौट आते हैं।

क्या दोनों में से कोई एनिमेशन के बीच blend कर सकता है?

Rive कर सकता है, दो तरीकों से। स्टेट के बीच का transition जाने वाले और आने वाले एनिमेशन को तय समय में मिला सकता है, ताकि कैरेक्टर अचानक कट होने के बजाय idle से talking में धीरे से जाए। और एक blend स्टेट किसी वैल्यू के आधार पर कई एनिमेशन को लगातार मिलाती है, जैसे -1 से 1 तक के नंबर के अनुपात में घूमता सिर, या रफ़्तार बढ़ने पर run में बदलती walk। स्टेट मशीन एक साथ कई लेयर भी चला सकती हैं, जैसे एक लेयर पर आँखें झपकती रहें और शरीर दूसरी लेयर पर कुछ और चलाए।

dotLottie का स्पेसिफ़िकेशन स्टेट के बीच cubic-bezier easing वाले tweened transitions बताता है। इससे एक स्टेट से अगली स्टेट में बदलाव smooth हो जाता है। इसमें किसी वैल्यू के आधार पर कई एनिमेशन मिलाने वाली blend स्टेट या एक साथ चलने वाली कई लेयर का ज़िक्र नहीं है; इसके बजाय, इसमें एक current स्टेट और एक global स्टेट होती है, जिसके transitions पहले जाँचे जाते हैं।

यह क्यों मायने रखता है: blending से ही कैरेक्टर क्लिप्स के सेट जैसे नहीं, बल्कि जीवंत लगते हैं। अगर आपका एनिमेशन idle, hover और pressed स्टेट वाला एक बटन है, तो tweened transitions काफ़ी हैं। अगर यह ऐसा मैस्कॉट है जिसे साँस लेते और इवेंट पर रिएक्ट करते हुए cursor की तरफ़ देखना है, तो blend और लेयर आपको हर combination हाथ से बनाने से बचाते हैं।

एक कैरेक्टर की दस लूपिंग स्टेट, हर एक 0 से 9 तक के मूड नंबर से चुनी जाती है
एक Charmotion Rive file की दस लूपिंग स्टेट, जिन्हें मूड नंबर इनपुट से चुना जाता है।

ऐप के कोड से इन्हें कैसे चलाएँ?

दोनों अपनी स्टेट मशीन को कोड के लिए उपलब्ध कराते हैं, लेकिन अलग-अलग API के साथ।

dotLottie: dotLottie players से आप फ़ाइल से स्टेट मशीन load कर सकते हैं, उसके इनपुट सेट कर सकते हैं, और स्टेट मशीन द्वारा फ़ायर किए गए events और custom events सुन सकते हैं। Web, mobile और Flutter players में method के नाम अलग हैं, इसलिए अपने प्लेटफ़ॉर्म के player का documentation देखें।

Rive, legacy इनपुट (मौजूदा फ़ाइलों में अब भी आम), web पर:

const r = new rive.Rive({
  src: "character.riv",
  canvas,
  stateMachine: "CharacterStateMachine",
  autoplay: true,
  onLoad: () => {
    const inputs = r.stateMachineInputs("CharacterStateMachine");
    inputs.find((i) => i.name === "mood").value = 5;
    inputs.find((i) => i.name === "success").fire();
  },
});

Rive, Data Binding (नए काम के लिए सुझाया गया):

const r = new rive.Rive({
  src: "character.riv",
  canvas,
  stateMachine: "CharacterViewModelMachine",
  autoBind: true,
  autoplay: true,
  onLoad: () => {
    const vm = r.viewModelInstance;
    vm.number("mood").value = 5;
    vm.trigger("success").trigger();
  },
});

इसी वजह से Charmotion की फ़ाइलें दोनों तरीकों के साथ आती हैं। हर .riv में 17 एनिमेशन होते हैं, जिन्हें एक Character व्यू मॉडल चलाता है (0 से 9 तक का mood नंबर और ट्रिगर success, error, yes, no, enter और exit), CharacterStateMachine पर legacy इनपुट के रूप में वही स्टेट, और इंट्रो के लिए एक LaunchStateMachine। आप एक इमेज अपलोड करते हैं और कुछ ही मिनटों में web, React और SwiftUI के कोड के साथ सेट पा लेते हैं। Charmotion, Rive और वीडियो डिलीवर करता है, dotLottie नहीं।

डिज़ाइनरों के लिए कौन आसान है?

यह इस पर निर्भर करता है कि डिज़ाइनर पहले से क्या इस्तेमाल करता है।

Lottie Creator उन टीमों के लिए ठीक है जिनका motion काम After Effects में शुरू होता है। डिज़ाइनर वहीं एनिमेट करते रहते हैं जहाँ वे सहज हैं, Lottie में एक्सपोर्ट करते हैं, फिर web editor में स्टेट और इंटरैक्शन जोड़ते हैं। Logic मॉडल छोटा है (इनपुट, guards, transitions और actions), जिससे सीखना जल्दी होता है। प्लान की जानकारी अहम है: LottieFiles अपने paid tiers में Lottie Creator देता है (Individual $19.99 और Team $24.99/माह, सालाना बिलिंग, अक्टूबर 2026 तक); हम पुष्टि नहीं कर पाए कि स्टेट मशीन के लिए कोई खास tier चाहिए या नहीं।

Rive editor ड्रॉइंग, रिगिंग, एनिमेशन और logic बनाने का एक ही टूल है। डिज़ाइनर डेवलपर्स को कुछ भी सौंपने से पहले editor में ही इंटरैक्शन लाइव टेस्ट कर सकता है। इसे सीखने में ज़्यादा समय लगता है, और Data Binding स्टेट के ऊपर एक और concept (view model) जोड़ता है। बदले में, पूरा इंटरैक्टिव asset एक ही व्यक्ति संभाल सकता है।

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

आपको कौन-सी स्टेट मशीन चुननी चाहिए?

dotLottie स्टेट मशीन चुनें अगर आपके एनिमेशन After Effects से आते हैं, इंटरैक्शन hover, click, toggle या कुछ ही स्टेट तक सीमित हैं, आपको SetTheme और OpenUrl जैसे built-in actions चाहिए, और आप हर प्लेटफ़ॉर्म पर dotLottie player इस्तेमाल कर सकते हैं।

Rive चुनें अगर आपको blend, लेयर या text, colors या lists जैसा typed दोतरफ़ा डेटा चाहिए, या ऐसा कैरेक्टर चाहिए जिसका व्यवहार एक साथ कई वैल्यू पर निर्भर हो। नए काम के लिए Data Binding इस्तेमाल करें, और इनपुट सिर्फ़ मौजूदा फ़ाइलों और legacy runtimes के लिए रखें।

अगर पक्का नहीं है, तो अपनी सबसे जटिल ज़रूरी इंटरैक्शन का prototype दोनों टूल में बनाएँ। जो टूल उसे बिना जुगाड़ के दिखा दे, आमतौर पर वही सही विकल्प है। बड़े फ़ैसले के लिए Rive vs Lottie देखें, और Rive के मॉडल को गहराई से समझने के लिए Rive स्टेट मशीन: इनपुट, ट्रिगर और मूड।

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

क्या Rive स्टेट मशीन के इनपुट deprecated हैं?

Rive अब इनपुट को legacy बताता है। उसके docs कहते हैं कि ये अब भी काम करते हैं, लेकिन नए प्रोजेक्ट के लिए व्यू मॉडल के साथ Data Binding की सलाह देते हैं। कुछ runtimes इससे आगे जाते हैं: नया Apple runtime सिर्फ़ Data Binding सपोर्ट करता है, और Rive का React Native runtime v0.6 में deprecated input APIs हटा देता है। इनपुट वाली मौजूदा फ़ाइलें चलती रहती हैं।

क्या Lottie स्टेट मशीन lottie-web में काम करती हैं?

नहीं। Lottie स्टेट मशीन dotLottie फ़ॉर्मेट का हिस्सा हैं और dotLottie players में चलती हैं, जैसे @lottiefiles/dotlottie-web और उसके framework wrappers। lottie-web एनिमेशन JSON चलाता है, लेकिन स्टेट मशीन नहीं। इन पर भरोसा करने से पहले जाँच लें कि जिन प्लेटफ़ॉर्म पर आप ship करते हैं, वहाँ हर जगह dotLottie player इस्तेमाल हो रहा है।

क्या मैं Rive स्टेट मशीन को Lottie में बदल सकता हूँ?

अपने-आप नहीं। LottieFiles का फ़्री Rive-to-Lottie converter timeline एनिमेशन देता है और बताता है कि स्टेट मशीन convert नहीं होतीं। आपको logic Lottie Creator में फिर से बनाना होगा, और जिन फ़ीचर का dotLottie में कोई समकक्ष नहीं है, जैसे blend स्टेट और दोतरफ़ा Data Binding, उनके लिए अलग डिज़ाइन चाहिए होगा।

Rive view model क्या है?

View model typed properties का एक सेट है, जैसे numbers, strings, colors, enums, lists और ट्रिगर, जिसे Rive editor में परिभाषित करके एनिमेशन के हिस्सों से bind किया जाता है। आपका ऐप runtime पर इन properties को पढ़ता और लिखता है, और बदलाव दोनों तरफ़ sync होते हैं। यह legacy स्टेट मशीन इनपुट की जगह लेता है।

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

स्रोत

संबंधित गाइड