HyperFrames Animation
Das gesamte Bewegungswissen in einer Fähigkeit: Regeln (atomare Rezepte), Blaupausen (mehrphasige Szenenvorlagen), Übergänge (Szene-zu-Szene), Techniken (breitere Motion-Design-Muster) und Adapter (pro-Laufzeit-APIs).
Für den Kompositionsvertrag (Datenattribute, Unterkompositionen, Determiniertheit) siehe hyperframes-core.
Standard: atomare Regeln komponieren
Wählen Sie 2-4 Regeln aus rules-index.md aus, verknüpfen Sie sie mit einer einzigen pausierten GSAP-Timeline – fertig. Dies ist schneller und führt zu weniger Code als der Start mit einer Blaupause.
Laden Sie eine Blaupause, wenn
- Die Szene zu einer vorhandenen, vorgefertigten mehrphasigen Vorlage passt (Marken-Enthüllung, Social Proof usw.) und die Wiederverwendung ihrer Phasen-Pipeline echte Erstellungszeit spart.
- Sie ausführbaren, referenzierbaren Code für eine komplexe 4-5-phasige Choreografie möchten.
Blaupausen befinden sich in blueprints-index.md. Jeder Eintrag verweist auf blueprints/<id>.md (Rezept). Lesen Sie es nicht spekulativ; laden Sie es, wenn Sie sich bereits für eine szenenübergreifende Orchestrierung entschieden haben.
Routing
| Wenn Sie … | Lesen Sie |
|---|---|
| Ein atomares Bewegungsmuster nach Auslöser/Tag auswählen möchten | rules-index.md |
| Das vollständige HTML/CSS/GSAP-Rezept einer Regel lesen möchten | rules/<name>.md |
| Eine mehrphasige Szenenvorlage auswählen möchten | blueprints-index.md |
| Das vollständige Rezept einer Blaupause lesen möchten | blueprints/<id>.md |
| Einen Szenenübergang (CSS-gesteuert, zwischen zwei Clips) erstellen möchten | transitions/overview.md, transitions/catalog.md |
| Ein breiteres Motion-Design-Muster nachschlagen möchten | techniques.md |
| Die Animationszuordnung einer bestehenden Komposition analysieren möchten | scripts/animation-map.mjs |
| GSAP-API – Timeline/Tweens/Positionsparameter | adapters/gsap.md |
| GSAP – einsatzfertige Effektrezepte | rules/gsap-effects.md |
| GSAP – Transformationen/Leistung | adapters/gsap-transforms-and-perf.md |
| GSAP – Easing/Stagger | adapters/gsap-easing-and-stagger.md |
| GSAP – Timeline/Labels | adapters/gsap-timeline-and-labels.md |
Lottie/dotLottie (After Effects Exporte, window.__hfLottie) | adapters/lottie.md |
Three.js/WebGL (3D-Szenen, AnimationMixer, hf-seek) | adapters/three.md |
Anime.js (window.__hfAnime) | adapters/animejs.md |
CSS-Keyframes (animation-delay / play-state / fill-mode) | adapters/css-animations.md |
Web Animations API (element.animate(), currentTime seek) | adapters/waapi.md |
TypeGPU/WebGPU (navigator.gpu, WGSL, Compute-Pipelines) | adapters/typegpu.md |
HTML-als-Textur + WebGL/GLSL-Postfx (Live-DOM via drawElementImage erfassen) | adapters/html-in-canvas-patterns.md |
Benannte Textanimationseffekte (24 IDs über externe animate-text-Fähigkeit) | adapters/animate-text.md |
Auswahl einer Laufzeit
- GSAP ist der Standard für 95% der Bewegungsarbeit – deckt Timeline-Orchestrierung, Transformationen, Easing, Stagger ab. Alle atomaren Regeln in dieser Fähigkeit basieren auf GSAP.
- Lottie wenn ein Asset eine eigene vorgefertigte Timeline hat (typischerweise After Effects Exporte).
- Three.js für 3D-Szenen, Kamerabewegungen, shader-basierte Visuals.
- Anime.js für leichtgewichtiges Tweening, wenn GSAP übertrieben ist.
- CSS für einfache, wiederholte Motive, Dekoration, Schimmer – keine JavaScript-Animationskosten.
- WAAPI für native Browser-Keyframes ohne GSAP-Abhängigkeit.
- TypeGPU / WebGPU für GPU-gerenderte Canvaselemente (Partikel, Flüssigglas, benutzerdefinierte Shader).
Mehrere Laufzeiten können in einer Komposition koexistieren. Jede registriert ihre Instanzen auf der laufzeitspezifischen globalen Variable, sodass HyperFrames alle in einem Durchlauf durchsuchen kann.
Kritische Einschränkungen
Voraussetzung: hyperframes-core → Nicht verhandelbare Regeln (einzelne pausierte Timeline, data-duration bestimmt die Länge, kein Math.random / Date.now / performance.now, kein repeat: -1, kein gsap.set beim Seitenladen für später in der Szene befindliche Clips, keine display oder rohen visibility-Tweens und kein Timeline-Aufbau innerhalb von async / setTimeout / Promise). GSAP autoAlpha und Sichtbarkeitseinstellungen ohne Dauer an expliziten Timeline-Grenzen bleiben vom Kern erlaubt. Verwenden Sie diese Ausnahmen nur für Nicht-Clip-Elemente oder Wrapper innerhalb eines Clips; das Framework besitzt den .clip-Lebenszyklus. Wiederholen Sie hier nicht den vollständigen Vertrag.
Zusätzliche Animation-Craft-Regeln zum Kernvertrag:
- Vorausberechnete Layout-Konstanten – leiten Sie Positionen niemals von
getBoundingClientRect()zur Tween-Zeit ab. Tween-Zeit-DOM-Messungen desynchronisieren, weil der Renderer parallel abtastet; berechnen Sie Koordinaten einmal beim Kompositionsaufbau und verwenden Sie sie wieder. - Räumliche Bewegung verwendet nur GSAP-Transformations-Aliasnamen (
x,y,scale,rotation). Die Zulassungsliste des Kerns erlaubt auchopacity/color/backgroundColor/borderRadiusfür nicht-räumliche Property-Tweens – aber niemalswidth/height/top/leftfür Layoutänderungen.
Skripte
node skills/hyperframes-animation/scripts/animation-map.mjs <composition-verzeichnis> \
--out <composition-verzeichnis>/.hyperframes/anim-map
Liest jede GSAP-Timeline, die auf window.__timelines registriert ist, zählt Tweens auf, tastet Bboxes ab, berechnet Flags und gibt animation-map.json aus. Verwenden Sie es zur Überprüfung der Choreografie (Totzonen, Stagger-Konsistenz, Lebenszykluswarnungen) nach dem Erstellen.
animation-map.mjs löst Hilfspakete zuerst aus dem aktuellen Projekt auf und kann dann die gebündelte Version des HyperFrames-Pakets bootstrappen. Setzen Sie HYPERFRAMES_SKILL_PKG_VERSION=<version> nur, wenn Sie die Fähigkeit außerhalb der gebündelten CLI/Fähigkeitsinstallation ausführen und diese Bootstrap-Version explizit festlegen müssen.
Siehe auch
hyperframes-core– Kompositionsstruktur, Datenattribute, Unterkompositionen, deterministischer Rendervertraghyperframes-creative– Paletten, Typografie, Erzählung, Beat-Planung (nicht-animatorische kreative Ausrichtung)hyperframes-cli–npx hyperframes lint / check / snapshot / preview / render