Rive बनाम Motion (Framer Motion): अलग-अलग काम

हर library असल में क्या एनिमेट करती है?

Motion उन elements को एनिमेट करता है जिन्हें आपके components पहले से render करते हैं। आप div की जगह motion.div लगाते हैं, शुरुआती और आखिरी values बताते हैं, और बीच का काम Motion संभालता है: fade, slide, spring, hover और tap जैसे gestures, AnimatePresence के ज़रिए exit एनिमेशन, और किसी element का साइज़ या position बदलने पर layout एनिमेशन।

Rive वह आर्टवर्क render करता है जिसे किसी ने Rive editor में बनाया और एनिमेट किया है। .riv फ़ाइल में वेक्टर shapes, बोन्स, timelines और एक स्टेट मशीन होती है; आपका code उसे एक canvas में load करता है और बताता है कि किस स्टेट में रहना है।

कौन बेहतर है, यह पूछना ऐसा ही है जैसे पूछना कि CSS बेहतर है या कोई इलस्ट्रेशन। दोनों अलग-अलग सवालों का जवाब देते हैं।

क्या Framer Motion को अब Motion कहा जाता है?

हाँ। 12 नवंबर 2024 को Framer Motion एक स्वतंत्र प्रोजेक्ट बन गया जिसका नाम Motion है। React प्रोजेक्ट के लिए यह बदलाव सिर्फ़ package का नाम बदलना है: motion install करें और framer-motion से होने वाले imports को motion/react से बदल दें।

npm uninstall framer-motion
npm install motion

// before
import { motion } from "framer-motion";
// after
import { motion } from "motion/react";

Motion की upgrade guide के अनुसार component API में कोई बदलाव नहीं हुआ है, इसलिए import बदलने के बाद मौजूदा motion.div code काम करता रहता है। प्रोजेक्ट ने vanilla JavaScript APIs भी जोड़े हैं, ताकि वही animation engine React के बिना भी इस्तेमाल हो सके।

नाम बदलने से पहले लिखी गई तुलनाएँ, जिनमें कई "Rive vs Framer Motion" पोस्ट शामिल हैं, अब भी लागू होती हैं। इस पूरी गाइड में "Framer Motion" को "Motion" ही समझें। तुलना में Rive के नाम स्थिर रहे हैं: editor, .riv format और runtimes के नाम वही हैं, हालाँकि runtimes के लिए सुझाए गए packages बदले हैं।

डिज़ाइनर का बनाया asset कब चाहिए?

जब हिलने वाली चीज़ आपके पेज में कोई element ही नहीं है। Motion सिर्फ़ वही एनिमेट कर सकता है जो आप render करते हैं। बटन, कार्ड, modal और list item elements हैं, इसलिए Motion उनके लिए स्वाभाविक है। पलक झपकाने, सिर झुकाने और खुशी मनाने वाला मैस्कॉट element नहीं है; वह skeleton वाली एक ड्रॉइंग है।

आप inline SVG paths से एक कैरेक्टर बनाकर हर हिस्से को Motion से एनिमेट कर सकते हैं, लेकिन तब हर keyframe code में रहेगा, हर डिज़ाइन बदलाव code बदलाव बन जाएगा, और आर्टवर्क वेब तक ही सीमित रहेगा। यहीं डिज़ाइन किए गए asset का format काम आता है। Rive में एक एनिमेटर कैरेक्टर बनाता है, उसे बोन्स से रिग करता है, timeline पर लूप और रिएक्शन बनाता है, और उन्हें एक स्टेट मशीन से जोड़ता है। Engineers को एक फ़ाइल और एक छोटा API मिलता है।

अब Rive उस API के लिए view models के साथ data binding का सुझाव देता है; उसके docs स्टेट मशीन इनपुट को legacy बताते हैं, हालाँकि वे काम करते रहते हैं। Data binding आपके ऐप और फ़ाइल के बीच values को दोनों तरफ़ sync करता है, इसलिए mood जैसा नंबर या success जैसा ट्रिगर एक typed property बन जाता है जिसे आप React से set करते हैं।

आसान नियम: अगर कोई डिज़ाइनर आपको फ़ाइल देगा, तो Rive (या Lottie) इस्तेमाल करें। अगर आप मोशन को किसी टिकट में लिखकर समझाएँगे, तो Motion या CSS इस्तेमाल करें।

क्या Rive और Motion को साथ इस्तेमाल कर सकते हैं?

हाँ, और यह एक आम pattern है। Motion container को एनिमेट करता है, Rive उसके अंदर के कैरेक्टर को। दोनों कभी एक ही pixels को नहीं छूते, इसलिए टकराव की कोई गुंजाइश नहीं है।

"use client";
import { AnimatePresence, motion } from "motion/react";
import { useRive } from "@rive-app/react-webgl2";

function Mascot() {
  const { RiveComponent } = useRive({
    src: "/mascot.riv",
    stateMachine: "CharacterViewModelMachine",
    autoplay: true,
    autoBind: true,
  });
  return <RiveComponent style={{ width: 160, height: 160 }} />;
}

export function HelpCard({ open }: { open: boolean }) {
  return (
    <AnimatePresence>
      {open && (
        <motion.aside
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: 16 }}
        >
          <Mascot />
          <p>Need a hand?</p>
        </motion.aside>
      )}
    </AnimatePresence>
  );
}

canvas का नहीं, wrapper का साइज़ तय करें, ताकि Rive खुद अपना layout बना सके, और canvas element की जगह wrapper की opacity और position एनिमेट करें।

आपके bundle में कौन ज़्यादा जोड़ता है?

साफ़ तौर पर Rive, क्योंकि वह एक WebAssembly renderer के साथ आता है। Rive की प्रकाशित runtime-size table में brotli compression के बाद web packages का साइज़ 222 KB (canvas-lite), 567 KB (canvas) और 648 KB (webgl2) बताया गया है। Charmotion के अपने माप में @rive-app/canvas-lite 2.44.0 लगभग 373 KB brotli निकला, इसलिए जो version आप install करें उसे जाँच लें। React packages इन्हीं runtimes को wrap करते हैं।

Motion एक JavaScript library है जिसमें कोई WebAssembly नहीं है। उसके documentation में बताया गया है कि m component और LazyMotion से उसका footprint और कैसे घटाया जाए, जो animation features ज़रूरत पड़ने पर load करते हैं। हमें कोई ऐसा स्वतंत्र माप नहीं मिला जिसे quote किया जा सके, इसलिए अपने build में अपने bundler के analyzer से इसे मापें।

ज़्यादा सही तुलना काम के हिसाब से है। Motion से रिग किया हुआ कैरेक्टर दोबारा बनाने का मतलब होगा आर्टवर्क को SVG के रूप में भेजना और साथ में बहुत सारा animation code। hover effect के लिए Rive इस्तेमाल करने का मतलब होगा ऐसे काम के लिए बड़ा runtime जो CSS मुफ़्त में कर देता है। Rive runtime सिर्फ़ उन routes पर load करें जहाँ कैरेक्टर दिखता है, और canvas के स्क्रीन पर आने पर उसे लेज़ी लोड करें।

Rive renderers के अंतर भी document करता है: Canvas2D packages WebGL context की सीमाओं से बचते हैं, जबकि webgl2 Rive Renderer इस्तेमाल करता है, जो vector feathering जैसे features के लिए ज़रूरी है।

React के बाहर कौन काम करता है?

दोनों, पर अलग-अलग दिशाओं में।

Motion वेब तक ही सीमित है। React API के साथ अब यह vanilla JavaScript functions भी देता है, इसलिए आप सामान्य HTML पेज या किसी दूसरे framework में elements एनिमेट कर सकते हैं। यह native iOS, Android या Flutter ऐप में नहीं चलता; उन platforms के अपने animation systems हैं, जैसे SwiftUI animations, Jetpack Compose और Flutter के implicit animations।

Rive शुरू से cross-platform बनाया गया है। वही .riv फ़ाइल वेब (JavaScript और React), Apple platforms, Android, Flutter और React Native के official runtimes पर चलती है। अगर कोई मैस्कॉट आपकी मार्केटिंग साइट और आपके मोबाइल ऐप, दोनों में दिखता है, तो एक Rive file और property names का एक सेट सब जगह काम करता है, जिससे कैरेक्टर हर जगह एक जैसा रहता है।

प्रोडक्ट टीमों के लिए अक्सर यही फ़र्क फ़ैसला करता है। इंटरफ़ेस मोशन वैसे भी हर प्लेटफ़ॉर्म के लिए अलग होता है, इसलिए वहाँ एक वेब लाइब्रेरी काफ़ी है। ब्रांड कैरेक्टर के साथ ऐसा नहीं है, इसलिए उसके लिए एक पोर्टेबल फ़ाइल उस कोड से ज़्यादा काम की है जो सिर्फ़ ब्राउज़र में चलता है।

React Native और Flutter से जुड़ी बारीकियों के लिए React Native और Flutter में Lottie बनाम Rive देखें।

आपको Rive चुनना चाहिए या Motion?

Motion चुनें, अगर:

• आप अपना खुद का इंटरफ़ेस एनिमेट कर रहे हैं: मोडल, मेन्यू, लिस्ट, पेज ट्रांज़िशन, शेयर्ड लेआउट;
• एनिमेशन React state, जेस्चर या स्क्रॉल पोज़िशन पर निर्भर करते हैं;
• आप सब कुछ कोड में रखना चाहते हैं, बिना किसी बाहरी asset को मैनेज किए;
• आप MotionConfig reducedMotion="user" के ज़रिए reduced motion की बिल्ट-इन हैंडलिंग चाहते हैं।

Rive चुनें, अगर:

• एनिमेशन इलस्ट्रेटेड है: कोई मैस्कॉट, असिस्टेंट अवतार, एनिमेटेड लोगो या कोई रिच इंटरैक्टिव कंट्रोल;
• उसमें कई स्टेट हैं जिनके बीच आपका ऐप स्विच करता है;
• एक ही आर्टवर्क को वेब और नेटिव ऐप, दोनों में चलना है;
• यह तय करना कि वह कैसे मूव करेगा, डेवलपर का नहीं बल्कि डिज़ाइनर का काम है।

Rive इस्तेमाल करने वाले ज़्यादातर React ऐप उसके आसपास की बाकी चीज़ों के लिए Motion या CSS भी इस्तेमाल करते हैं। अगर आपके पास कैरेक्टर है लेकिन एनिमेटर नहीं, तो Charmotion अपलोड किए गए कैरेक्टर, मैस्कॉट या लोगो को कुछ ही मिनटों में 17 एनिमेशन में बदल देता है: Data Binding view model और legacy इनपुट वाली एक .riv फ़ाइल, साथ में तैयार React, वेब और SwiftUI कोड और वीडियो एक्सपोर्ट। React एनिमेशन गाइड एक ही ऐप में दोनों लाइब्रेरी दिखाती है।

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

क्या Motion, Rive की जगह ले सकता है?

नहीं। Motion उन DOM और React एलिमेंट को एनिमेट करता है जिन्हें आप पहले से रेंडर कर रहे हैं, और इसके लिए कोड में लिखी वैल्यू इस्तेमाल करता है। Rive अपने editor में बनाया गया वेक्टर आर्टवर्क चलाता है, जिसकी स्टेट मशीन फ़ाइल के अंदर ही होती है। कैरेक्टर या मैस्कॉट Rive या Lottie का काम है; आपके इंटरफ़ेस के ट्रांज़िशन, लेआउट बदलाव और जेस्चर Motion या CSS का काम हैं।

क्या Motion फ़्री है?

motion पैकेज ओपन सोर्स है और किसी भी दूसरी लाइब्रेरी की तरह npm से इंस्टॉल होता है। Motion की वेबसाइट कुछ वैकल्पिक पेड एक्स्ट्रा भी बेचती है; उनमें आज क्या शामिल है, यह motion.dev पर देखें। Rive के रनटाइम MIT लाइसेंस के तहत हैं, जबकि उसके editor के फ़्री और पेड प्लान हैं; फ़्री प्लान के एक्सपोर्ट में एक स्प्लैश स्क्रीन दिखती है।

क्या Motion किसी SVG कैरेक्टर को एनिमेट कर सकता है?

हाँ, आप SVG paths को motion कंपोनेंट में रैप करके उनके attributes एनिमेट कर सकते हैं। यह आसान इलस्ट्रेशन के लिए काम करता है, लेकिन हर keyframe कोड में रहता है और नतीजा सिर्फ़ वेब पर चलता है। कई स्टेट वाले रिग किए हुए कैरेक्टर के लिए Rive फ़ाइल को मेंटेन करना कहीं ज़्यादा आसान है, और वह नेटिव ऐप में भी चलती है।

क्या Rive, Next.js के साथ काम करता है?

हाँ। Rive का React पैकेज एक client component में इस्तेमाल करें, जिस पर use client directive लगा हो, क्योंकि यह ब्राउज़र में canvas पर रेंडर करता है। .riv फ़ाइल को public फ़ोल्डर में रखें और उसे URL से लोड करें। जो Motion कंपोनेंट state या जेस्चर इस्तेमाल करते हैं, उन्हें भी client component होना ज़रूरी है।

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

• क्या Framer Motion, Rive का विकल्प है?

स्रोत

• Framer Motion is now independent, introducing Motion, Motion
• Upgrade guide, Motion
• Reduce bundle size, Motion
• Accessibility, Motion
• React runtime, Rive
• Runtime sizes, Rive
• Choose a renderer, Rive
• State machine inputs (legacy), Rive