Le moteur d’animation Ichava
Animez tout SVG avec une classe, un attribut data ou un appel. Essayez chaque préréglage sur les icônes de ce site, puis copiez le code.
js-motion en un paragraphe
@ichava/js-motion est un moteur d’animation pour icônes et illustrations SVG, indépendant de tout framework et piloté par JSON. Il n’a aucune dépendance à l’exécution : il joue ses préréglages avec la Web Animations API, et ses familles de base existent aussi en keyframes CSS, si bien qu’une icône peut bouger sans aucun JavaScript.
C’est le moteur derrière les animations de cette page et du navigateur d’icônes, et il est open source sur GitHub. Il s’installe depuis un commit git épinglé et livre ses fichiers compilés avec une empreinte pour chacun, donc rien ne se compile à l’installation.
Tout ce que fait le moteur
D’une seule classe CSS à une illustration en calques que vous parcourez image par image.
240 préréglages, 40 familles
Spin, pulse, heartbeat, bounce, swing, glow, draw et d’autres, chacun en six variantes : normale, inversée, subtile et marquée. dist/presets.json les liste tous.
Une seule poignée pour un groupe
Reveal, cascade, assemble, parallax et draw animent chaque calque en décalé. play() renvoie une poignée avec seek(), reverse() et une promesse finished pour tous les calques.
Pause, arrêt et destruction
pauseAll(), resumeAll() et stopAll() atteignent tout ce qu’un moteur a lancé. Confiez-lui votre bouton pause pour le WCAG 2.2.2, et appelez destroy() sur votre propre moteur créé par create().
Chaque calque pivote sur sa boîte
Chaque calque animé reçoit transform-box: fill-box : une mise à l’échelle ou une rotation pivote sur le calque, et cancel() remet tous les styles posés.
Le mouvement réduit respecté
Il respecte prefers-reduced-motion et un [data-reduce-motion] de l’hôte, et arrête ce qui tourne si le réglage change pendant que la page est ouverte.
Une compilation à intégrité épinglée
dist/integrity.json contient un sha384 pour chaque fichier compilé, prêt pour l’attribut integrity quand vous hébergez le script vous-même.
Trois façons d’animer
Une classe CSS sans JavaScript, des attributs data-* reliés par auto(), ou play() et animate() depuis le code, avec n’importe quelle courbe, vitesse, délai et nombre de répétitions.
Aucune dépendance
Web Animations avec repli CSS, aucun script en ligne, rien de téléchargé. L’import Lottie est un ajout optionnel, et son mode complet reste coupé tant que vous n’acceptez pas le risque.
Configurable et extensible
Enregistrez vos propres préréglages, courbes, familles et variantes, par moteur, pour que deux intégrations sur une page ne partagent jamais leurs réglages.
Essayez-le sur les icônes de ce site
Choisissez une icône, un préréglage et ses options, puis lancez, mettez en pause, parcourez, inversez et arrêtez. Le code ci-dessous correspond toujours à ce que vous voyez.
Les familles de groupe (marquées *) animent les calques d’un SVG ; elles jouent donc sur l’exemple en calques.
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>Ajoutez-le à votre projet
Il n’est pas sur npm : installez-le depuis GitHub au commit ci-dessous, puis choisissez le niveau qu’il vous faut.
{
"dependencies": {
"@ichava/js-motion": "github:ichava/js-motion#66b2773213dbbebdcf30932f4efc2061fc6fa521"
}
}Restylez tout jeu d’icônes au trait, en direct
Les traitements changent la façon dont une icône au trait est peinte sans changer le fichier : chaque icône reste le même SVG.
| Icône | Stroke | Solid | Dual | Mid | Half |
|---|---|---|---|---|---|
| rocket | |||||
| heart | |||||
| camera | |||||
| accessible |
- Cinq traitements : Stroke, Solid, Dual tone, Midtone et Halftone.
- Appliqués en direct, à tout le jeu d’un coup, dans le bac à sable ci-dessus et dans le navigateur d’icônes.
- Les drapeaux et les emoji en couleur gardent leurs propres couleurs.
- Dans le navigateur d’icônes, un réglage d’épaisseur du trait et du code prêt à copier pour chaque traitement.
Voyez l’intérieur du navigateur d’icônes
Ichava DevTools est un tiroir dans le navigateur d’icônes pour celles et ceux qui construisent avec lui.
- Onglets Events, State, Storage, Logs et Boot, plus les autotests du navigateur.
- Un onglet Status pour les utilisateurs qui ont la capacité ichava.admin.
- Se fixe sur n’importe quel bord de la fenêtre et s’ouvre avec ⇧⌘D.
- Présent dans les compilations de débogage avec la fonction devtools activée ; les compilations de production ne l’incluent pas.
Lisez le guide complet
Chaque option, chaque famille et le niveau Lottie sont documentés dans le dépôt.