Um mascote animado para o seu app iOS, com código SwiftUI.
Você envia uma imagem e recebe um arquivo Rive que suas views SwiftUI controlam com um número de humor (mood) e triggers, arquivos SwiftUI prontos para o runtime legado e para o novo runtime da Apple, MOV HEVC com fundo transparente para AVFoundation, Keynote e Final Cut, e uma animação de abertura para a sua primeira tela.
Este é o .riv real que nosso motor entrega, rodando no seu navegador. É a mesma state machine que você controla no seu app com um input numérico e um trigger para cada reação única.
Como adicionar um mascote animado no SwiftUI?
Adicione o pacote Swift do Rive, coloque o .riv do mascote no seu bundle e exiba-o com RiveViewModel(fileName:stateMachineName:).view(). Defina um input numérico como mood para trocar os loops e dispare triggers para as reações únicas, ou use o runtime da Apple do Rive com Data Binding. Os conjuntos do Charmotion vêm com arquivos SwiftUI prontos para os dois runtimes.
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"
}
Versão resumida do arquivo entregue, que nomeia a view, o enum de humor e as reações com o nome do seu personagem.
Os dois runtimes da Apple
{Name}View.swift usa o RiveViewModel legado com inputs da state machine. {Name}NewRuntimeView.swift usa o novo runtime assíncrono com Data Binding pelo view model Character.
Launch screen
Uma LaunchStateMachine separada toca a intro de 2,6 s uma vez e para no idle. Mostre-a na sua primeira tela, depois da launch screen estática. Ela não dispara nenhum evento de conclusão, então ajuste a transição à duração da intro.
Respeite o Reduzir Movimento
Verifique accessibilityReduceMotion e mantenha o mascote no idle (ou em uma imagem estática) para quem pede menos movimento.
Resultado real
Arquivos entregues, exatamente como você os baixaria.
MP4 Todo conjunto
1080 × 1080 a 60 fps. Aqui: o wave do Gummo, de um conjunto entregue.
WebM & MOV transparentes Todo conjunto
Canal alfa incluído, por isso o quadriculado aparece por trás. O MOV é HEVC com alfa para apps e editores da Apple.
GIF Todo conjunto
Prévias leves para documentação, e-mail e chat. O loop “thinking” do Kiko.
Vídeo de abertura 9:16 Todo conjunto
1080 × 1920 para stories e splash screens. A intro de abertura do Sizzle.
kiko.riv · 150 KB
CharacterStateMachine
input numérico mood 0 a 9: idle, happy, wave, thinking, sad, loading, listening, talking, sleeping, attention triggers: success · error · yes · no · enter · exit
LaunchStateMachine
launch → idle, toca uma vez
State machine do Rive Todo conjunto
Um único arquivo pequeno no lugar de 17 vídeos. É ele que faz funcionar a demo no topo desta página.
Componentes para web, React e SwiftUI com o nome do seu personagem.
Formatos incluídos em cada plano
Formato
Especificações
Ideal para
Starter & All in one
MP4
1080 × 1080, 60 fps, todas as 17 animações
Apps, redes sociais, apresentações, vídeos de produto
Incluído
Vídeo de abertura 9:16
MP4 1080 × 1920
Stories, Reels, splash screens
Incluído
GIF
Prévias de 480 px, fundo sólido
Documentação, e-mail, chat, README
Incluído
Rive (.riv)
Vetorial; view model com Data Binding + inputs legados: mood para os loops, triggers para as reações únicas e uma state machine para a intro de abertura
Apps e sites interativos (web, iOS, Android, Flutter)
Incluído
WebM com fundo transparente
VP9 com canal alfa, 1080 × 1080
Sobreposições na web sobre qualquer fundo
Incluído
MOV com fundo transparente
HEVC com canal alfa
Final Cut, Keynote, iOS, Safari
Incluído
Código
Componentes para web (HTML), React e SwiftUI
Cole e publique
Incluído
Baixar tudo (.zip)
Arquivo Rive, código, README e pôsteres em um só arquivo
Entrega para o seu time
Incluído
Exportação de vídeo
MP4, GIF, WebM e MOV transparentes, 9:16: escolha formatos e animações na página do conjunto, prontos em cerca de um minuto
Comece grátis. Faça upgrade quando precisar de mais.
Código SwiftUI, o .riv e o MOV HEVC com alfa estão em todos os planos pagos, a partir do Starter (US$ 20/mês). Preços em USD; os impostos são calculados no checkout pela Creem.
Você recebe todas as animações em MP4 de 1080 × 1080, além de um vídeo de abertura de 1080 × 1920. As App Previews precisam seguir as resoluções exatas de cada dispositivo definidas pela Apple e mostrar imagens reais do app, então use esses clipes dentro de uma gravação de tela do seu app, e não como a prévia em si.
Posso usar o mascote sem adicionar o SDK do Rive?
Sim. Use o MOV HEVC com fundo transparente com o AVPlayer, ou os arquivos MP4 e GIF. Você perde a troca de estados em tempo real, mas todas as animações estão disponíveis como arquivo.
Posso usar o .riv entregue em um app UIKit?
Sim. O mesmo .riv toca no UIKit pela view do RiveViewModel ou pela RiveView; o código entregue é SwiftUI, e os nomes da state machine e os inputs são idênticos.
O mascote pode aparecer em um widget ou em uma Live Activity?
Arquivo Rive ao vivo
