Language: HTML | XAML

Animieren von Streifbewegungen (Windows Store-Apps mit JavaScript und HTML)

Applies to Windows only

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.

Bewährte Methoden für den Entwurf bei der Verwendung dieser Animationen finden Sie unter Richtlinien und Prüfliste für Wischanimationen.

Verwandte Themen

Animieren der Benutzeroberfläche
swipeReveal
swipeSelect
swipeDeselect

 

 

Anzeigen:
© 2014 Microsoft