Animation Engineering & Motion Craft

Was macht Animation Engineering & Motion Craft?

Diese Fähigkeit stattet den Agenten mit branchenüblichen Praktiken, produktionsreifen Mustern und mathematischen Physikmodellen aus, um flüssige, performante Animationen für Web- und Anwendungsschnittstellen zu entwerfen und zu codieren.

---

1. Goldene Regeln der Bewegungsperformance

1. Ausschließlich Composite-Eigenschaften animieren:
   • transform (translate3d, scale, rotate) und opacity bevorzugen.
   • NIEMALS Geometrieeigenschaften (width, height, top, left, margin, padding) animieren, außer mit der FLIP-Technik (First, Last, Invert, Play). Das Animieren von Geometrie löst teure Layout-Neuberechnungen (Reflow) und Paint auf der CPU aus.
2. GPU verantwortungsvoll fördern:
   • will-change: transform, opacity; nur auf aktiv animierten Elementen verwenden und nach Abschluss der Animation entfernen, falls der Speicher begrenzt ist.
   • GPU-Layer-Komposition mit transform: translateZ(0) oder backface-visibility: hidden erzwingen, wenn nötig.
3. Barrierefreiheit respektieren:
   • Immer @media (prefers-reduced-motion: reduce) unterstützen:

     @media (prefers-reduced-motion: reduce) {
       *, *::before, *::after {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
         scroll-behavior: auto !important;
       }
     }
     

4. Natürliches Timing & Dauer:
   • Mikrointeraktionen (Tastendruck, Umschalter, Tooltip): 100ms - 200ms
   • Standard-Übergänge (Dropdowns, Dialoge, Drawer, Karten): 200ms - 350ms
   • Komplexe Szenen-/Seitenübergänge: 350ms - 500ms
   • Animationen länger als 500ms wirken träge, es sei denn, es handelt sich um kontinuierliche atmosphärische Hintergrundschleifen oder narrative Geschichten.

---

2. Technologieauswahl-Matrix

Szenario / Bedarf	Empfohlenes Werkzeug	Warum?
Einfache Hover-, Fokus-, Aktiv-Zustände, Ein-/Ausblenden	CSS-Übergänge & @keyframes oder Tailwind CSS	Kein JavaScript-Overhead, 120 FPS Hardwarebeschleunigung.
React / Next.js UI, Modale, Shared Layout Transitions	Framer Motion (motion)	Deklarative API, Federphysik, automatisches FLIP (layoutId), AnimatePresence.
Komplexe Zeitachsen, SVG-Morphing, Scroll-gesteuerte UI	GSAP (GreenSock) + ScrollTrigger	Unübertroffene Choreografie-Kontrolle, präzises Scrubbing, browserübergreifende Konsistenz.
3D-Erlebnisse, Partikelnetzwerke, Shader	Three.js / React Three Fiber / Canvas 2D	Direktes WebGL GPU-Rendering für Hunderttausende von Partikeln.
Vektor-Bewegungsgrafiken & Charakterillustrationen	Lottie / dotLottie / Rive	Kleine JSON/Binär-Dateien, skalierbare Vektortreue, interaktive Zustandsmaschinen.

---

3. Bewegungs-Curves (Easing-Token)

Verwenden Sie niemals linear für UI-Bewegungen, es sei denn, Sie simulieren ein Förderband mit konstanter Geschwindigkeit oder einen endlosen rotierenden Ladebalken. Natürliche Bewegungen beschleunigen und verlangsamen sich:

• Rasantes Erscheinen (Standard UI-Pop/Öffnen): cubic-bezier(0.16, 1, 0.3, 1) (Expo Out - schneller Start, sanfte Verlangsamung)
• Sanftes Verschwinden (Schließen): cubic-bezier(0.7, 0, 0.84, 0) (Expo In - beschleunigt aus dem Bildschirm)
• Natürlich dynamisch / Betont: cubic-bezier(0.34, 1.56, 0.64, 1) (Leichter Überschwung-Rückprall)
• Federphysik (bevorzugt für Berührung & Ziehen):
  • Steifigkeit: 300 - 400
  • Dämpfung: 25 - 35
  • Masse: 0.8 - 1.0

---

4. Ausführliche Anleitungen & Referenzen

Für umfassende Code-Muster und detaillierte Anleitungen konsultieren Sie die Referenzen:

• CSS & Tailwind-Animationen Referenz
• Framer Motion & Motion One Muster
• GSAP & ScrollTrigger Meisterschaft
• Three.js & Canvas-Bewegung
• UI-Bewegungsprinzipien & Barrierefreiheit

---

5. Verifizierungs-Checkliste

Beim Erstellen animierter Komponenten:

• Laufen die Animationen flüssig (60-120 FPS) ohne Ruckler oder Bildausfälle?
• Werden Layout-Verschiebungen (CLS) während der Animation vermieden?
• Werden Exit-Animationen ordnungsgemäß abgewartet, bevor das Element ausgehängt wird?
• Verarbeitet die UI schnelles Klicken/Tippen ohne Störungen (unterbrechbare Animationen)?
• Ist prefers-reduced-motion implementiert?