Die Ichava Motion-Engine
Animieren Sie jedes SVG mit einer Klasse, einem data-Attribut oder einem Aufruf. Testen Sie jedes Preset an den Symbolen dieser Website und kopieren Sie den Code.
js-motion in einem Absatz
@ichava/js-motion ist eine frameworkunabhängige, JSON-gesteuerte Animations-Engine für SVG-Symbole und Illustrationen. Sie hat keine Laufzeitabhängigkeiten: Presets laufen über die Web Animations API, und die Grundfamilien gibt es auch als reine CSS-Keyframes, sodass sich ein Symbol ganz ohne JavaScript bewegen kann.
Sie treibt die Bewegung auf dieser Seite und im Symbol-Browser an und ist Open Source auf GitHub. Sie wird von einem festgelegten Git-Commit installiert und liefert ihre gebauten Dateien mit je einem Hash aus, sodass bei der Installation nichts gebaut wird.
Alles, was die Engine kann
Von einer CSS-Klasse bis zur Illustration aus Ebenen, die Sie Bild für Bild durchspulen.
240 Presets, 40 Familien
Spin, Pulse, Heartbeat, Bounce, Swing, Glow, Draw und mehr, jeweils in sechs Varianten: normal, umgekehrt, dezent und kräftig. dist/presets.json listet alle.
Ein Handle für eine Gruppe
Reveal, Cascade, Assemble, Parallax und Draw animieren jede Ebene versetzt. play() gibt ein Handle mit seek(), reverse() und einem finished-Promise für alle Ebenen zurück.
Pausieren, stoppen, zerstören
pauseAll(), resumeAll() und stopAll() erreichen alles, was eine Engine gestartet hat. Übergeben Sie Ihren Pause-Knopf für WCAG 2.2.2 und rufen Sie destroy() auf einer eigenen Engine aus create() auf.
Ebenen drehen sich um ihre Box
Jede animierte Ebene erhält transform-box: fill-box, sodass Skalierung und Drehung um die Ebene selbst laufen, und cancel() stellt alle gesetzten Inline-Stile wieder her.
Reduzierte Bewegung respektiert
Sie beachtet prefers-reduced-motion und ein [data-reduce-motion] des Hosts und stoppt laufende Animationen, wenn sich die Einstellung bei geöffneter Seite ändert.
Ein Build mit festgelegter Integrität
dist/integrity.json enthält für jede gebaute Datei einen sha384, bereit für ein integrity-Attribut, wenn Sie das Skript selbst hosten.
Drei Wege zu animieren
Eine CSS-Klasse ohne JavaScript, data-*-Attribute, die auto() verbindet, oder play() und animate() im Code, mit beliebiger Kurve, Geschwindigkeit, Verzögerung und Wiederholung.
Keine Abhängigkeiten
Web Animations mit CSS-Fallback, keine Inline-Skripte, nichts wird nachgeladen. Der Lottie-Import ist optional, und sein Vollmodus bleibt aus, bis Sie das Risiko bestätigen.
Konfigurierbar und erweiterbar
Registrieren Sie eigene Presets, Kurven, Familien und Varianten pro Engine, damit zwei Einbettungen auf einer Seite nie Einstellungen teilen.
Testen Sie es an den Symbolen dieser Website
Wählen Sie ein Symbol, ein Preset und seine Optionen, dann abspielen, pausieren, spulen, umkehren und stoppen. Der Code darunter entspricht immer dem, was Sie sehen.
Die Gruppenfamilien (mit * markiert) animieren die Ebenen eines SVG und laufen daher auf dem Ebenen-Beispiel.
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>Fügen Sie sie Ihrem Projekt hinzu
Sie ist nicht auf npm: Installieren Sie sie von GitHub am unten genannten Commit. Dann wählen Sie die Stufe, die Sie brauchen.
{
"dependencies": {
"@ichava/js-motion": "github:ichava/js-motion#66b2773213dbbebdcf30932f4efc2061fc6fa521"
}
}Jedes Linien-Paket live umgestalten
Stile ändern, wie ein Liniensymbol gemalt wird, ohne die Datei zu ändern: Jedes Symbol bleibt dasselbe SVG.
| Symbol | Stroke | Solid | Dual | Mid | Half |
|---|---|---|---|---|---|
| rocket | |||||
| heart | |||||
| camera | |||||
| accessible |
- Fünf Stile: Stroke, Solid, Dual tone, Midtone und Halftone.
- Live angewendet, auf das ganze Paket auf einmal, in der Spielwiese oben und im Symbol-Browser.
- Flaggen und farbige Emoji behalten ihre eigenen Farben.
- Im Symbol-Browser ein Regler für die Strichstärke und kopierfertiger Code für jeden Stil.
Ein Blick ins Innere des Symbol-Browsers
Ichava DevTools ist eine Schublade im Symbol-Browser für alle, die damit bauen.
- Die Tabs Events, State, Storage, Logs und Boot, dazu die Selbsttests des Browsers.
- Ein Status-Tab für Benutzer mit der Fähigkeit ichava.admin.
- Lässt sich an jeden Fensterrand andocken und öffnet sich mit ⇧⌘D.
- Enthalten in Debug-Builds mit aktivierter devtools-Funktion; Produktions-Builds lassen sie weg.
Lesen Sie die vollständige Anleitung
Jede Option, jede Familie und die Lottie-Stufe sind im Repository dokumentiert.