Animieren von Streifbewegungen (HTML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Verwenden Sie Wischanimationen, wenn Sie das Windows 8-Modell für die Toucheingabeauswahl (Wischen) für die Auswahl eines Elements implementieren.

Dieser Satz von Animationen umfasst die folgenden APIs. Alle drei folgenden Animationen müssen verwendet werden, wenn Sie die Streifinteraktion implementieren:

Das folgende Video zeigt die Animation für das Anzeigen von Wischmöglichkeiten:

Das folgende Video zeigt die Animationen für das Auswählen und Aufheben der Auswahl durch Wischen:

Hinweis

  Das ListView-Steuerelement enthält die Touchauswahl und Wischanimationen, sodass Sie diese Animationen beim Verwenden des Steuerelements nicht implementieren müssen.

 

Auswählen durch Streifen

Verwenden Sie die Animation für das Auswählen durch Streifen, wenn der Benutzer ein Element zieht, das die Auswahl durch Streifen unterstützt. Der Benutzer muss das Element weit genug ziehen, um es auszuwählen, und das Element dann loslassen. Die Animation für das Auswählen durch Streifen fügt die Auswahlanzeige hinzu (oft ein Häkchen), die den "ausgewählten" Zustand des Elements anzeigt, und verschiebt das Element zurück an seine Ausgangsposition.

Abbildung der Schritte einer Animation für das Auswählen durch Streifen: Verschieben und Häkchen

Um diese Animation zu verwenden, müssen Sie die anzuzeigende Auswahlanzeige sowie die Richtung und Distanz der Animation kennen.

Aufheben der Auswahl durch Streifen

Verwenden Sie die Animation für das Aufheben der Auswahl durch Streifen, wenn Benutzer ein zurzeit ausgewähltes Element weit genug gezogen haben, um die Auswahl aufzuheben, und das Element dann loslassen. Die Animation für das Aufheben der Auswahl durch Streifen entfernt die Auswahlanzeige vom Element und verschiebt das Element zurück an seine Ausgangsposition.

Abbildung der Schritte einer Animation für das Aufheben der Auswahl durch Streifen: Verschieben und Entfernen des Häkchens

Um diese Animation zu verwenden, müssen Sie die auszublendende Auswahlanzeige sowie die Richtung und Distanz der Animation kennen.

Anzeigen von Streifmöglichkeiten

Verwenden Sie Animation für das Anzeigen von Streifmöglichkeiten, um dem Benutzer zu zeigen, dass das Element die Streifinteraktion unterstützt. Wenn der Benutzer ein Element gedrückt hält, das die Streifinteraktion unterstützt, verschiebt die Animation das Element nach unten und dann wieder nach oben. Dies ist ein Hinweis darauf, dass das Element die Streifinteraktion unterstützt.

Abbildung der Schritte einer Animation für das Anzeigen von Streifmöglichkeiten: Verschieben und Entfernen des Häkchens

Um diese Animation zu verwenden, müssen Sie die Richtung und Distanz der Animation kennen. Die Animation muss zweimal nacheinander wiedergegeben werden: einmal, um das Element in die angegebene Richtung zu verschieben, und dann noch einmal, um das Element zurück an seine Ausgangsposition zu verschieben.

Weitere Ressourcen

Codebeispiele zur Verwendung der APIs für Wischanimationen finden Sie unter HTML-Beispiel für die Animationsbibliothek.

Verwandte Themen

Animieren der Benutzeroberfläche

swipeReveal

swipeSelect

swipeDeselect