SW Core / Animações / Rive

Rive Animações

Animações interativas feitas no Rive: o arquivo já sabe como reagir (parado, hover, clique) — o SW Core só coloca na página. sw-ani="rive" num <canvas>.

O que é

O Rive (rive.app) é uma ferramenta de animação em que o designer desenha e também define como a animação reage: qual movimento toca parado, qual toca no hover, no clique, quando um valor muda. Isso fica guardado no arquivo .riv numa "máquina de estados". Com o SW Core você coloca esse arquivo na página com um atributo e escolhe a máquina de estados pelo nome.

Tem que ser um <canvas> (área de desenho). A biblioteca do Rive (@rive-app/canvas) não vem no SW Core: você coloca uma linha a mais na página — se ela chegar depois, o SW Core espera até 8 segundos quando o canvas se aproxima da tela. O arquivo vai em sw-ani-src e o nome da máquina de estados em sw-ani-machine. A animação se ajusta ao tamanho do canvas sem distorcer.

Quando usar

Botão ou mascote que reage ao mouse e ao clique sem você programar a animação.
Ilustração viva no topo da página (personagem, produto girando).
Ícones animados com vários estados (ligado/desligado, carregando/pronto).
Se é só uma animação que toca do começo ao fim, o Lottie é mais simples.

Comece aqui

Coloque o SW Core, o pacote de animação e a biblioteca do Rive. O swcore.motion.min.js vem antes do swcore.min.js.

<!-- no <head> -->
<link rel="stylesheet" href="swcore/swcore.min.css">
<link rel="stylesheet" href="swcore/swcore.motion.min.css">

<!-- no fim do <body> -->
<script src="https://cdn.jsdelivr.net/npm/@rive-app/canvas@2.43.1/rive.js"></script>
<script src="swcore/swcore.motion.min.js"></script>
<script src="swcore/swcore.min.js"></script>

2
Crie um <canvas> com tamanho, sw-ani="rive" e o arquivo. Este é o caminhão de exemplo do próprio Rive, rodando de verdade.
```
<canvas sw-ani="rive" sw-ani-src="/animacoes/caminhao.riv" class="w-fl ar-2-1"></canvas>
```

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

1. Jeitos de tocar

Os quadros usam o arquivo público de exemplo do Rive (vehicles.riv). Sem máquina de estados, toca a animação principal do arquivo. Com sw-ani-machine, quem manda é a máquina que o designer montou. Com sw-ani-autoplay="false", fica parado esperando.

Só o arquivo — animação principal <canvas sw-ani="rive" sw-ani-src="https://cdn.rive.app/animations/vehicles.riv" class="w-fl ar-2-1"></canvas>

sw-ani-machine="bumpy" — com a máquina de estados

<canvas sw-ani="rive" sw-ani-src="https://cdn.rive.app/animations/vehicles.riv"
        sw-ani-machine="bumpy" class="w-fl ar-2-1"></canvas>

sw-ani-autoplay="false" — parado

<canvas sw-ani="rive" sw-ani-src="https://cdn.rive.app/animations/vehicles.riv"
        sw-ani-autoplay="false" class="w-fl ar-2-1"></canvas>

2. Acionando a máquina de estados

A máquina "bumpy" deste arquivo tem um gatilho chamado bump (o caminhão dá um solavanco). O SW Core chama a sua função _swRiveOnLoad quando o arquivo carrega, entregando o player do Rive — daí você liga o gatilho a um clique. Clique no caminhão.

Clique no caminhão — dispara o "bump"

<canvas id="caminhao" sw-ani="rive" sw-ani-src="https://cdn.rive.app/animations/vehicles.riv"
        sw-ani-machine="bumpy" class="w-fl ar-2-1 poi"></canvas>

<script>
  // o SW Core chama esta função quando o .riv termina de carregar
  document.getElementById('caminhao')._swRiveOnLoad = function (player) {
    var bump = player.stateMachineInputs('bumpy').find(function (i) { return i.name === 'bump'; });
    player.canvas.addEventListener('click', function () { bump && bump.fire(); });
  };
</script>

Tabela de opções

Palavra	O que faz	Exemplo
Ligar e arquivo
`sw-ani="rive"`	Liga o Rive. Tem que ser num `<canvas>` (ou numa caixa com um `<canvas>` dentro).	`<canvas sw-ani="rive" …></canvas>`
`sw-ani-src`	Endereço do arquivo `.riv`.	`sw-ani-src="/animacoes/botao.riv"`
Como toca
`sw-ani-machine`	Nome da máquina de estados, exatamente como está no editor do Rive (maiúsculas e espaços contam).	`sw-ani-machine="State Machine 1"`
`sw-ani-state-machine`	Mesma coisa, nome alternativo.	`sw-ani-state-machine="State Machine 1"`
`sw-ani-autoplay="false"`	Não começa sozinho. Padrão: começa ao carregar.	`sw-ani-autoplay="false"`
Avançado
`sw-ani-wasm`	Endereço do "motor" do Rive (`rive.wasm`) se você hospeda ele no seu servidor. Sem isso, a biblioteca busca sozinha na internet.	`sw-ani-wasm="/vendor/rive.wasm"`
`elemento._swRiveOnLoad`	Função sua que o SW Core chama quando o arquivo carrega, recebendo o player do Rive (veja o quadro 2).	`el._swRiveOnLoad = function (player) { … }`

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

Botão animado do topo da página Referência

<a href="/contato" class="blk">
  <canvas sw-ani="rive" sw-ani-src="/animacoes/botao-contato.riv"
          sw-ani-machine="State Machine 1" class="w-fl ar-2-1"></canvas>
  <span class="sw-sr-only">Fale com a gente</span>
</a>
<!-- o hover e o clique são desenhados no Rive; o SW Core só coloca na página -->

Parar e tocar por JavaScript Referência

<canvas id="mascote" sw-ani="rive" sw-ani-src="/animacoes/mascote.riv"
        sw-ani-autoplay="false" class="w-fl ar-2-1"></canvas>
<button sw-btn="pri" id="acordar">Acordar o mascote</button>

<script>
  document.getElementById('acordar').addEventListener('click', () => {
    document.getElementById('mascote')._swRive.play();   // o player já montado
  });
</script>

Motor do Rive hospedado no seu servidor Referência

<canvas sw-ani="rive" sw-ani-src="/animacoes/logo.riv"
        sw-ani-wasm="/vendor/rive.wasm" class="w-fl ar-2-1"></canvas>

API (JavaScript)

elemento._swRive

O player do Rive daquele canvas, já montado. Use os comandos dele: play(), pause(), stateMachineInputs(nome).

elemento._swRiveOnLoad = fn

Defina antes de a página terminar de carregar: o SW Core chama fn(player) quando o .riv carrega.

SWMotion.rive(elemento)

Monta o Rive num canvas que entrou na página depois do carregamento. O canvas precisa ter data-sw-src (e data-sw-machine, se usar); devolve o player.

SWMotion.refresh()

Reinicia todas as animações da página e enxerga os sw-ani="rive" novos.

Precisa de quê

swcore.motion.min.js e swcore.motion.min.css, antes do swcore.min.js.
A biblioteca @rive-app/canvas (de terceiros, não vem no SW Core): <script src="https://cdn.jsdelivr.net/npm/@rive-app/canvas@2.43.1/rive.js">.
Um arquivo .riv exportado do rive.app.

Cuidados — erros comuns

Em <div> não funciona: o Rive desenha num <canvas>.
Canvas sem tamanho fica minúsculo. Dê largura e altura (w-fl ar-2-1 ou pelo CSS).
O nome da máquina de estados tem que ser idêntico ao do editor. Errou uma letra? A animação não reage (o console do navegador mostra o erro do Rive).
Sem a biblioteca do Rive na página, nada aparece (o console avisa "Rive runtime (window.rive) não encontrado").
_swRiveOnLoad precisa ser definido antes de o arquivo carregar — coloque o script logo depois do canvas, não dentro de um clique.

O que ele não faz

Quem ativou "reduzir movimento" no sistema vê o Rive parado no quadro inicial (não toca sozinho). sw-ani-force faz tocar mesmo assim; o _swRive.play() por JavaScript continua funcionando.
Os estados, hovers e cliques são do arquivo .riv: para mudar o comportamento, edite no rive.app.

← AnteriorLottie Próximo →Countdown