आपके iOS ऐप के लिए एनिमेटेड मैस्कॉट, SwiftUI कोड के साथ।
आप एक इमेज देते हैं; बदले में मिलती है एक Rive फ़ाइल जिसे आपके SwiftUI व्यू एक मूड नंबर और ट्रिगर से चलाते हैं, पुराने और नए Apple रनटाइम के लिए तैयार SwiftUI फ़ाइलें, AVFoundation, Keynote और Final Cut के लिए ट्रांसपेरेंट HEVC MOV, और आपकी पहली स्क्रीन के लिए एक लॉन्च एनिमेशन।
यह वही असली .riv है जो हमारा इंजन डिलीवर करता है, और यह आपके ब्राउज़र में चल रहा है। यह वही स्टेट मशीन है जिसे आप अपने ऐप से एक नंबर इनपुट और हर वन-शॉट के लिए एक ट्रिगर से चलाते हैं।
SwiftUI में एनिमेटेड मैस्कॉट कैसे जोड़ें?
Rive Swift पैकेज जोड़ें, मैस्कॉट की .riv फ़ाइल अपने बंडल में रखें, और उसे RiveViewModel(fileName:stateMachineName:).view() से दिखाएँ। लूप बदलने के लिए मूड जैसा नंबर इनपुट सेट करें और वन-शॉट के लिए ट्रिगर फ़ायर करें, या Data Binding के साथ Rive का Apple रनटाइम इस्तेमाल करें। Charmotion सेट के साथ दोनों रनटाइम के लिए तैयार SwiftUI फ़ाइलें मिलती हैं।
import SwiftUI
import RiveRuntime // Swift Package: rive-app/rive-ios
struct MascotView: View {
@StateObject var mascot = RiveViewModel(
fileName: "mascot", // mascot.riv in your bundle
stateMachineName: "CharacterStateMachine"
)
var mood: Double = 0 // 0 idle · 1 happy · 2 wave …
var body: some View {
mascot.view()
.aspectRatio(1, contentMode: .fit)
.onAppear { mascot.setInput("mood", value: mood) }
.onChange(of: mood) { _, new in mascot.setInput("mood", value: new) }
}
func play(_ reaction: String) { mascot.triggerInput(reaction) } // "success"
}
डिलीवर की गई फ़ाइल का छोटा रूप; असली फ़ाइल में व्यू, mood enum और रिएक्शन के नाम आपके कैरेक्टर के नाम पर होते हैं।
दोनों Apple रनटाइम
{Name}View.swift स्टेट मशीन इनपुट के साथ पुराना RiveViewModel इस्तेमाल करता है। {Name}NewRuntimeView.swift नया async रनटाइम इस्तेमाल करता है, जिसमें Character व्यू मॉडल के ज़रिए Data Binding होती है।
लॉन्च स्क्रीन
एक अलग LaunchStateMachine 2.6 सेकंड का इंट्रो एक बार चलाता है और फिर idle पर रुक जाता है। इसे स्टैटिक लॉन्च स्क्रीन के बाद अपनी पहली स्क्रीन पर दिखाएँ। यह खत्म होने पर कोई इवेंट फ़ायर नहीं करता, इसलिए हैंड-ऑफ़ का समय इंट्रो की लंबाई के हिसाब से तय करें।
Reduce Motion सेटिंग का ध्यान रखें
accessibilityReduceMotion चेक करें और जो लोग कम मोशन चाहते हैं, उनके लिए मैस्कॉट को idle पर (या एक स्थिर पोस्टर पर) रखें।
असली आउटपुट
डिलीवर की गई फ़ाइलें, ठीक वैसी ही जैसी आप डाउनलोड करेंगे।
MP4 हर सेट
1080 × 1080, 60 fps पर। यहाँ: Gummo का हाथ हिलाना (wave), डिलीवर किए गए सेट से।
ट्रांसपेरेंट WebM और MOV हर सेट
अल्फ़ा चैनल शामिल है, इसलिए पीछे का चेकरबोर्ड दिखता है। MOV, Apple ऐप और एडिटर के लिए अल्फ़ा के साथ HEVC है।
GIF हर सेट
डॉक्स, ईमेल और चैट के लिए हल्के प्रीव्यू। Kiko का “thinking” लूप।
9:16 लॉन्च वीडियो हर सेट
स्टोरीज़ और स्प्लैश स्क्रीन के लिए 1080 × 1920। Sizzle का लॉन्च इंट्रो।
kiko.riv · 150 KB
CharacterStateMachine
नंबर इनपुट mood 0-9: idle, happy, wave, thinking, sad, loading, listening, talking, sleeping, attention ट्रिगर: success · error · yes · no · enter · exit
LaunchStateMachine
launch → idle, एक बार चलता है
Rive स्टेट मशीन हर सेट
17 वीडियो की जगह एक छोटी-सी फ़ाइल। इसी से इस पेज के ऊपर वाला डेमो चलता है।
आपको हर एनिमेशन 1080 × 1080 MP4 में मिलता है, साथ में 1080 × 1920 का लॉन्च वीडियो। App Previews को Apple के तय डिवाइस रेज़ोल्यूशन से मेल खाना चाहिए और उनमें ऐप की असली फ़ुटेज होनी चाहिए, इसलिए इन क्लिप को सीधे प्रीव्यू के रूप में नहीं, बल्कि अपने ऐप की स्क्रीन रिकॉर्डिंग के अंदर इस्तेमाल करें।
क्या मैं Rive SDK जोड़े बिना मैस्कॉट इस्तेमाल कर सकता हूँ?
हाँ। AVPlayer के साथ ट्रांसपेरेंट HEVC MOV इस्तेमाल करें, या MP4 और GIF फ़ाइलें। इसमें लाइव स्टेट स्विचिंग नहीं मिलती, लेकिन हर एनिमेशन फ़ाइल के रूप में मौजूद रहता है।
क्या डिलीवर की गई .riv फ़ाइल UIKit ऐप में इस्तेमाल हो सकती है?
हाँ। वही .riv UIKit में RiveViewModel के view या RiveView के ज़रिए चलती है; डिलीवर किया गया कोड SwiftUI में है, और स्टेट मशीन के नाम और इनपुट बिल्कुल वही रहते हैं।
क्या मैस्कॉट विजेट या Live Activity में दिख सकता है?
लाइव Rive फ़ाइल
