Wix Studio में Rive एनिमेशन कैसे जोड़ें

क्या Wix Studio में बिल्ट-इन Rive एलिमेंट है?

हाँ। Wix Studio ने Rive इंटीग्रेशन जोड़ा है, और इसके हेल्प सेंटर में Studio Editor के Rive एलिमेंट का डॉक्यूमेंटेशन है। अगर कोई ट्यूटोरियल कहता है कि Wix Studio में हर Rive फ़ाइल के लिए HTML embed चाहिए, तो वह इस एलिमेंट के आने से पहले का है।

1. एडिटर के बाईं ओर Add Elements पर क्लिक करें।
2. Media पर क्लिक करें, फिर Rive, फिर Rive Animations के पास वाले Add to Site आइकन पर।
3. Change File पर क्लिक करें और Media Manager से एक .riv चुनें, या + Upload Media से नई फ़ाइल अपलोड करें।
4. Add to Page पर क्लिक करें।

पहले .riv को Media Manager में अपलोड करना ज़रूरी नहीं है; आप सेटअप के दौरान भी अपलोड कर सकते हैं। फ़ाइल Rive से एक्सपोर्ट की गई .riv होनी चाहिए, एडिटर की .rev प्रोजेक्ट फ़ाइल या Lottie JSON नहीं। एक पेज पर कई Rive एलिमेंट रखे जा सकते हैं।

एलिमेंट अपने bounding box के अंदर रहता है, इसलिए drag handles से उसका साइज़ बदलें और एनिमेशन अंदर स्केल हो जाएगा। Wix के अपने ट्यूटोरियल के अनुसार एडिटर प्रीव्यू सिर्फ़ लूप या एंट्रेंस एनिमेशन दिखाता है, इसलिए रिएक्शन पब्लिश की गई साइट पर जाँचें।

कौन-सा आर्टबोर्ड और स्टेट मशीन चुनें?

एलिमेंट चुनें और Settings खोलें। Wix ये विकल्प देता है:

क्योंकि Wix में कोई भी चीज़ इनपुट सेट नहीं करती, ऐसी स्टेट मशीन चुनें जो अपनी शुरुआती वैल्यू के साथ सही दिखे। नंबर और ट्रिगर से चलने वाली फ़ाइल बस अपनी पहली स्टेट में बनी रहती है।

Charmotion फ़ाइल में यह चुनाव साफ़ दिखता है। इसमें तीन स्टेट मशीन हैं: CharacterStateMachine (क्लासिक mood इनपुट और ट्रिगर), CharacterViewModelMachine (Data Binding के लिए Character व्यू मॉडल के ज़रिए वही स्टेट) और LaunchStateMachine (लगभग 2.6 सेकंड का इंट्रो जो आराम वाले पोज़ पर खत्म होता है और कोई end event फ़ायर नहीं करता)। नेटिव एलिमेंट में लूपिंग idle कैरेक्टर के लिए CharacterStateMachine चुनें, क्योंकि इसका mood 0 (idle) से शुरू होता है, या एक बार चलने वाले इंट्रो के लिए LaunchStateMachine। Wix यह डॉक्यूमेंट नहीं करता कि एलिमेंट व्यू मॉडल बाइंड करता है या नहीं, इसलिए CharacterViewModelMachine पर भरोसा करने से पहले उसे पब्लिश किए गए प्रीव्यू में टेस्ट करें।

क्या Wix interactions बिना कोड के मूड बदल सकते हैं?

नहीं। Wix Studio के interactions (entrance, loop, hover, click, scroll) एलिमेंट को बॉक्स की तरह एनिमेट करते हैं: वे पूरे Rive एलिमेंट को फ़ेड, मूव या स्केल करते हैं। वे फ़ाइल के अंदर जाकर न कोई नंबर सेट करते हैं, न ट्रिगर फ़ायर करते हैं।

बिना कोड के जो काम करता है, वह है .riv में ही बनी इंटरैक्टिविटी। Rive listeners कैनवस पर पॉइंटर मूवमेंट और क्लिक पर रिएक्ट करते हैं, और Wix के ट्यूटोरियल में एक फ़ाइल दिखाई गई है जिसमें डॉट्स माउस के पीछे चलते हैं और एक toggle पर क्लिक करने से बैकग्राउंड बदल जाता है। अगर आप बिना कोड के hover या click रिएक्शन चाहते हैं, तो उन्हें Rive editor में आर्टवर्क पर listeners के रूप में जोड़ें, फिर नई फ़ाइल अपलोड करें।

फ़ोन पर दो बातें इस पर असर डालती हैं। Enable touch scroll चालू होने पर एलिमेंट पर ड्रैग करने से पेज स्क्रॉल होता है; इसे सिर्फ़ तभी बंद करें जब फ़ाइल को ड्रैग जेस्चर चाहिए। और टैप करने वाले हिस्से बड़े रखें, क्योंकि फ़ोन पर छोटे कैरेक्टर पर टैप करना आसानी से चूक सकता है।

जो कुछ भी पेज के बाकी हिस्से पर निर्भर करता है, जैसे फ़ॉर्म सबमिट होने के बाद खुशी जताना या बुकिंग लोड होते समय thinking पोज़ पर जाना, उसके लिए कोड चाहिए।

क्या इनपुट या Data Binding सेट करने के लिए Velo चाहिए?

हाँ, लेकिन Rive एलिमेंट के ज़रिए नहीं। अक्टूबर 2026 तक, Velo $w API रेफ़रेंस में Lottie और HtmlComponent जैसे एलिमेंट हैं, लेकिन कोई Rive एलिमेंट नहीं, इसलिए पेज कोड से Rive इनपुट या view model property सेट करने का कोई डॉक्यूमेंटेड तरीका नहीं है। काम करने वाला तरीका है HTML iFrame एलिमेंट के अंदर खुद Rive का वेब रनटाइम चलाना और उसे मैसेज भेजना।

HTML iFrame एलिमेंट जोड़ें, कोड वाला विकल्प चुनें, और एक canvas के साथ रनटाइम पेस्ट करें। Wix के embed डॉक्स के अनुसार सिर्फ़ HTTPS कोड और URL ही दिखते हैं, इसलिए .riv को ऐसे HTTPS CDN पर होस्ट करें जो cross-origin रिक्वेस्ट की अनुमति देता हो:

<style>html, body { margin: 0; height: 100%; }</style>
<canvas id="mascot" style="width: 100%; height: 100%"
        role="img" aria-label="Animated mascot"></canvas>
<script src="https://unpkg.com/@rive-app/webgl2@2.47.1"></script>
<script>
  const reduce = matchMedia("(prefers-reduced-motion: reduce)").matches;
  const r = new rive.Rive({
    src: "https://YOUR-CDN.example.com/mascot.riv",
    canvas: document.getElementById("mascot"),
    stateMachine: "CharacterViewModelMachine",
    autoplay: !reduce,
    autoBind: true,
    onLoad: () => r.resizeDrawingSurfaceToCanvas(),
  });
  // Page code sends { mood: 3 } or { trigger: "success" }.
  window.addEventListener("message", (event) => {
    const vmi = r.viewModelInstance;
    const msg = event.data || {};
    if (!vmi) return;
    if (typeof msg.mood === "number") vmi.number("mood").value = msg.mood;
    if (typeof msg.trigger === "string") vmi.trigger(msg.trigger)?.trigger();
  });
</script>

फिर पेज कोड से मैसेज भेजें। Wix पेज से embed तक मैसेज भेजने के लिए HTML एलिमेंट पर postMessage() डॉक्यूमेंट करता है, जिन्हें embed में message listener रिसीव करता है:

// Page code. #mascotEmbed is the HTML iFrame element's ID.
$w.onReady(() => {
  $w("#helpButton").onClick(() => {
    $w("#mascotEmbed").postMessage({ mood: 3 });          // thinking
  });
  $w("#joinButton").onClick(() => {
    $w("#mascotEmbed").postMessage({ trigger: "success" });
  });
});

embed एक iframe में चलता है, इसलिए यह पेज के दूसरे एलिमेंट को सीधे नहीं पढ़ सकता; मैसेज ही ब्रिज का काम करते हैं। अगर आप embed से वापस पेज पर भी मैसेज पोस्ट करते हैं, तो Wix के अनुसार target origin के रूप में "*" की जगह अपनी साइट का URL दें।

classic Wix Editor में Rive कैसे जोड़ें?

Wix का Rive आर्टिकल Studio Editor के लिए लिखा गया है, और हमें classic Wix Editor के लिए कोई डॉक्यूमेंटेड Rive एलिमेंट नहीं मिला। वहाँ HTML embed इस्तेमाल करें:

1. Add Elements पर क्लिक करें, फिर Embed Code, फिर Popular Embeds।
2. Embed HTML चुनें और उसे पेज पर जोड़ें।
3. embed पर क्लिक करें, फिर Enter Code पर, पिछले सेक्शन का स्निपेट Add your code here के नीचे पेस्ट करें, और Apply पर क्लिक करें।

Wix बताता है कि HTML एलिमेंट एक iframe है, इसलिए उसका कंटेंट responsive नहीं होता, और फ़िक्स्ड पिक्सेल साइज़ से वह कट सकता है। इसीलिए स्निपेट canvas को 100% चौड़ाई और ऊँचाई देता है और आपको हर स्क्रीन के लिए एलिमेंट का साइज़ बदलने देता है। यही postMessage ब्रिज Velo पेज कोड के साथ भी काम करता है।

अगर आपको रिएक्शन की ज़रूरत ही नहीं है, तो वीडियो एलिमेंट में म्यूट, लूपिंग MP4 ज़्यादा आसान है और दोनों एडिटर में काम करता है।

क्या बैकग्राउंड ट्रांसपेरेंट होगा, और breakpoints कैसे संभालें?

एलिमेंट आर्टबोर्ड को वैसे ही दिखाता है जैसे उसे डिज़ाइन किया गया था। अगर आर्टबोर्ड में बैकग्राउंड fill है, तो आपको वही fill दिखेगा; अगर नहीं है, तो पीछे का सेक्शन दिखाई देगा। इसी वजह से Wix का अपना ट्यूटोरियल काले बैकग्राउंड वाले आर्टबोर्ड की जगह हल्का आर्टबोर्ड चुनता है। जब कैरेक्टर को आपके पेज के रंग पर दिखना हो, तो Rive में आर्टबोर्ड fill हटा दें, या बिना fill वाला आर्टबोर्ड चुनें।

breakpoints के लिए Wix कहता है कि Rive settings डिफ़ॉल्ट रूप से सभी breakpoints पर लागू होती हैं। Inspector पैनल में Responsive behavior इस्तेमाल करें ताकि एलिमेंट अपने कंटेनर के साथ स्केल हो, और Fit और Alignment से कैरेक्टर को नज़र में बनाए रखें। अगर फ़ाइल Rive layouts इस्तेमाल करती है, तो Fit को Layout पर सेट करें, उसके layout विकल्प साथ आ जाएँगे।

Wix की settings सूची में मोशन कम करने का कोई विकल्प नहीं है। बड़े लूपिंग हीरो के लिए मोशन को शांत रखें, या embed वाला तरीका अपनाएँ, जिसमें snippet prefers-reduced-motion जाँचता है और ऑटोप्ले नहीं करता।

Wix Studio में Rive एनिमेशन जोड़ें

1. एलिमेंट जोड़ें. Studio Editor में Add Elements, फिर Media, फिर Rive पर क्लिक करें, और पेज पर Rive Animations जोड़ें।
2. फ़ाइल अपलोड करें. Change File पर क्लिक करें और Media Manager में अपनी .riv चुनें या अपलोड करें, फिर Add to Page पर क्लिक करें।
3. आर्टबोर्ड और स्टेट मशीन चुनें. Settings खोलें और वह आर्टबोर्ड और स्टेट मशीन चुनें जो अपनी शुरुआती वैल्यू के साथ सही दिखे।
4. प्लेबैक सेट करें. Fit, Alignment, Autoplay और Enable touch scroll सेट करें, और एलिमेंट को एक्सेसिबल नाम दें या उसे decorative मार्क करें।
5. इसे responsive बनाएँ. Inspector में Responsive behavior सेट करें और हर breakpoint पर जाँच करें।
6. ज़रूरत हो तभी कोड जोड़ें. पेज इवेंट से बदलने वाले मूड के लिए Rive के web रनटाइम के साथ HTML iFrame एलिमेंट इस्तेमाल करें और पेज कोड से postMessage के ज़रिए उसे मैसेज भेजें।

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

क्या मैं Wix Media Manager में .riv फ़ाइल अपलोड कर सकता हूँ?

हाँ। Rive एलिमेंट में Change File पर क्लिक करें और Media Manager में पहले से मौजूद .riv चुनें या + Upload Media से नई अपलोड करें। Wix को Rive से सही तरीके से एक्सपोर्ट की गई .riv चाहिए, इसलिए प्रोजेक्ट फ़ाइल अपलोड करने के बजाय Rive editor से एक्सपोर्ट करें।

मेरा Wix Studio Rive एलिमेंट गलत एनिमेशन क्यों दिखा रहा है?

Wix की checklist में तीन चीज़ें हैं: आर्टबोर्ड, स्टेट मशीन और एलिमेंट का साइज़। एक फ़ाइल में कई आर्टबोर्ड और स्टेट मशीन हो सकती हैं, और एलिमेंट वही चलाता है जो Settings में चुने गए हैं। अगर ये सही हैं और फिर भी काम नहीं करता, तो फ़ाइल खराब होने की संभावना को देखते हुए Rive से .riv फिर से एक्सपोर्ट करें।

क्या Wix में Rive एलिमेंट पेज को धीमा करता है?

यह पेज में Rive रनटाइम और आपकी .riv फ़ाइल जोड़ता है, जो आमतौर पर उसी तरह के वीडियो से कहीं छोटी होती है। एक पेज पर एनिमेटेड एलिमेंट की संख्या सीमित रखें, छोटी फ़ाइल इस्तेमाल करें, और किसी बड़े एनिमेशन को ऐसी पहली चीज़ न बनाएँ जिसका विज़िटर को इंतज़ार करना पड़े।

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

• क्या Wix, Rive एनिमेशन सपोर्ट करता है?
• क्या Wix Velo किसी Rive एनिमेशन की स्टेट बदल सकता है?

स्रोत

• Studio Editor: Adding and setting up a Rive animation, Wix Help Center
• How to add Rive animations to Wix Studio, Wix Studio Academy
• Wix Studio x Rive, Wix Studio
• $w: Introduction, Wix Developers
• Messaging between a site page and an HTML element, Wix Developers
• Wix Editor: Embedding a site or a widget, Wix Help Center
• Web (JS) runtime, Rive
• Web runtime: Data binding, Rive