Wie man eine Ziehinteraktion (Drag) greifbar und physisch macht
Gestalten Sie greifbare Drag-and-Drop-Interaktionen: 1:1-Zeigerverfolgung, Schwungübernahme beim Loslassen, Gummiband-Widerstand und dynamische Neigung.
Kernaussage
Damit sich Ziehgesten physisch echt anfühlen, koppeln Sie Zeigerkoordinaten via Pointer Events 1:1 mit transform: translate3d. Fügen Sie eine dezente Neigung proportional zur Wischgeschwindigkeit hinzu, um Masse zu vermitteln, bremsen Sie Überschreitungen mit elastischem Widerstand ab und übergeben Sie den Geschwindigkeitsvektor beim Loslassen an eine Feder.
Eingabelatenz und Zeigerversatz beseitigen
Nichts zerstört das physische Gefühl schneller als Verzögerung zwischen Finger und Objekt. Speichern Sie den genauen Greifpunkt innerhalb des Elements, statt seine Ecke an den Zeiger zu heften, und nutzen Sie setPointerCapture, um das Tracking außerhalb des Containers nicht zu verlieren.
Trägheit und dynamische Neigung
Physische Gegenstände bleiben beim Ziehen nicht senkrecht stehen. Berechnen Sie den horizontalen Versatz (dx) und wenden Sie eine minimale Drehung an (dx * 0.05deg, begrenzt auf -8deg bis +8deg), um Reibung und Luftwiderstand zu simulieren.
- Erfassen Sie Pointer Events ab pointerdown für unterbrechungsfreies Tracking
- Erhöhen Sie den z-Index und werfen Sie beim Anheben einen weichen Schatten
- Koppeln Sie die Neigung an das Bewegungstempo
- Lösen Sie auf Smartphones beim Greifen und Ablegen dezente Vibrationen aus
Grenz-Widerstand (Gummiband-Effekt)
Wird ein Element über den erlaubten Bereich hinausgezogen, wirkt ein harter Anschlag wie ein Softwarefehler. Eine logarithmische Dämpfungsfunktion sorgt dafür, dass jeder weitere Pixel exponentiell mehr Kraft erfordert.
Abwurfgeschwindigkeit und ballistisches Ausgleiten
Beim Loslassen (pointerup) darf niemals eine feste Zeitspanne ablaufen. Ermitteln Sie das Tempo der letzten Bilder und speisen Sie es in einen Federsimulator ein, damit das Objekt mit realistischem Schwung in seine Ruheposition gleitet.
Wichtige Prinzipien
- Garantiere 1:1-Tracking ohne Verspringen des Ursprungspunkts
- Nutze tempoabhängige Neigung zur Vermittlung von Masse
- Setze progressiven Gummiband-Widerstand an Containergrenzen ein
- Übergib den Abwurfschwung für organische Landung an eine Feder
Häufige Fragen
Quellen
- Pointer Events Level 3 — W3C
- Tactile UI and Physical Depth — Nielsen Norman Group