Rive: o que é, ferramenta de animação para Flutter e iOS

O que é Rive?

Rive (anteriormente Rive.app, fundada em 2016) é um editor gráfico e runtime multiplataforma para animação vetorial interativa. Ao contrário do After Effects + Bodymovin (Lottie), o Rive fornece um ambiente unificado: o designer desenha, anima e configura a lógica de transição diretamente no editor. O resultado é exportado para um arquivo binário .riv que pesa de 2 a 50 KB dependendo da complexidade.

A principal diferença do Rive em relação a outras soluções é a State Machine. É um grafo visual onde os nós são animações (Idle, Hover, Press, Active), e as transições entre eles são ativadas por gatilhos (Touch, Drag, Boolean). O desenvolvedor simplesmente envia gatilhos no código, e o RiveRuntime decide qual animação reproduzir e como alternar suavemente entre elas. De acordo com a Rive Engineering (2026), a animação .riv média com State Machine ocupa 15 KB — 5 a 10 vezes menos que um arquivo de vídeo equivalente.

Rive Runtime está disponível para Flutter, iOS (Swift), Android (Kotlin/Java), Web (WASM) e React. A renderização é feita via Skia (Flutter/Web), Core Graphics (iOS) ou Canvas (Android). O Rive suporta animação de formas (Knob, Slider, Button com geometria personalizada), permitindo criar componentes de UI totalmente animados, não apenas animações decorativas.

Rive vs Lottie: comparação de abordagens

Rive e Lottie resolvem tarefas diferentes. Lottie é um player para animação pronta do After Effects, ideal para efeitos decorativos passivos. Rive é uma ferramenta para criar animações interativas com lógica própria, onde a animação responde às ações do usuário. A escolha depende do nível de interatividade necessário.

Quando escolher Rive: botões interativos com resposta ao pressionar, elementos de jogo (personagens com estados), interruptores animados, ícones dinâmicos que reagem ao status. Quando escolher Lottie: preloaders, curtidas, telas de boas-vindas, animações de acento sem lógica. Para projetos Flutter, o Rive é a escolha preferida devido à integração nativa com Skia e o pipeline de renderização do Flutter.

Integração do Rive no Flutter (Dart)

No Flutter, RiveAnimation é o widget principal para incorporar arquivos .riv. Está disponível através do pacote rive (oficial). RiveAnimation suporta argumentos: artboard (seleção de prancheta), animation (nome da animação), fit, alignment, controllers (para State Machine). Para cenas interativas, é usado StateMachineController.

import 'package:rive/rive.dart';

// Reprodução simples de animação
RiveAnimation.asset(
  'assets/animations/button.riv',
  artboard: 'Button',
  animations: const ['idle'],
  fit: BoxFit.contain,
)

// StateMachineController com gatilhos
class InteractiveButton extends StatefulWidget {
  @override
  State<InteractiveButton> createState() => _InteractiveButtonState();
}

class _InteractiveButtonState extends State<InteractiveButton> {
  StateMachineController? _controller;
  SMIInput<bool>? _isPressed;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTapDown: (_) => _isPressed?.value = true,
      onTapUp: (_) => _isPressed?.value = false,
      child: RiveAnimation.asset(
        'assets/animations/button.riv',
        fit: BoxFit.contain,
        onInit: (artboard) {
          _controller = StateMachineController.fromArtboard(
            artboard, 'State Machine 1',
          );
          if (_controller != null) {
            artboard.addController(_controller!);
            _isPressed = _controller!.findInput<bool>('isPressed');
          }
        },
      ),
    );
  }
}

Melhores práticas no Flutter: carregue arquivos .riv de forma assíncrona via RiveAnimation.asset (AssetBundle incorporado). Para listas (ListView), use um único StateMachineController reutilizado entre itens. O Rive não requer mais importações separadas — rive v0.12+ inclui todos os recursos. Para animação personalizada, controle o RiveAnimationController diretamente — ele fornece acesso a animações, mesclagem (blend) e velocidade.

Integração do Rive no iOS (Swift)

No iOS, RiveRuntime é representado pela classe RiveView (UIKit) e RiveViewModel (SwiftUI). A biblioteca é conectada via Swift Package Manager. RiveView renderiza arquivos .riv via Core Graphics e Metal, suportando 120 FPS em telas ProMotion. Para State Machine, é usado RiveStateMachineLayer com vinculação de gatilhos.

import RiveRuntime

// SwiftUI: RiveViewModel com animação
struct RiveAnimationView: View {
    @State private var isPressed = false

    var body: some View {
        RiveViewModel(fileName: "button").view()
            .frame(width: 200, height: 60)
            .gesture(
                DragGesture(minimumDistance: 0)
                    .onChanged { _ in
                        if !isPressed {
                            isPressed = true
                            // Gatilho via State Machine
                        }
                    }
                    .onEnded { _ in
                        isPressed = false
                    }
            )
    }
}

// UIKit: RiveView com controle manual
let riveView = RiveView()
riveView.configure(fileName: "loading", extension: "riv")
riveView.fit = .contain
riveView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
view.addSubview(riveView)

// Gerenciamento de State Machine
riveView.triggerInput(named: "startAnimation")

Melhores práticas no iOS: use RiveViewModel para SwiftUI — ele gerencia automaticamente o ciclo de vida. Para UIKit, inscreva-se no RiveViewDelegate para rastreamento de eventos. O Rive consome menos CPU que o Lottie no iOS graças à renderização via Core Graphics. Para animações em NavigationView/UICollectionView, use pré-carregamento via RiveFile.preload().

Integração do Rive no Android (Kotlin)

No Android, RiveAnimationView é a View principal para incorporar animações .riv. A biblioteca app.rive:rive-android é conectada via Gradle. RiveAnimationView herda de View e renderiza via Canvas com suporte a aceleração de hardware. State Machine é gerenciada através de setTriggers e setInputs.

// build.gradle.kts
implementation("app.rive:rive-android:0.9.0")

// XML layout
<app.rive.RiveAnimationView
    android:id="@+id/riveView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:rive_file="@raw/mascot"
    app:rive_artboard="Mascot"
    app:rive_animation="idle" />

// Kotlin: gerenciamento de State Machine
import app.rive.riveandroid.RiveAnimationView
import app.rive.riveandroid.StateMachineInput

val riveView = findViewById<RiveAnimationView>(R.id.riveView)
riveView.post {
    riveView.setTriggers("hover")     "> Envio de trigger para a State Machine
    riveView.setInput("speed", 1.5f)
    riveView.setInput("isActive", true)
    riveView.play()
}

// Manipulação de conclusão de animação
riveView.addListener(object : RiveAnimationView.RiveListener() {
    override fun onAnimationCompleted(animationName: String) {
        Log.d("Rive", "Animation $animationName completed")
    }
})

Melhores práticas no Android: carregue arquivos .riv via res/raw (recursos incorporados) ou assets (carregamento por rede). RiveAnimationView gerencia automaticamente o ciclo de vida — não chame play/pause manualmente em onResume/onPause. Para animações em RecyclerView, use setOnScrollListener para pausar a reprodução durante a rolagem. De acordo com a documentação do Rive (2026), arquivos .riv de até 100 KB são analisados em 5–10 ms em dispositivos de médio porte.

State Machine: lógica de transições no Rive

State Machine é um recurso chave do Rive que o diferencia dos formatos de animação passiva. É um grafo visual onde os vértices são estados (animações) e as arestas são transições ativadas por gatilhos. A State Machine é criada no Rive Editor: o designer adiciona nós de animação, conecta-os com linhas e atribui gatilhos (Touch, Boolean, Number). O desenvolvedor só precisa enviar esses gatilhos do código.

// Flutter: controle total sobre State Machine
import 'package:rive/rive.dart';

class RiveStateMachineWidget extends StatefulWidget {
  @override
  State<RiveStateMachineWidget> createState() => _RiveStateMachineWidgetState();
}

class _RiveStateMachineWidgetState extends State<RiveStateMachineWidget> {
  Artboard? _artboard;
  StateMachineController? _controller;
  SMIInput<bool>? _isHovered;
  SMIInput<double>? _progress;

  @override
  Widget build(BuildContext context) {
    return MouseRegion(
      onEnter: (_) => _isHovered?.value = true,
      onExit: (_) => _isHovered?.value = false,
      child: RiveAnimation.asset(
        'assets/interactive_icon.riv',
        onInit: (artboard) {
          _controller = StateMachineController.fromArtboard(
            artboard, 'State Machine 1',
          );
          artboard.addController(_controller!);
          _isHovered = _controller!.findInput<bool>('isHovered');
          _progress = _controller!.findInput<double>('progress');
        },
      ),
    );
  }
}

// Envio de valor numérico
SMIInput<double> speedInput = controller.findInput('speed');
speedInput?.value = scrollPosition;

Tipos de gatilhos: Boolean — interruptor (true/false), Number — valor numérico (0.0–1.0 ou intervalo arbitrário), Trigger — impulso único (pressionar botão). No Rive Editor, pode-se configurar a suavização de transição (Transition Duration) — valor recomendado 100–300 ms para suavidade. Para estados de UI complexos, use State Machines aninhadas (Nested State Machines) — cada parte da animação é gerenciada independentemente. A State Machine do Rive funciona em todas as plataformas sem alterações no arquivo .riv — a lógica de transição está embutida no arquivo, não no código do aplicativo.