O motor de movimento Ichava
Anime qualquer SVG com uma classe, um atributo data ou uma chamada. Experimente cada predefinição nos ícones deste site e copie o código.
O js-motion num parágrafo
O @ichava/js-motion é um motor de animação para ícones e ilustrações SVG, independente de framework e orientado por JSON. Não tem dependências em tempo de execução: reproduz as predefinições com a Web Animations API, e as famílias base também existem como keyframes CSS, por isso um ícone pode mexer-se sem JavaScript nenhum.
É o motor por trás do movimento desta página e do navegador de ícones, e é código aberto no GitHub. Instala-se a partir de um commit git fixado e traz os ficheiros compilados com um hash para cada um, por isso nada é compilado na instalação.
Tudo o que o motor faz
De uma única classe CSS a uma ilustração em camadas que percorre quadro a quadro.
240 predefinições, 40 famílias
Spin, pulse, heartbeat, bounce, swing, glow, draw e mais, cada uma em seis variantes: normal, inversa, subtil e forte. O dist/presets.json lista todas.
Um só controlo para um grupo
Reveal, cascade, assemble, parallax e draw animam cada camada de forma escalonada. play() devolve um controlo com seek(), reverse() e uma promessa finished para todas as camadas.
Pausar, parar e destruir
pauseAll(), resumeAll() e stopAll() chegam a tudo o que um motor iniciou. Entregue-lhe o seu botão de pausa para o WCAG 2.2.2 e use destroy() num motor próprio criado com create().
Cada camada roda sobre a sua caixa
Cada camada animada recebe transform-box: fill-box, por isso uma escala ou rotação gira sobre a própria camada, e cancel() repõe todos os estilos que definiu.
Movimento reduzido respeitado
Respeita prefers-reduced-motion e um [data-reduce-motion] do anfitrião, e para o que está a correr quando a preferência muda com a página aberta.
Uma compilação com integridade fixada
O dist/integrity.json traz um sha384 para cada ficheiro compilado, pronto para o atributo integrity quando aloja o script.
Três formas de animar
Uma classe CSS sem JavaScript, atributos data-* ligados por auto(), ou play() e animate() no código, com qualquer curva, velocidade, atraso e número de repetições.
Sem dependências
Web Animations com alternativa CSS, sem scripts em linha e sem transferências. A importação Lottie é opcional, e o seu modo completo fica desligado até aceitar o risco.
Configurável e extensível
Registe as suas próprias predefinições, curvas, famílias e variantes, por motor, para que duas integrações na mesma página nunca partilhem definições.
Experimente com os ícones deste site
Escolha um ícone, uma predefinição e as opções; depois reproduza, pause, percorra, inverta e pare. O código abaixo corresponde sempre ao que vê.
As famílias de grupo (marcadas com *) animam as camadas de um SVG, por isso correm no exemplo em camadas.
import IchavaMotion from '@ichava/js-motion';
import '@ichava/js-motion/css';
// An engine of your own: destroy() then cannot reach another embed’s animations.
const motion = IchavaMotion.create();
const handle = motion.play(document.querySelector('#icon'), 'heartbeat', {
speed: 1,
easing: 'ease-in-out',
iterations: 'infinite',
});
handle?.pause();
handle && (handle.currentTime = 400);
handle?.reverse();
await handle?.finished;
motion.destroy(); // unwire and stop everything this engine started
<!-- or declaratively, wired by motion.auto(root) -->
<svg data-ichava-motion="heartbeat" data-motion-trigger="load" data-motion-speed="1" data-motion-easing="ease-in-out" data-motion-iterations="infinite">…</svg>Adicione-o ao seu projeto
Não está no npm: instale-o a partir do GitHub no commit abaixo. Depois escolha o nível de que precisa.
{
"dependencies": {
"@ichava/js-motion": "github:ichava/js-motion#66b2773213dbbebdcf30932f4efc2061fc6fa521"
}
}Mude o estilo de qualquer pacote de linhas, ao vivo
Os tratamentos mudam a forma como um ícone de linhas é pintado sem mudar o ficheiro: cada ícone continua a ser o mesmo SVG.
| Ícone | Stroke | Solid | Dual | Mid | Half |
|---|---|---|---|---|---|
| rocket | |||||
| heart | |||||
| camera | |||||
| accessible |
- Cinco tratamentos: Stroke, Solid, Dual tone, Midtone e Halftone.
- Aplicados ao vivo, ao pacote inteiro de uma vez, na área de testes acima e no navegador de ícones.
- As bandeiras e os emoji a cores mantêm as suas próprias cores.
- No navegador de ícones, um controlo da espessura do traço e código pronto a copiar para cada tratamento.
Veja o interior do navegador de ícones
O Ichava DevTools é uma gaveta dentro do navegador de ícones para quem constrói com ele.
- Separadores Events, State, Storage, Logs e Boot, mais os testes do próprio navegador.
- Um separador Status para os utilizadores com a capacidade ichava.admin.
- Encaixa em qualquer margem da janela e abre com ⇧⌘D.
- Vem nas compilações de depuração com a funcionalidade devtools ligada; as de produção não o incluem.
Leia o guia completo
Cada opção, cada família e o nível Lottie estão documentados no repositório.