Framer में Rive और Lottie एनिमेशन कैसे जोड़ें

क्या Framer, Rive को सपोर्ट करता है?

हाँ, Framer Marketplace में Rive द्वारा पब्लिश किए गए ऑफ़िशियल plugin के ज़रिए। इसकी listing के अनुसार यह "Framer को Rive फ़ॉर्मेट का native सपोर्ट देता है, यानी आप .riv फ़ाइल को सीधे Framer में drag and drop कर सकते हैं", और इससे आप फ़ाइल के स्टेट मशीन इनपुट तक पहुँचकर उन्हें Framer से कंट्रोल कर सकते हैं।

इसलिए साधारण embed के उलट, स्टेट मशीन काम करती रहती है: कैरेक्टर अपने आप idle रह सकता है, और Framer कोई इनपुट बदलकर उसे दूसरी स्टेट में ले जा सकता है। ज़्यादातर मार्केटिंग साइट्स के लिए इतना काफ़ी है, जहाँ कैरेक्टर hover, टैप और पेज के सेक्शन पर रिएक्ट करता है।

शुरू करने से पहले दो बातें जान लें:

• यह plugin स्टेट मशीन इनपुट के साथ काम करता है। जो फ़ाइलें सिर्फ़ data binding properties देती हैं, उनके लिए नीचे बताया गया code-component तरीका चाहिए, इसलिए जाँच लें कि आपकी फ़ाइल कौन-सा सिस्टम इस्तेमाल करती है।
• सोर्स फ़ाइल में इनपुट के नाम साफ़ रखें। Framer में आप उन्हें नाम से चुनेंगे, और कई booleans की तुलना में mood नाम का एक नंबर संभालना आसान है।

ऑफ़िशियल Rive plugin कैसे इस्तेमाल करें?

1. Framer Marketplace खोलें, Rive का Rive plugin ढूँढें और उसे अपने प्रोजेक्ट में खोलें।
2. अपनी .riv फ़ाइल को canvas पर ड्रैग करें।
3. वह आर्टबोर्ड और स्टेट मशीन चुनें जिसे आप चलाना चाहते हैं।
4. layer का साइज़ आर्टबोर्ड से मेल खाते fixed aspect ratio के साथ रखें, ताकि छोटे breakpoints पर कैरेक्टर कटे नहीं।
5. जिन इनपुट को कंट्रोल करना है उन्हें सेट करें, फिर उन्हें अपने डिज़ाइन से जोड़ें, जैसे hover और pressed स्टेट के लिए component variants के ज़रिए।

मूड-आधारित कैरेक्टर के लिए एक आम सेटअप है: कुछ variants वाला एक Framer component, जिसमें हर variant अलग mood वैल्यू सेट करता है: डिफ़ॉल्ट रूप से idle (0), hover पर happy (1), और जिस सेक्शन पर ध्यान खींचना हो वहाँ attention (9)। yes या success जैसे ट्रिगर call-to-action पर टैप के लिए सही रहते हैं।

मौजूदा विकल्पों के लिए plugin की listing देखें, क्योंकि plugin के इंटरफ़ेस डॉक्यूमेंटेशन से जल्दी बदलते हैं। अगर ज़रूरी कंट्रोल नहीं मिलता, तो आखिरी सेक्शन का code component आपको runtime का पूरा ऐक्सेस देता है।

क्या Framer, Lottie और dotLottie को native रूप से सपोर्ट करता है?

Framer के Insert मेन्यू में Lottie components मिलते हैं। LottieFiles की एक गाइड के अनुसार, आप Insert पर क्लिक करें, एनिमेशन components के लिए Media खोलें, और Lottie या Dot Lottie component जोड़कर उसे अपनी फ़ाइल से जोड़ें। LottieFiles इसे native सपोर्ट बताता है; Framer का अपना help center इसे उतने विस्तार से डॉक्यूमेंट नहीं करता, इसलिए मौजूदा विकल्पों के लिए अपने editor का Insert पैनल देखें।

Lottie उन इलस्ट्रेशन के लिए इस्तेमाल करें जो एक बार चलते हैं या लूप होते हैं: हीरो सीन, एनिमेटेड आइकन, एम्प्टी स्टेट की ड्रॉइंग। अगर आपका एक्सपोर्ट टूल विकल्प दे, तो .json की जगह .lottie चुनें, क्योंकि dotLottie फ़ाइलें कंप्रेस्ड होती हैं और एक फ़ाइल में कई एनिमेशन रख सकती हैं।

अगर एनिमेशन को विज़िटर की हरकतों के हिसाब से स्टेट बदलनी हो, तो आमतौर पर Rive आसान विकल्प है, क्योंकि स्टेट बदलने का लॉजिक आपके Framer layout में नहीं, फ़ाइल की स्टेट मशीन में रहता है। पूरी तुलना के लिए Rive vs Lottie देखें।

Framer में वीडियो या ट्रांसपेरेंट वीडियो कैसे जोड़ें?

Framer का Video component अपलोड की गई फ़ाइलें, hosted MP4 URL, YouTube और Vimeo चलाता है। Framer का help center बताता है कि यह "वीडियो की loading को optimize करता है, लेकिन वीडियो कंटेंट को खुद optimize या कंप्रेस नहीं करता", इसलिए अपलोड करने से पहले छोटी, वेब के लिए तैयार फ़ाइल एक्सपोर्ट करें। बैकग्राउंड लूप के लिए autoplay, mute और loop चालू करें।

ट्रांसपेरेंट वीडियो में सावधानी चाहिए। Chrome, Edge और Firefox, VP9 WebM का अल्फ़ा चैनल दिखाते हैं, लेकिन Safari WebM को opaque चलाता है और उसे HEVC-with-alpha .mov चाहिए। इसलिए एक ही अपलोड की गई फ़ाइल हर ब्राउज़र में ट्रांसपेरेंट नहीं हो सकती। अपने डिज़ाइन के ऊपर कैरेक्टर दिखाने के लिए ऐसा embed या code component इस्तेमाल करें जो दोनों sources के साथ <video> दे, पहले HEVC:

<video autoplay muted loop playsinline preload="metadata"
       width="400" height="400" poster="/mascot-poster.png">
  <!-- Safari: HEVC with alpha must come first -->
  <source src="/mascot.mov" type="video/quicktime; codecs=hvc1.1.6.H120.b0">
  <!-- Chrome, Edge, Firefox: VP9 with alpha -->
  <source src="/mascot.webm" type="video/webm; codecs=vp09.00.41.08">
</video>

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

आप जो भी जोड़ें, उन विज़िटर्स का ध्यान रखें जिन्होंने "मोशन कम करें" सेटिंग चालू रखी है। Framer जिस एनिमेशन library पर बना है, यानी Motion, उसके डॉक्यूमेंटेशन के अनुसार Framer अपना reduced-motion व्यवहार Site Settings, फिर Accessibility में एक सेटिंग के रूप में देता है। यह सेटिंग Framer के अपने transitions पर लागू होती है; यह आपके लिए Rive फ़ाइल या वीडियो को pause नहीं करती। लूप होने वाले कैरेक्टर को एक शांत idle स्टेट दें, और code component में matchMedia("(prefers-reduced-motion: reduce)") जाँचें और मैच होने पर autoplay छोड़ दें।

कोड से Rive मूड को Framer properties से कैसे जोड़ें?

Framer के code components, React components होते हैं, इसलिए आप Rive का React runtime इस्तेमाल करके मूड को property control के रूप में दे सकते हैं। इससे डिज़ाइनर्स को canvas पर एक slider मिलता है और आप उस property को variants या overrides से जोड़ सकते हैं।

import { addPropertyControls, ControlType } from "framer";
import { useEffect } from "react";
import { useRive, useStateMachineInput } from "@rive-app/react-canvas";

const SM = "CharacterStateMachine";

export default function Mascot({ src, mood }: { src: string; mood: number }) {
  const { rive, RiveComponent } = useRive({ src, stateMachine: SM, autoplay: true });
  const moodInput = useStateMachineInput(rive, SM, "mood");

  useEffect(() => {
    if (moodInput) moodInput.value = mood;
  }, [moodInput, mood]);

  return <RiveComponent style={{ width: "100%", height: "100%" }} />;
}

addPropertyControls(Mascot, {
  src: { type: ControlType.File, allowedFileTypes: ["riv"] },
  mood: { type: ControlType.Number, min: 0, max: 9, step: 1, defaultValue: 0 },
});

code फ़ाइलों में package imports कैसे resolve होते हैं, यह Framer के developer डॉक्यूमेंटेशन में बताया गया है; अगर Rive import लोड न हो तो उसे देखें। Charmotion अपलोड किए गए कैरेक्टर से इस mood इनपुट (0 idle से 9 attention तक) और success, error, yes, no, enter व exit ट्रिगर वाली .riv बनाता है, साथ में React कोड भी, जिसे आप यहाँ अपने हिसाब से ढाल सकते हैं।

Framer साइट में Rive कैरेक्टर कैसे जोड़ें

1. plugin इंस्टॉल करें. अपने प्रोजेक्ट में Framer Marketplace से ऑफ़िशियल Rive plugin खोलें।
2. फ़ाइल जोड़ें. .riv को canvas पर ड्रैग करें और उसका आर्टबोर्ड व स्टेट मशीन चुनें।
3. layer का साइज़ तय करें. layer को आर्टबोर्ड से मेल खाता fixed aspect ratio दें और हर breakpoint पर टेस्ट करें।
4. इनपुट कंट्रोल करें. hover, press और सेक्शन स्टेट के लिए variants से मूड नंबर या ट्रिगर सेट करें।
5. कस्टम लॉजिक के लिए कोड इस्तेमाल करें. जो काम plugin से न हो सके, उसके लिए useRive को mood property control वाले code component में रैप करें।

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

क्या Framer का Rive plugin ऑफ़िशियल है?

हाँ। Framer Marketplace में Rive plugin को Rive ने पब्लिश किया है। यह .riv फ़ाइलों के लिए drag-and-drop सपोर्ट जोड़ता है और फ़ाइल के स्टेट मशीन इनपुट उपलब्ध कराता है, ताकि आप उन्हें Framer से कंट्रोल कर सकें। इसे Framer Marketplace से इंस्टॉल करें और .riv फ़ाइलें ड्रैग करना शुरू करने के लिए अपने प्रोजेक्ट में खोलें।

Safari पर Framer में मेरा ट्रांसपेरेंट WebM काला क्यों दिखता है?

Safari, WebM चलाता है लेकिन उसका अल्फ़ा चैनल अनदेखा करता है। embed या code component से पहले source के रूप में HEVC-with-alpha .mov और दूसरे के रूप में WebM दें, या Rive फ़ाइल इस्तेमाल करें, जो हर प्रमुख ब्राउज़र में ट्रांसपेरेंट canvas पर render होती है और आमतौर पर दोनों वीडियो फ़ाइलों से छोटी होती है।

क्या Framer अपलोड किए गए वीडियो कंप्रेस करता है?

नहीं। Framer का help center कहता है कि यह वीडियो की loading को optimize करता है, लेकिन वीडियो कंटेंट को खुद optimize या कंप्रेस नहीं करता। अपलोड से पहले छोटा, वेब के लिए तैयार MP4 या WebM encode करें, खासकर autoplay होने वाले बैकग्राउंड लूप के लिए, जो पेज की हर विज़िट पर डाउनलोड होते हैं।

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

• क्या Framer, Rive और Lottie को सपोर्ट करता है?

स्रोत

• Rive plugin, Framer Marketplace
• Add Lottie JSON and dotLottie files to Framer, LottieFiles
• How to add video, Framer Help
• Framer developer documentation, Framer
• React accessibility: reduced motion, Motion
• React runtime, Rive
• Video with alpha transparency on the web, Jake Archibald