O primo interativo do Lottie — animação vetorial com "máquina de estados" que já reage a hover/clique sozinha.
O que é
Arquivos .riv (feitos em rive.app) trazem uma máquina de estados embutida — o personagem/botão já sabe reagir a interação, sem você programar a animação na mão.
Como funciona
Tem que ser um <canvas> (não uma <div>). A biblioteca do Rive também não vem no framework.
Exemplos
Instalação — e por que tem que ser <canvas> Ao vivo
O Rive desenha num <canvas>: numa <div> não funciona. A biblioteca também é de terceiros e não vem no pacote.
Sem a lib e sem um arquivo .riv real, não haveria o que demonstrar aqui — o código ao lado é o completo.
<!-- 1) a biblioteca -->
<script src="https://unpkg.com/@rive-app/canvas@2/rive.js"></script>
<!-- 2) a animação — precisa ser <canvas> -->
<canvas sw-ani="rive"
sw-ani-src="/arquivo.riv"
data-sw-machine="State Machine 1"></canvas>
A máquina de estados — o diferencial Ao vivo
No Lottie, a animação é uma fita: toca do começo ao fim. No Rive, o arquivo carrega uma máquina de estados feita no rive.app — o botão já sabe sozinho como sair de "parado" pra "hover", pra "clicado" e voltar.
O nome da máquina é definido lá no editor; é ele que você informa em data-sw-machine.
<canvas sw-ani="rive"
sw-ani-src="/botao.riv"
data-sw-machine="State Machine 1"></canvas>
<!-- data-sw-state-machine é aceito como sinônimo -->
<canvas sw-ani="rive" sw-ani-src="/botao.riv"
data-sw-state-machine="State Machine 1"></canvas>
<!-- ERRADO: sw-ani-machine não é lido -->
<canvas sw-ani="rive" sw-ani-machine="State Machine 1"></canvas>
Sem tocar sozinho, e runtime próprio Ao vivo
Por padrão a animação começa ao carregar. Em página com muitas peças, ou quando a animação deve esperar uma ação, desligue o autoplay. O data-sw-wasm só é necessário se você hospeda o runtime no seu próprio servidor.
