El motor de movimiento de Ichava
Anima cualquier SVG con una clase, un atributo data o una llamada. Prueba cada ajuste con los iconos de este sitio y copia el código.
js-motion en un párrafo
@ichava/js-motion es un motor de animación para iconos e ilustraciones SVG, independiente de cualquier framework y guiado por JSON. No tiene dependencias en tiempo de ejecución: reproduce los ajustes con la Web Animations API, y sus familias básicas también se publican como keyframes CSS, así que un icono puede moverse sin nada de JavaScript.
Es el motor detrás del movimiento de esta página y del navegador de iconos, y es de código abierto en GitHub. Se instala desde un commit de git fijado y trae sus archivos compilados con un hash para cada uno, así que nada se compila al instalarlo.
Todo lo que hace el motor
De una sola clase CSS a una ilustración por capas que puedes recorrer fotograma a fotograma.
240 ajustes, 40 familias
Spin, pulse, heartbeat, bounce, swing, glow, draw y más, cada uno en seis variantes: normal, inversa, sutil e intensa. dist/presets.json los lista todos.
Un solo control para un grupo
Reveal, cascade, assemble, parallax y draw animan cada capa de forma escalonada. play() devuelve un control con seek(), reverse() y una promesa finished para todas las capas.
Pausar, detener y destruir
pauseAll(), resumeAll() y stopAll() alcanzan todo lo que un motor inició. Dale tu botón de pausa para WCAG 2.2.2 y usa destroy() en un motor propio creado con create().
Cada capa gira sobre su propia caja
Cada capa animada recibe transform-box: fill-box, así que una escala o una rotación pivota sobre la capa, y cancel() restaura todos los estilos que puso.
Respeta el movimiento reducido
Respeta prefers-reduced-motion y un [data-reduce-motion] del anfitrión, y detiene lo que se está reproduciendo si la preferencia cambia con la página abierta.
Una compilación con integridad fijada
dist/integrity.json incluye un sha384 de cada archivo compilado, listo para el atributo integrity cuando alojas el script tú mismo.
Tres formas de animar
Una clase CSS sin JavaScript, atributos data-* conectados por auto(), o play() y animate() desde el código, con cualquier curva, velocidad, retraso y número de repeticiones.
Sin dependencias
Web Animations con alternativa CSS, sin scripts en línea y sin descargas. La importación de Lottie es opcional, y su modo completo sigue apagado hasta que aceptes el riesgo.
Configurable y ampliable
Registra tus propios ajustes, curvas, familias y variantes, por motor, para que dos integraciones en una página nunca compartan configuración.
Pruébalo con los iconos de este sitio
Elige un icono, un ajuste y sus opciones; luego reproduce, pausa, recorre, invierte y detén la animación. El código de abajo siempre coincide con lo que ves.
Las familias de grupo (marcadas con *) animan las capas de un SVG, así que se reproducen en la muestra por capas.
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>Añádelo a tu proyecto
No está en npm: instálalo desde GitHub en el commit de abajo. Después elige el nivel que necesites.
{
"dependencies": {
"@ichava/js-motion": "github:ichava/js-motion#66b2773213dbbebdcf30932f4efc2061fc6fa521"
}
}Cambia el estilo de cualquier paquete de líneas, en vivo
Los tratamientos cambian cómo se pinta un icono de líneas sin cambiar el archivo: cada icono sigue siendo el mismo SVG.
| Icono | Stroke | Solid | Dual | Mid | Half |
|---|---|---|---|---|---|
| rocket | |||||
| heart | |||||
| camera | |||||
| accessible |
- Cinco tratamientos: Stroke, Solid, Dual tone, Midtone y Halftone.
- Se aplican en vivo, a todo el paquete a la vez, en la zona de pruebas de arriba y en el navegador de iconos.
- Las banderas y los emoji a color conservan sus propios colores.
- En el navegador de iconos, un control de grosor de trazo y código listo para copiar en cada tratamiento.
Mira por dentro el navegador de iconos
Ichava DevTools es un panel dentro del navegador de iconos para quienes construyen con él.
- Pestañas Events, State, Storage, Logs y Boot, además de las pruebas propias del navegador.
- Una pestaña Status para los usuarios con la capacidad ichava.admin.
- Se acopla a cualquier borde de la ventana y se abre con ⇧⌘D.
- Viene en las compilaciones de depuración con la función devtools activada; las de producción no la incluyen.
Lee la guía completa
Cada opción, cada familia y el nivel de Lottie están documentados en el repositorio.