Rive no SWCore — documentação e exemplos

O que é

Diferente de uma timeline tradicional que apenas avança ou volta frames, o Rive executa uma máquina de estados (State Machine) inteligente dentro do arquivo .riv. A página altera uma entrada nomeada (booleano, número ou gatilho) e o arquivo decide de forma autônoma como transicionar entre poses, expressões e movimentos.

Como funciona

O fluxo é dividido em 4 etapas: 1. O usuário interage com a interface; 2. O JavaScript define o valor de uma entrada (ex.: Level = 2 ou bump.fire()); 3. A máquina de estados avalia as condições internas; 4. O Rive renderiza a transição suave no <canvas> em tempo real.

Exemplos

00 · O Vocabulário da Máquina de Estados (3 Tipos de Entradas) Ao vivo

BOOLEANO (T/F)

Pergunta: Está ligado?

isHovered = true

Ex.: hover, menu aberto, modo escuro.

NÚMERO (0…N)

Pergunta: Qual o valor?

level = 2

Ex.: nível de habilidade, progresso, estágio.

GATILHO (TRIGGER)

Pergunta: Aconteceu agora?

bump.fire()

Ex.: solavanco, clique/like, impacto único.

<!-- 
  Os 3 Tipos de Entrada no Rive:
  1. Booleano (T/F) : Está ligado ou desligado? (isHovered, active)
  2. Número (0...N) : Qual o valor ou estágio? (level = 2)
  3. Gatilho (Trigger) : Aconteceu agora? (bump.fire())
-->

01 · Laboratório Oficial: Entrada Numérica (skills.riv · State Machine "Designer's Test") Ao vivo

ARQUIVO OFICIAL · SKILLS.RIV

Controle da Máquina "Designer's Test"

CARREGANDO RIVE WASM…

Iniciante (Level 0) Idle

TELEMETRIA DA STATE MACHINE

RUNTIME:Rive 2.40.0 (WASM)

ARQUIVO:skills.riv (79 KB)

ENTRADA ATIVA:Level = 0

RENDER:Canvas 2D / GPU

ÚLTIMO EVENTO REGISTRADO:

Aguardando inicialização da máquina…

Definir Entrada Level:

<!-- Controle de nível com máquina de estados real do Rive -->
<canvas id="rive-main-canvas" style="width: 100%; height: 260px;"></canvas>

<script>
  window.rive.RuntimeLoader.setWasmUrl('../../vendor/rive.wasm');
  const player = new window.rive.Rive({
    src: '../../assets/rive/skills.riv',
    canvas: document.getElementById('rive-main-canvas'),
    autoplay: true,
    stateMachines: "Designer's Test",
    onLoad: () => {
      const inputs = player.stateMachineInputs("Designer's Test");
      const level = inputs.find(i => i.name === "Level");
      level.value = 2; // Transiciona visualmente para o estágio 2
    }
  });
</script>

02 · Entradas Booleanas e Gatilhos (skills.riv & vehicles.riv) Ao vivo

1. ENTRADA BOOLEANA

State Machine 1 (skills.riv)

Alterna entre dois estados booleanos (Intermediate vs Expert).

Intermediate = true

2. GATILHO (TRIGGER)

Gatilho bump (vehicles.riv)

Dispara um solavanco na suspensão que não fica travado ligado.

Clique para disparar o gatilho

<!-- Comparativo das outras 2 formas de controle do Rive -->
<!-- 1. Entrada Booleana (skills.riv -> State Machine 1) -->
<canvas id="rive-bool-canvas"></canvas>

<!-- 2. Gatilho / Trigger (vehicles.riv -> State Machine bumpy -> bump.fire()) -->
<canvas id="rive-trigger-canvas"></canvas>

03 · Uso Declarativo no HTML (data-sw="rive") Ao vivo

CANVAS DECLARATIVO DATA-SW

Inicializado automaticamente pelo SWCore

<!-- Inicialização declarativa com atributo data-sw="rive" -->
<canvas 
  data-sw="rive"
  data-sw-src="../../assets/rive/skills.riv"
  data-sw-machine="Designer's Test"
  data-sw-wasm="../../vendor/rive.wasm"
  style="width: 220px; height: 220px; margin: 0 auto; display: block;">
</canvas>

04 · Consulta e Controle via API JavaScript (SWMotion.rive) Referência

// Instanciação programática com busca de entradas:
const canvas = document.querySelector('#meu-canvas');

const player = SWMotion.rive(canvas, {
  src: 'skills.riv',
  machine: "Designer's Test",
  wasm: 'rive.wasm'
});

// Acessando as entradas da State Machine:
player.onLoad = () => {
  const inputs = player.stateMachineInputs("Designer's Test");
  const level = inputs.find(i => i.name === 'Level');
  level.value = 2; // Muda de estado instantaneamente
};

Atributos

data-sw="rive"

no canvas ou container para inicializar o player Rive

data-sw-src="skills.riv"

caminho do arquivo vetorial .riv

data-sw-machine="Nome"

nome da máquina de estados (State Machine) a ser executada

data-sw-wasm="rive.wasm"

caminho do binário WebAssembly do runtime Rive

data-sw-autoplay

inicia a máquina de estados automaticamente

data-sw-fit="contain"

ajuste visual do canvas (contain, cover, fill)

Variantes

Entrada Numérica (0…N)

Define estágios, intensidade ou níveis (ex.: Level = 0, 1, 2 para alternar habilidades/veículos)

Entrada Booleana (T/F)

Liga ou desliga estados persistentes (ex.: isHovered = true, menu aberto, modo escuro)

Entrada de Gatilho (Trigger)

Dispara um evento instantâneo que não fica ligado (ex.: bump.fire() para solavancos, cliques, likes)

Eventos

onLoad

Disparado quando o arquivo .riv e as entradas da máquina de estados estão prontos

onStateChange

Disparado a cada transição de estado calculada pela máquina interna

API (JavaScript)

SWMotion.rive(canvas, options)

Inicializa programaticamente uma animação Rive no canvas.

player.stateMachineInputs("Nome")

Retorna o array de entradas controláveis daquela máquina de estados.

input.value = valor

Define o valor de uma entrada numérica ou booleana.

input.fire()

Dispara uma entrada de gatilho (trigger).

player.pause("Nome") / player.play("Nome")

Pausa ou retoma a execução da máquina de estados.

Requisitos

Canvas com ResizeObserver para reajustar o buffer de desenho na resolução exata da tela e evitar borrões.
Respeito automático a prefers-reduced-motion.

Limitações — o que ele não faz

A máquina de estados e as transições visuais devem ser desenhadas e configuradas no editor oficial do Rive antes de exportar o arquivo .riv.
Requer os binários vendor/rive-2.40.0.js e vendor/rive.wasm carregados na página.

Rive Animações