Wie man ein mobiles Bottom Sheet oder Drawer animiert
Lernen Sie, wie Sie mobile Einschubmenüs (Bottom Sheets) gestalten: Finger-Tracking in Echtzeit, Einrastpunkte, Federphysik und barrierefreie Fokusführung.
Kernaussage
Ein intuitives Bottom Sheet folgt dem Finger in Echtzeit via transform: translateY. Beim Loslassen misst es die Wischgeschwindigkeit und entscheidet per Federphysik, ob es auf halber Höhe einrastet, sich voll öffnet oder schließt. Der Hintergrund verdunkelt sich proportional zur Höhe und der Fokus bleibt während der Anzeige gefangen.
Einrastpunkte und Zustandsarchitektur
Moderne Bottom Sheets verfügen über mehrere stabile Positionen: minimiert, halboffen und Vollbild. Modellieren Sie diese Stufen als diskrete Zustände mit Federn, die abhängig vom Schwung des Benutzers zwischen ihnen wechseln.
Gummiband-Effekt an den Rändern
Wird das Menü über die Maximalhöhe hinaus oder unter den Rand gezogen, sorgt progressiver Widerstand (Gummiband-Effekt) für das taktile Gefühl, an eine physische Grenze gestoßen zu sein.
- Wenden Sie logarithmischen Widerstand bei Zug über das Limit an
- Nutzen Sie transform: translateY() für konstante 60 oder 120 FPS
- Koppeln Sie die Hintergrundabdunklung an den Öffnungsgrad
- Schließen Sie das Menü bei schnellem Abwärtswischen sofort
Hintergrundabdunklung und Schließgesten
Ein Tippen auf den halbtransparenten Hintergrund schließt das Sheet sofort mit derselben Rückzugsanimation wie ein schneller Wisch nach unten.
Anforderungen an die Barrierefreiheit
Das Sheet muss sich wie ein Modaldialog mit role="dialog" und aria-modal="true" verhalten. Die Escape-Taste schließt es, und der Tastaturfokus bleibt innerhalb des geöffneten Menüs.
Wichtige Prinzipien
- Folgen Sie dem Finger in Echtzeit per transform: translateY()
- Bestimmen Sie den Einrastpunkt anhand der Wischgeschwindigkeit
- Bauen Sie elastischen Widerstand an den Grenzen ein
- Fangen Sie den Fokus ein und erlauben Sie das Schließen mit Escape
Häufige Fragen
Quellen
- Bottom Sheets Pattern — Material Design 3
- Sheets Presentation — Apple Human Interface Guidelines