Wie man eine Swipe-to-Dismiss-Karte animiert
Leitfaden zur Gestaltung von Swipe to Dismiss: Winkel-Erkennung, Ausblenden, flüssiges Schließen der Listenlücke und Widerrufen-Funktion.
Kernaussage
Beim Wischen zum Entfernen folgt die Karte dem Finger horizontal per transform: translateX, während die Deckkraft abnimmt. Wird die Auslöseschwelle überschritten oder schwungvoll gewischt, gleitet die Karte aus dem Bild und die Liste schließt die Lücke nahtlos per Höhen- oder Translate-Animation.
Verfolgung und Winkel-Erkennung
Um versehentliches Löschen beim vertikalen Scrollen zu verhindern, prüfen Sie die Richtung innerhalb der ersten 10 Pixel. Nur bei überwiegend horizontaler Bewegung übernimmt die Wischgeste die Kontrolle.
Visuelle Hinweise während des Wischens
Beim Verschieben der Karte werden Hintergrundaktionen (wie Löschen oder Archivieren) durch Symbole sichtbar, die beim Erreichen der Schwelle anwachsen.
- Blenden Sie Aktionsfarben und Symbole hinter der Karte ein
- Reduzieren Sie die Kartendeckkraft mit zunehmendem Abstand
- Lösen Sie eine kurze Vibration beim Erreichen der Schwelle aus
- Federn Sie die Karte zurück, wenn die Schwelle nicht erreicht wird
Das Schließen der Listenlücke
Sobald die Karte entfernt ist, rücken nachfolgende Elemente nach oben. Eine animierte Reduzierung von height auf 0 oder die FLIP-Technik mit translateY sorgt für ruckelfreies Nachrücken.
Verfügbarkeit von 'Rückgängig'
Wischgesten führen leicht zu versehentlichen Löschungen. Bieten Sie stets eine Toast-Nachricht mit einer 'Rückgängig'-Schaltfläche für einige Sekunden an.
Wichtige Prinzipien
- Filtern Sie den Bewegungswinkel gegen Konflikte mit vertikalem Scrollen
- Zeigen Sie klare Hintergrund-Symbole zur Bestätigung
- Schließen Sie die Listenlücke weich ohne abrupte Sprünge
- Bieten Sie immer eine Option zum Widerrufen an
Häufige Fragen
Quellen
- Lists: Swipe Actions — Apple Human Interface Guidelines
- Gestures: Dragging and Swiping — Material Design 3