Motion-Design und Schnittstellenanimationen

1) Warum Animation im Produkt

• erklärt die Ursache-Wirkungs-Beziehungen (wo es verschwand, woher das Element kam),
• lenkt die Aufmerksamkeit auf die Hauptaktion,
• bestätigt das Ergebnis (Feedback) und reduziert die kognitive Belastung,
• macht Übergänge vorhersehbar und „greifbar“.

Regel Nr. 1: Bedeutung> Stil. Jede Animation beantwortet die Frage "Was ist passiert und was hat es mit mir zu tun? ».

2) Grundprinzipien

1. Bewegungshierarchie: Zuerst werden die Container bewegt, dann der Inhalt, dann die Details.
2. Beständigkeit: Gleiche Muster für gleiche Handlungen.
3. Einsparungen: Minimum an Eigenschaften, Minimum an Rahmen; kürzer und klarer.
4. Realistische Physik: Beschleunigung am Anfang, Verlangsamung am Ende; Es gibt keine „Idioten“.
5. Umkehrbarkeit: Das „Zurück“ wird gespiegelt als „Vorwärts“ empfunden.
6. Verfügbarkeit: Respektieren Sie die Systemeinstellungen für die Reduzierung der Animation.

3) Dauer und Kurven (Empfehlungen)

3. 1 Dauer (Desktop/Mobile)

Hover: 120-180 ms

Focus/Pressed: 80–120 мс

Tooltip/Toast: Eingang 180-240 ms, Ausgang 120-160 ms

Modalks/Drowers: 200-320 ms

Bildschirmübergänge: 240-360 ms

Scrollbindungen/Parallaxe: ≤ 200 ms pro Segment, Vermeidung von Endlosschleifen

3. 2 Kurven

Basic: 'cubic-bezier (0. 2, 0. 0, 0. 2, 1)'- das natürliche „Material“ Tempo

Der Eingang ist schneller, der Ausgang weicher: 'cubic-bezier (0. 05, 0. 7, 0. 1, 1)`

Elastizität (selten, Akzent): 'cubic-bezier (0. 2, 0. 8, 0. 2, 1. 2) 'mit overshoot Einschränkung ≤ 8px/8 °

Regel: Verwenden Sie keine lineare Interpolation für Bewegungen und Opacity gleichzeitig - ein Gefühl von „Mechanik“.

4) Choreographie der Übergänge

Auftritt: leichter Maßstab 0. 98→1. 0 + Fade-in, Offset 8-16 px auf der Auftrittsachse.
Verschwinden: umgekehrte Reihenfolge, schneller als der Eintritt (− 20-30%).
Umblättern/Wechseln der Tabs: Die allgemeine „Basis“ (Container) verschiebt sich um 16-24 px; Die aktive Registerkarte wird hervorgehoben, bevor die Bewegung beginnt.
Listen: Kaskade abschwächen (Stagger 20-40 ms/Element, max. 6-8 Elemente).

5) Mikrointeraktionen (Muster)

Taste (hover/press): shadow + light sub scroll/scale 0. 98; pressed springt ≤ 80ms.
Fokus: Kontrastring ohne Blur; animieren Sie die Dicke/Transparenz, nicht glow.
Inputs: Wagen/Feldbeleuchtung auf Fokus; Fehler - Schütteln ≤ 6 px, ≤ 140 ms, 1 Zyklus.
Toggle/Checkbox: Snap bis zur Endposition, Klickverzögerung max. 60-80ms.
Skeleton/Download: Shimmer 1200-1600 ms, Helligkeitsamplitude ≤ 20%, keine plötzlichen Ausbrüche.

6) Inhaltsstatus

Loading → Success/Empty/Error: ein Kanal Mischen Sie nicht verschiedene Richtungen.
Toast/Alerts: kommen von der Quell-Seite des Ereignisses (z.B. unten-rechts für Benutzeraktionen).
Pull to refresh: Dehnung mit elastischer Rückfederung; Rücklaufzeit ≤ 250 ms.

7) Verfügbarkeit (A11y) und Sicherheit

Unterstützen Sie' prefers-reduced-motion: reduce': Ersetzen Sie Bewegungen durch fade/scale ≤ 1% oder einen statischen Übergang.
Vermeiden Sie Blitze> 3 pro Sekunde und große Kontrastblitze (photosensitive Epilepsie).
Verwenden Sie keine starke Parallaxe/Zoom bei Benutzern mit einer Geschichte von Reisekrankheit; Deaktivieren Sie die Option.
Fokusstile sind immer ohne Animation sichtbar (nicht nur Farbe/Bewegung).

8) Leistung (60 FPS als Ziel)

Animieren Sie nur opacity und transform (translate/scale/rotate); Vermeiden Sie' top/left/width/height'.
Compositing aktivieren: 'transform: translateZ (0)' oder 'will-change: transform, opacity' (mäßig).
Repaint minimieren: Animieren Sie keine Schatten mit großen Blur und Filter auf eine Vielzahl von Elementen.
Brechen Sie große Übergänge auf Batchi; Verwenden Sie requestAnimationFrame.
Für Listen: Off-Screen-Virtualisierung/Umparting.

9) Motion-Token im Designsystem

json
{
"motion": {
"duration": { "xs": 100, "sm": 160, "md": 220, "lg": 280, "xl": 340 },
"easing": {
"standard": "cubic-bezier(0. 2, 0. 0, 0. 2, 1)",
"emphasis": "cubic-bezier(0. 05, 0. 7, 0. 1, 1)",
"decelerate": "cubic-bezier(0. 0, 0. 0, 0. 2, 1)",
"accelerate": "cubic-bezier(0. 4, 0. 0, 1, 1)"
},
"stagger": { "listItem": 30, "maxItems": 8 }
}
}

Именование: `motion.{duration|easing|stagger}.{role}` — `hover`, `focus`, `overlayIn`, `pageTransition`, `listItem`.

10) Umsetzung (CSS/JS/React)

css
:root {
--motion-dur-sm: 160ms;
--motion-dur-md: 220ms;
--motion-ease: cubic-bezier(0. 2, 0, 0. 2, 1);
}
@media (prefers-reduced-motion: reduce) {
{ animation: none! important; transition-duration: 0. 01ms! important; }
}

tsx import { motion, AnimatePresence } from "framer-motion";

export function Modal({ open, children }) {
return (
<AnimatePresence>
{open && (
<motion. div initial={{ opacity: 0 }}
animate={{ opacity: 1, transition: { duration: 0. 22 } }}
exit={{ opacity: 0, transition: { duration: 0. 16 } }}
className="fixed inset-0 bg-black/50"
>
<motion. div initial={{ y: 16, scale: 0. 98, opacity: 0 }}
animate={{ y: 0, scale: 1, opacity: 1, transition: { duration: 0. 24, ease: [0. 2,0,0. 2,1] } }}
exit={{ y: 8, scale: 0. 99, opacity: 0, transition: { duration: 0. 18 } }}
className="m-auto max-w-lg rounded-2xl bg-white p-6"
>
{children}
</motion. div>
</motion. div>
)}
</AnimatePresence>
);
}

Lottie/SVG: Verwendung für illustrative Leerzustände und Onboarding; nicht für kritische Kontrollen. Optimieren und zwischenspeichern.

11) Download-Muster

Skeleton statt Spinner, wo die Struktur des Inhalts bekannt ist.
Progress: deterministischer Balken, wenn der Fortschritt bekannt ist; indeterministisch - mit einem gleichmäßigen Tempo, ohne „Ruck“.
Vermeiden Sie „schwebende“ Skelette beim Wiederaufbau - sichern Sie die Abmessungen.

12) Übergänge zwischen Seiten/Bildschirmen

Behalten Sie den Punkt der Aufmerksamkeit (shared element transitions) - die Karte „öffnet sich“ im Detail.
Navigation „tief“ geht vorwärts/rechts/oben, „rückwärts“ - zurück; Richtung ist eine für die Plattform.
Das Hintergrundsubstrat wird mit Overlays auf 40-60% abgedunkelt.

13) Besonderheiten von iGaming

Spin/Reveal: eine kurze Beschleunigung (≤ 200 ms) + gleichmäßige Drehung + sanfte Dämpfung; Verbot von Endlosschleifen ohne Wirkung.
Win/Jackpot: Lichtstrahl ≤ 500 ms, ohne Strobe; Aufnahme mit Ton bei niedriger Lautstärke; Der Text des Sieges ist lesbar (AAA im Kontrast).
Turniere/Ranglisten: Das Inkrement des Kontos ist ein Zähler mit Tabellenzahlen und einfachen Schritten von 40-60 ms/Einheit (Schlachten), ohne „Sprünge“ im Layout.
Verantwortungsvolles Spielen: Benachrichtigungen und Limits ohne Ablenkungen; Animation minimal, Betonung auf Lesbarkeit.

14) Anti-Muster

Latenzen> 120 ms bis zum Klick-Ansprechen.
„Lift“ aus opacity + scale 0. 9→1. 05→1. 0 mit overshoot für jede Kleinigkeit.
Parallaxe des Hintergrunds, die mit dem Scroll in Konflikt steht.
Endloses Flimmern/Pulsieren.
Animation der layout/paint Eigenschaften ('height', 'left', 'filter: blur ()') auf einer Vielzahl von Elementen.
Unbeständige Kurven und Dauer der gleichen Aktionen.

15) Prozess und QS

• Prototypen mit Timings/Kurven; Choreographie auf Frame-Ebene.
• Motion-Token-Verzeichnis und Beispiele für Komponenten.

• Unit Sichtbarkeits-/Zustandstests (Übergänge werden wie erwartet abgeschlossen).
• Visuelle Tests (Snap-Shots am Ende der Animationen).
• Profilierung (Performance/Timeline) auf Bühnen mit maximaler Belastung.

• Unterstützt von „prefers-reduced-motion“.
• Nur transform/opacity.
• Dauer und Kurven entsprechen Tokens.
• Keine Ausbrüche> 3/sec und starker Strobe.
• Skeleton statt Spinner, wo möglich.
• Die Übergänge sind reversibel und vorhersehbar.

16) Dokumentation im Konstruktionssystem

„Motion-Token“: duration/easing/stagger mit Beispielen.
„Übergangsmuster“: Modals, Listen, Tabs, Seiten.
„A11y & Performance“: Hyde für Reduce-Motion und Compositing.
„Do/Don't“: kurze Clips mit gelungenen/erfolglosen Beispielen.

Kurze Zusammenfassung

Motion Design ist die Sprache von Ursache und Wirkung. Halten Sie Timings kurz, Kurven konsistent und Eigenschaften günstig zu rendern. Respektieren Sie die Verfügbarkeit, dokumentieren Sie Token und überprüfen Sie die Leistung. Dann wird die Animation die UX verbessern und die Geschwindigkeit und Klarheit der Schnittstelle nicht beeinträchtigen.