कंटेंट पर जाएँ
charmotion

SwiftUI (iOS) में Rive का इस्तेमाल कैसे करें

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

गाइड का कवर इलस्ट्रेशन: SwiftUI (iOS) में Rive कैसे इस्तेमाल करें, Charmotion डेमो कैरेक्टर के साथ

SwiftUI में Rive इस्तेमाल करने के लिए RiveRuntime Swift पैकेज जोड़ें, अपनी फ़ाइल और स्टेट मशीन के नाम के साथ RiveViewModel बनाएँ, और अपने view में viewModel.view() रखें। यह legacy Apple रनटाइम है, जो setInput और triggerInput सपोर्ट करता है। नया Apple रनटाइम इसकी जगह data binding से फ़ाइलों को कंट्रोल करता है।

मुख्य बातें

  • RiveRuntime को Swift Package Manager या CocoaPods से इंस्टॉल करें; यह iOS 14 और उसके बाद के versions सपोर्ट करता है।
  • नया और legacy, दोनों Apple रनटाइम एक ही पैकेज में आते हैं।
  • इनपुट APIs (setInput, triggerInput) सिर्फ़ legacy Apple रनटाइम में काम करते हैं।
  • नया रनटाइम data binding इस्तेमाल करता है, इसलिए फ़ाइल में view models होने चाहिए।

RiveRuntime कैसे इंस्टॉल करें?

Apple रनटाइम, rive-app/rive-ios repository का RiveRuntime module है। यह Swift Package Manager और CocoaPods के ज़रिए उपलब्ध है।

Xcode में Swift Package Manager के साथ: File → Add Package Dependencies खोलें, https://github.com/rive-app/rive-ios डालें, version rule चुनें, और RiveRuntime को अपने app target में जोड़ें। CocoaPods के साथ, pod को अपनी Podfile में जोड़ें और pod install चलाएँ।

Rive के docs के अनुसार सपोर्टेड प्लेटफ़ॉर्म:

  • iOS 14.0+
  • visionOS 1.0+
  • tvOS 16.0+
  • macOS 13.1+
  • Mac Catalyst 14.0+

iOS पर रनटाइम download size में लगभग 1.67 MB और installed size में करीब 4.66 MB जोड़ता है (Rive के जनवरी 2026 के आँकड़े)। आप जो भी .riv फ़ाइल bundle करते हैं, वह अलग से जुड़ती है, लेकिन आमतौर पर छोटी होती है।

अपनी .riv फ़ाइल को किसी भी दूसरे resource की तरह app target में जोड़ें। पक्का करें कि उसकी target membership चेक हो, वरना launch पर रनटाइम उसे नहीं ढूँढ पाएगा।

नए और legacy Apple रनटाइम में क्या फ़र्क है?

Rive अब एक ही Swift package और pod में दो Apple APIs देता है, और दोनों import RiveRuntime से import होते हैं।

Legacy Apple रनटाइमनया Apple रनटाइम
मुख्य typeRiveViewModelview model instances के साथ data binding
स्टेट मशीन इनपुटसपोर्टेड (setInput, triggerInput)सपोर्ट नहीं है
Data bindingउपलब्धफ़ाइलों को कंट्रोल करने का तरीका
स्टेटसअब भी उपलब्ध और डॉक्यूमेंटेडनए काम के लिए Rive की दिशा

Rive के docs साफ़ कहते हैं: deprecated inputs फ़ीचर "सिर्फ़ Legacy Runtime में सपोर्टेड है, New Runtime में नहीं।" इसी से तय होता है कि आप कौन-सा API इस्तेमाल करेंगे। अगर आपकी .riv फ़ाइल में सिर्फ़ इनपुट हैं, तो legacy runtime इस्तेमाल करें। अगर उसमें व्यू मॉडल हैं, तो आप नया runtime इस्तेमाल कर सकते हैं।

जाँचने के लिए फ़ाइल को Rive editor में खोलें और data panel में व्यू मॉडल देखें, उसे फ़्री Rive File Inspector में लोड करें, या फ़ाइल बनाने वाले से पूछें। Editor का Convert Inputs to View Models कमांड इनपुट-आधारित फ़ाइल में व्यू मॉडल जोड़ सकता है।

SwiftUI में .riv कैसे दिखाएँ?

Legacy runtime में फ़ाइल के नाम (extension के बिना) और स्टेट मशीन के नाम के साथ एक RiveViewModel बनाएँ, उसे @StateObject से बनाए रखें, और SwiftUI view पाने के लिए .view() कॉल करें।

import SwiftUI
import RiveRuntime

struct CharacterView: View {
    @StateObject private var character = RiveViewModel(
        fileName: "character",
        stateMachineName: "CharacterStateMachine"
    )

    var body: some View {
        character.view()
            .frame(width: 220, height: 220)
            .accessibilityLabel("Animated character")
    }
}

View model को @StateObject में रखें (या किसी ऐसे parent object में जो उसका मालिक हो), ताकि हर redraw पर वह दोबारा न बने। दोबारा बनने पर एनिमेशन फिर से शुरू हो जाता है और सभी इनपुट रीसेट हो जाते हैं।

अगर कई स्क्रीन एक ही कैरेक्टर दिखाती हैं, तो हर एक को अपना अलग RiveViewModel दें। एक व्यू मॉडल एक ही view चलाता है; legacy API में उसे दो दिखने वाले views के बीच शेयर करना सपोर्टेड नहीं है।

View का साइज़ .frame से तय करें। डिफ़ॉल्ट fit फ़्रेम के अंदर आर्टबोर्ड का aspect ratio बनाए रखता है। अगर कैरेक्टर कोई मतलब बताता है, तो accessibility label जोड़ें; अगर वह सिर्फ़ सजावट के लिए है, तो .accessibilityHidden(true) इस्तेमाल करें।

नंबर इनपुट कैसे सेट करें या ट्रिगर कैसे फ़ायर करें?

Legacy runtime में RiveViewModel booleans और numbers (Float या Double) के लिए setInput(_:value:) और ट्रिगर के लिए triggerInput(_:) देता है।

struct UploadView: View {
    @StateObject private var character = RiveViewModel(
        fileName: "character",
        stateMachineName: "CharacterStateMachine"
    )

    var body: some View {
        VStack(spacing: 24) {
            character.view().frame(width: 220, height: 220)
            Button("Upload") { Task { await upload() } }
        }
    }

    func upload() async {
        character.setInput("mood", value: 5.0)      // loading loop
        let ok = await performUpload()
        character.triggerInput(ok ? "success" : "error")
        character.setInput("mood", value: 0.0)      // back to idle
    }
}

क्योंकि transitions स्टेट मशीन संभालती है, आपका code सरल रहता है: ऐप जो कर रहा है उसके हिसाब से लूप सेट करें, और कुछ होने पर ट्रिगर फ़ायर करें। आपको कभी यह जानने की ज़रूरत नहीं कि स्क्रीन पर इस समय कौन-सा एनिमेशन चल रहा है।

इनपुट के नाम case-sensitive होते हैं और फ़ाइल से बिल्कुल मेल खाने चाहिए। एक ही समय पर ट्रिगर फ़ायर करना और नंबर बदलना ठीक है, बशर्ते फ़ाइल इस तरह wire की गई हो कि वन-शॉट रिएक्शन मौजूदा लूप पर लौटने से पहले पूरे हो जाएँ।

याद रखें कि ये calls deprecated inputs सिस्टम का हिस्सा हैं और सिर्फ़ legacy Apple runtime में काम करती हैं। मौजूदा इनपुट-आधारित फ़ाइलों के लिए ये ठीक हैं; नई फ़ाइलों के लिए data binding पर विचार करें।

iOS पर data binding कैसे इस्तेमाल करें?

नए Apple runtime में आप फ़ाइल को उसके view model instance के ज़रिए कंट्रोल करते हैं। आप हर property को उसके path से बताते हैं और फिर instance पर values सेट करते हैं या ट्रिगर फ़ायर करते हैं:

let mood = NumberProperty(path: "mood")
viewModelInstance.setValue(of: mood, to: 5)

let success = TriggerProperty(path: "success")
viewModelInstance.fire(trigger: success)

नए runtime में values वापस पढ़ना asynchronous है और इसमें try await इस्तेमाल होता है। अपनी फ़ाइल का view model instance कैसे पाएँ और property changes को कैसे observe करें, यह जानने के लिए Rive का Apple data binding पेज देखें।

यह तभी काम करता है जब .riv में मेल खाते property paths वाला व्यू मॉडल मौजूद हो। जो फ़ाइल सिर्फ़ इनपुट देती है, उसमें इन calls के bind होने के लिए कुछ नहीं होता।

Charmotion फ़ाइलें दोनों Apple runtimes के साथ काम करती हैं। Legacy runtime में CharacterStateMachine पर RiveViewModel इस्तेमाल करें, साथ में setInput("mood", value:) और triggerInput(...)। नए runtime में Character व्यू मॉडल से bound CharacterViewModelMachine बनाएँ और NumberProperty(path: "mood") तथा TriggerProperty(path: "success") इस्तेमाल करें। सेट में दोनों के लिए तैयार SwiftUI फ़ाइलें शामिल हैं।

Reduce Motion सेटिंग का पालन कैसे करें?

iOS यूज़र Settings → Accessibility → Motion → Reduce Motion चालू कर सकते हैं। SwiftUI यह सेटिंग accessibilityReduceMotion environment value के ज़रिए देता है। इसे पढ़ें और लूपिंग कैरेक्टर की जगह एक स्थिर इमेज दिखाएँ।

struct AdaptiveCharacter: View {
    @Environment(\.accessibilityReduceMotion) private var reduceMotion
    @StateObject private var character = RiveViewModel(
        fileName: "character",
        stateMachineName: "CharacterStateMachine"
    )

    var body: some View {
        if reduceMotion {
            Image("character-still")
                .resizable()
                .scaledToFit()
                .frame(width: 220, height: 220)
        } else {
            character.view().frame(width: 220, height: 220)
        }
    }
}

Environment value तुरंत अपडेट होती है, इसलिए ऐप चलते समय यूज़र सेटिंग बदले तो view भी बदल जाता है। अगर एनिमेशन कोई स्टेट बताता है, जैसे loading या success, तो वह जानकारी text या accessibility announcement से उपलब्ध रखें, ताकि मोशन हटने पर कुछ भी छूटे नहीं।

loading: mood 5, काम चलने तक लूप होता है।

SwiftUI ऐप में Rive कैरेक्टर जोड़ें

  1. पैकेज जोड़ें. Xcode में Swift Package Manager से https://github.com/rive-app/rive-ios जोड़ें और RiveRuntime को अपने target से link करें।
  2. फ़ाइल bundle करें. .riv फ़ाइल को प्रोजेक्ट में drag करें और पक्का करें कि वह ऐप target की member है।
  3. Runtime चुनें. इनपुट-आधारित फ़ाइलों के लिए legacy RiveViewModel इस्तेमाल करें; नया runtime सिर्फ़ तभी इस्तेमाल करें जब फ़ाइल में व्यू मॉडल हों।
  4. View दिखाएँ. @StateObject में RiveViewModel(fileName:stateMachineName:) बनाएँ और .frame के साथ .view() रखें।
  5. स्टेट्स चलाएँ. लूप के लिए setInput("mood", value: 5.0) और वन-शॉट रिएक्शन के लिए triggerInput("success") कॉल करें।
  6. Reduce Motion सेटिंग का ध्यान रखें. @Environment(\.accessibilityReduceMotion) पढ़ें और जब वह true हो तो स्थिर इमेज दिखाएँ।

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

मेरे iOS ऐप में setInput कुछ क्यों नहीं करता?

सबसे आम कारण हैं गलत स्टेट मशीन या इनपुट का नाम, या नए Apple runtime का इस्तेमाल, जो इनपुट सपोर्ट नहीं करता। नामों में case और spacing बिल्कुल सही है या नहीं, जाँचें, पक्का करें कि आपने RiveViewModel को stateMachineName के साथ बनाया है, और यह भी कि व्यू मॉडल दोबारा बनने के बजाय @StateObject में रखा गया है।

क्या Rive SwiftUI के साथ-साथ UIKit के साथ भी काम करता है?

हाँ। RiveRuntime दोनों को सपोर्ट करता है। Legacy runtime में RiveViewModel SwiftUI view के साथ UIKit view भी बना सकता है, और वही setInput और triggerInput calls उसे कंट्रोल करती हैं। Rive का Apple documentation SwiftUI के साथ UIKit setup भी बताता है, इसलिए आप एक ही ऐप में दोनों मिला सकते हैं।

Rive कौन-से iOS versions सपोर्ट करता है?

Rive का Apple runtime iOS 14.0 और उसके बाद के versions सपोर्ट करता है, साथ ही visionOS 1.0+, tvOS 16.0+, macOS 13.1+ और Mac Catalyst 14.0+ भी। नया और legacy, दोनों Apple runtimes एक ही Swift package में आते हैं, इसलिए ये न्यूनतम versions दोनों API पर लागू होते हैं।

क्या मैं widget या लॉन्च स्क्रीन में Rive फ़ाइल इस्तेमाल कर सकता हूँ?

लॉन्च स्क्रीन में live एनिमेशन के रूप में नहीं। iOS लॉन्च स्क्रीन स्थिर होती हैं और custom code के बिना Info.plist या storyboard से configure होती हैं, इसलिए अपना Rive इंट्रो ऐप के पहले असली view में चलाएँ। Widgets भी snapshots के रूप में render होते हैं, इसलिए उन्हें स्थिर इमेज की तरह इस्तेमाल करें।

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

स्रोत

संबंधित गाइड