Animationsmuster für Windows Store-Apps

Erfahren Sie, wie Sie sinnvolle Animationen verwenden, in denen Sie Erfahrungen visuell miteinander verknüpfen und eine Geschichte erzählen. Die szenariospezifischen Animationen von Windows 8 dienen dazu, Informationen bereitzustellen, Benutzern vorab einen Eindruck zu vermitteln und Vertrauen aufzubauen. Weitere Informationen finden Sie in den Anleitungen im Abschnitt Animieren der Benutzeroberfläche.

Starten Ihrer App

Zeigen Sie die erste Seite Ihrer App an.

JavaScript: Verwenden Sie enterPage.

XAML: Verwenden Sie EntranceThemeTransition.

Siehe auch Animieren von Übergängen mithilfe der Animationsbibliothek

Übergang zwischen Seiten

Gestalten Sie den Übergang von einer Seite Ihrer App zu einer anderen.

JavaScript: Verwenden Sie exitPage und dann enterPage

XAML: Verwenden Sie EntranceThemeTransition.

Siehe auch Animieren von Übergängen mithilfe der Animationsbibliothek

Übergang zwischen Inhalten

Gestalten Sie den Übergang zwischen Inhalten in einem Bereich Ihrer Seite.

JavaScript: Verwenden Sie exitContent und dann enterContent

XAML: Verwenden Sie ContentThemeTransition.

Siehe auch Animieren von Übergängen mithilfe der Animationsbibliothek

Feedback auf Berührung und Klicken

Geben Sie visuelles Feedback, wenn der Benutzer auf eine Kachel tippt oder klickt.

JavaScript: Verwenden Sie pointerDown und pointerUp

XAML: Verwenden Sie PointerDownThemeAnimation und PointerUpThemeAnimation

Siehe auch Animieren von Zeigern mithilfe der Animationsbibliothek

Anzeigen von Übergängen bei UI- oder Steuerelementen

Zeigen Sie Übergänge bei UI- oder Steuerelementen an, oder blenden Sie sie aus.

JavaScript: Verwenden Sie fadeIn und fadeOut

XAML: Verwenden Sie FadeInThemeAnimation und FadeOutThemeAnimation

Siehe auch Animieren von UI-Elementen mithilfe der Animationsbibliothek

Aktualisieren

Aktualisieren Sie Inhalte, oder animieren Sie Layoutänderungen bei der aktuellen Seite.

JavaScript: Verwenden Sie crossFade.

XAML: Verwenden Sie FadeOutThemeAnimation und FadeInThemeAnimation

Siehe auch Animieren von UI-Elementen mithilfe der Animationsbibliothek

Anzeigen zusätzlicher Steuerelemente oder Inhalte inline

Schaffen Sie Platz, und zeigen Sie zusätzliche Steuerelemente oder Inhalte auf der bestehenden Benutzeroberfläche an.

JavaScript: Verwenden Sie createExpandAnimation und createCollapseAnimation

XAML: N/V

Hinzufügen oder Löschen von Elementen aus einer Liste

Fügen Sie ein oder mehrere Elemente zu einer bestehenden Liste hinzu, oder entfernen Sie sie.

JavaScript: Verwenden Sie createAddToListAnimation und createDeleteFromListAnimation

XAML: Verwenden Sie AddDeleteThemeTransition.

Siehe auch Animieren von Listen und Listenelementen mit der Animationsbibliothek

Filtern einer Liste bei der Suche

Fügen Sie während der Suche schnell Elemente zu einer Liste hinzu, oder entfernen Sie sie

JavaScript: Verwenden Sie createAddToSearchListAnimation und createDeleteFromSearchListAnimation

XAML: N/V

Siehe auch Animieren von Listen und Listenelementen mit der Animationsbibliothek

Anzeigen von Befehls- oder Benachrichtigungsleisten

Blenden Sie eine Befehls- oder Benachrichtigungsleiste am Bildschirmrand ein oder aus.

JavaScript: Verwenden Sie showEdgeUI und hideEdgeUI

XAML: Verwenden Sie EdgeUIThemeTransition.

Siehe auch Animieren von Benutzeroberflächen mithilfe der Animationsbibliothek

Anzeigen von Aufgabenbereichen

Blenden Sie einen Aufgabenbereich oder andere große UI-Container am Bildschirmrand ein oder aus.

JavaScript: Verwenden Sie showPanel und hidePanel

XAML: Verwenden Sie PaneThemeTransition.

Siehe auch Animieren von Benutzeroberflächen mithilfe der Animationsbibliothek

Anzeigen von Popups

Zeigen Sie auf der Benutzeroberfläche Popups wie Flyouts oder Kontextmenüs an.

JavaScript: Verwenden Sie showPopup und hidePopup

XAML: Verwenden Sie PopInThemeAnimation und PopOutThemeAnimation

Siehe auch Animieren von Benutzeroberflächen mithilfe der Animationsbibliothek

Ziehen

Liste per Drag & Drop von Elementen umsortieren.

JavaScript: Verwenden Sie dragSourceStart, dragSourceEnd, dragBetweenEnter und dragBetweenLeave

XAML: Verwenden Sie DragItemThemeAnimation, DropTargetItemThemeAnimation und DragOverThemeAnimation

Siehe auch Animieren von Listen und Listenelementen mit der Animationsbibliothek

Auswählen von Kacheln durch Streifen

Platzieren Sie eine Kachel mit einer Animation wieder an ihrer ursprünglichen Stelle, nachdem der Benutzer eine Streifbewegung durchgeführt hat.

JavaScript: Verwenden Sie swipeSelect und swipeDeselect

XAML: Verwenden Sie SwipeBackThemeAnimation.

Anzeigen von Streifmöglichkeiten

Zeigen Sie mit einer Animation an, dass eine Kachel Streifbewegungen unterstützt.

JavaScript: Verwenden Sie swipeReveal.

XAML: Verwenden Sie SwipeHintThemeAnimation.

Aktualisieren von Kacheln

Aktualisieren Sie sämtliche Inhalte einer Kachel, oder zeigen Sie in einer Vorschau kurzzeitig zusätzliche Informationen zur Kachel an.

JavaScript: Verwenden Sie createPeekAnimation.

XAML: N/V

Aktualisieren von Signalen

Aktualisieren Sie ein numerisches Signal mit einem neuen Wert.

JavaScript: Verwenden Sie updateBadge.

XAML: N/V

Ändern der Position

Positionieren Sie UI-Elemente oder Inhalte um.

JavaScript: Verwenden Sie createRepositionAnimation.

XAML: Verwenden Sie RepositionThemeTransition.

Siehe auch Animieren von UI-Elementen mithilfe der Animationsbibliothek

Verwandte Themen

Richtlinien für die Gestaltung der Benutzeroberfläche von Windows Store-Apps

Animieren der Benutzeroberfläche