Language: HTML | XAML

Animieren der Benutzeroberfläche (XAML)

Applies to Windows and Windows Phone

Sie können das Windows-Erscheinungsbild mithilfe der in diesem Thema erläuterten Animationsbibliothek in Ihre App integrieren. Dieses Thema enthält eine Zusammenfassung der Animationen und Beispiele für typische Szenarien, in denen diese Animationen verwendet werden.

Die Windows-Runtime-Steuerelemente für XAML umfassen bestimmte Animationen als integrierte Verhaltensweisen, die aus einer Animationsbibliothek stammen. Steuerelemente wie das ListView-Steuerelement, das FlipView-Steuerelement, das Flyout -Steuerelement und das AppBar-Steuerelement verwenden diese Animationen als integriertes Verhalten. Wenn Sie diese Steuerelemente in einer App verwenden, erreichen Sie das Erscheinungsbild von Animationen, ohne solche selbst programmieren zu müssen.

Animationen von der Windows-Runtime-Animationsbibliothek bieten folgende Vorteile:

  • Bewegungen, die sich an Animationsprinzipien anpassen.
  • Schnelle, flüssige Übergänge zwischen UI-Zuständen, die den Benutzer informieren, aber nicht ablenken.
  • Visuelles Verhalten, das dem Benutzer innerhalb einer App Übergänge anzeigt

Wenn der Benutzer beispielsweise einer Liste ein Element hinzufügt und das neue Element nicht unmittelbar in der Liste angezeigt wird, wird das neue Element entsprechend animiert. Die anderen Elemente werden innerhalb kurzer Zeit an ihren neuen Positionen animiert und machen Platz für das hinzugefügte Element. Das Übergangsverhalten macht die Steuerelementinteraktion offensichtlicher für den Benutzer.

Die Animationsbibliothek stellt keine Animationen für jedes mögliche Szenario bereit. Es gibt Fälle, in denen Sie es vielleicht vorziehen würden, eine benutzerdefinierte Animation in XAML zu erstellen. Weitere Informationen finden Sie unter Storyboardanimationen.

Beispielcode mit den in diesem Thema beschriebenen APIs finden Sie unter XAML-Beispiel für Animation, XAML-Beispiel für Charakteranimationen oder Schnellstart: Animieren der Benutzeroberfläche anhand von Bibliotheksanimationen.

Arten der Animation

Das Windows-Runtime-Animationssystem und die Animationsbibliothek können mit dem Ziel verwendet werden, Steuerelemente und andere Elemente der Benutzeroberfläche zu aktivieren, um ein animiertes Verhalten zu erreichen. Es sind verschiedene Animationsarten verfügbar.

  • Designübergänge werden automatisch angewendet, wenn sich bestimmte Bedingungen in der UI ändern, einschließlich Steuerelemente oder Elemente aus den vordefinierten Windows-Runtime-XAML-UI-Typen. Diese werden als Designübergänge bezeichnet, da diese Animationen das Erscheinungsbild von Windows unterstützen und definieren, was die Apps bei bestimmten UI-Szenarien ausführen, wenn sie von einem Interaktionsmodus in einen anderen wechseln. Die Designübergänge sind Teil der Animationsbibliothek.
  • Designanimationen sind Animationen für eine oder mehrere Eigenschaften vordefinierter Windows-Runtime-XAML-UI-Arten. Designanimationen weichen von Designübergängen ab, da Designanimationen auf ein bestimmtes Element abzielen und in spezifischen visuellen Zuständen innerhalb eines Steuerelements vorhanden sind. Wohingegen Designübergänge Eigenschaften des Steuerelements zugewiesen sind, die sich außerhalb der visuellen Zustände befinden und sich auf die Übergänge zwischen diesen Zuständen auswirken. Viele der Windows-Runtime-XAML-Steuerelemente enthalten Designanimationen innerhalb von Storyboards, die Teil der Steuerelementvorlage sind, wobei die Animationen von visuellen Zuständen ausgelöst werden. So lange die Vorlagen also nicht geändert werden, sind die integrierten Designanimationen in Ihrer UI verfügbar. Ersetzen Sie jedoch die Vorlagen, ersetzen Sie ebenfalls die integrierten Steuerelement-Designanimationen. Um sie zurückzuerhalten, definieren Sie ein Storyboard mit Designanimationen innerhalb des Satzes visueller Zustände des Steuerelements. Sie können auch Designanimationen von Storyboards ausführen, die sich nicht innerhalb visueller Zustände befinden, und mit der Begin-Methode starten. Das ist jedoch keine gängige Vorgehensweise. Die Designanimationen sind Teil der Animationsbibliothek.
  • Visuelle Übergänge werden angewendet, wenn ein Steuerelement von einem seiner definierten visuellen Zustände in einen anderen Zustand wechselt. Es handelt sich um benutzerdefinierte Animationen, die Sie schreiben, und sind normalerweise mit der benutzerdefinierten Vorlage, die Sie für ein Steuerelement schreiben, und den Definitionen für visuelle Zustände in dieser Vorlage verknüpft. Die Animation wird nur in der Zeit zwischen den Zuständen ausgeführt. Dies ist i. d. R. eine kurze Zeitdauer von höchstens einigen Sekunden. Weitere Informationen finden Sie im Abschnitt "Visuelle Übergänge" der Storyboardanimationen für visuelle Zustände.
  • Storyboardanimationen werden angewendet, wenn sie spezifisch durch Ihren App-Code gestartet werden oder durch Code, der zu einer Komponente gehört, z. B. einem eingebundenen Steuerelement. Storyboardanimationen können den Wert einer Windows-Runtime-Abhängigkeitseigenschaft mit der Zeit verändern. Storyboardanimationen sind nicht auf UI-Szenarien beschränkt. Stellen Sie sie sich mehr als Zustandsautomatverfahren vor, wenn Sie mit diesem Konzept vertraut sind. Eine Storyboardanimation ist zeitlich nicht auf die Übergangszeit zwischen zwei visuellen Zuständen beschränkt. Sie kann jederzeit ausgeführt werden, unabhängig von einer Zustandsänderung eines Steuerelements, ggf. sogar kontinuierlich. Weitere Informationen finden Sie unter Storyboardanimationen. Weitere Informationen zu Abhängigkeitseigenschaften und ihren Vorkommen finden Sie unter Übersicht über Abhängigkeitseigenschaften.

In der Bibliothek verfügbare Animationen

Die folgenden Animationen werden in der Animationsbibliothek bereitgestellt. Klicken Sie auf den Namen einer Animation, um mehr über die Hauptnutzungsszenarios und ihre Definition zu erfahren und eine Beispielanimation anzuzeigen.

Hinweis  Die expand-, peek-, badge- und search list-Animationen, die durch die JavaScript-Animationsbibliothek bereitgestellt werden, sind nicht für XAML verfügbar.

Windows 8-Verhaltensweise

Unter Windows 8 wurde von XAML-Designübergängen und verschiedenen anderen automatisch animierten Verhaltensweisen in der Animationsbibliothek eine bestimmte Microsoft Windows-Einstellung für erleichterte Bedienung nicht berücksichtigt, die es Benutzern ermöglicht, "nicht erforderliche Animationen" zu deaktivieren.

Mit der Einführung von Windows 8.1 berücksichtigen Designübergänge, Designanimationen und visuelle Übergänge jeweils die Einstellung für erleichterte Bedienung Alle nicht erforderlichen Animationen deaktivieren (wenn möglich). Die Animationen werden nicht ausgeführt und die Zustandsänderung eines Steuerelements oder visuelle Änderungen erfolgen sofort.

Wenn Sie Ihren App-Code von Windows 8 auf Windows 8.1 migrieren, möchten Sie möglicherweise das Verhalten Ihrer Animationen mit der aktivierten Einstellung Alle nicht erforderlichen Animationen deaktivieren (wenn möglich) testen. Da einige dieser Animationen durch Storyboards gesteuert werden und mitunter benutzerdefinierte Animationen so verkettet sind, dass sie starten, sobald visuelle Übergänge oder Designanimationen abgeschlossen sind, kann sich die Einstellung Alle nicht erforderlichen Animationen deaktivieren (wenn möglich) auf das Timing Ihrer Animationen auswirken. Wenn Sie darüber hinaus ein Element als VisualTransition in einem visuellen Zustand und nicht als Storyboardanimation implementiert haben, möchten Sie dieses möglicherweise als eine echte benutzerdefinierte Animation verwenden, damit es durch die Einstellung Alle nicht erforderlichen Animationen deaktivieren (wenn möglich) nicht deaktiviert wird.

Apps, die für Windows 8 kompiliert wurden, aber unter Windows 8.1 ausgeführt werden, verwenden weiterhin die Windows 8-Verhaltensweisen für Designanimationen und visuelle Übergänge. Designübergänge werden jedoch durch die Einstellung in Windows 8.1 deaktiviert, selbst wenn eine App nicht neu kompiliert wird.

Inhalts- und Eingangsübergang

Verwenden Sie Inhaltsübergangsanimationen (ContentThemeTransition), um Inhalte in die oder aus der aktuelle(n) Ansicht zu verschieben. Die Inhaltsübergangsanimationen werden z. B. verwendet, um Inhalt anzuzeigen, der beim ersten Laden der Seite noch nicht anzeigebereit war, oder wenn der Inhalt eines Seitenabschnitts geändert wird.

Die XAML-Animationsbibliothek weist kein Animationskonzept auf, das beim Laden der Seite für die gesamte Seite gilt. Es verfügt aber über einen separaten Übergang (EntranceThemeTransition), der auf Inhalt angewendet werden kann, wenn die Seite mit dem Inhalt zuerst geladen und der Teil des Inhalts gerendert wird. Daher kann der erste Eindruck eines Inhalts anderes Feedback vermitteln als eine Inhaltsänderung.

Weitere Infos finden Sie unter Animieren von Inhalts- und Eingangsübergängen.

Ein-, Aus- und Überblenden

Verwenden Sie die Ein-und Ausblendungsanimationen, um vorübergehend angezeigte Benutzeroberflächen oder Steuerelemente ein- bzw. auszublenden. In XAML werden diese als FadeInThemeAnimation und FadeOutThemeAnimation dargestellt. Ein Beispiel ist eine App-Leiste, auf der aufgrund einer Benutzerinteraktion neue Steuerelemente angezeigt werden können. Ein anderes Beispiel ist eine vorübergehend angezeigte Bildlaufleiste oder Schwenkmarkierung, die ausgeblendet wird, wenn eine Zeit lang keine Benutzereingabe erkannt wurde. Apps sollten die Einblendungsanimation auch für den Übergang zwischen einem Platzhalterelement und dem endgültigen Element verwenden, wenn Inhalte dynamisch geladen werden.

Verwenden Sie eine Überblendungsanimation, um einen weichen Übergang zu erreichen, wenn sich der Zustand eines Elements ändert, z. B. wenn die aktuellen Inhalte einer Ansicht aktualisiert werden. Die XAML-Animationsbibliothek stellt keine dedizierte Überblendungsanimation (keine Entsprechung für crossFade) bereit, aber Sie können dasselbe Ergebnis durch Verwendung von FadeInThemeAnimation und FadeOutThemeAnimation mit überlappendem Timing erzielen.

Weitere Infos finden Sie unter Animieren von Ein- und Ausblendungen.

Zeiger hoch/runter

Verwenden Sie die PointerUpThemeAnimation- und PointerDownThemeAnimation-Animationen, um dem Benutzer Feedback bei einem erfolgreichen Tippen oder Klicken auf eine Kachel zu geben. Wenn ein Benutzer beispielsweise auf eine Kachel klickt oder tippt, wird die Animation für Zeiger runter wiedergegeben. Sobald das Klicken oder Tippen beendet wird, wird die Animation für Zeiger hoch wiedergegeben.

Weitere Infos finden Sie unter Animieren von Zeigeraktionen.

Ändern der Position

Verwenden Sie die Animationen für das Ändern der Position (RepositionThemeAnimation oder RepositionThemeTransition), um ein Element an eine neue Position zu verschieben. Das Verschieben der Kopfzeilen in Steuerelement für Kopfzeilenelemente verwendet beispielsweise die Animation für das Ändern der Position.

Weitere Infos finden Sie unter Animieren von Änderungen der Position.

Popup einblenden/ausblenden

Verwenden Sie die PopInThemeAnimation und PopOutThemeAnimation, wenn Sie ein Popup oder ähnliche kontextabhängige UI oben in der aktuellen Ansicht ein- und ausblenden möchten. PopupThemeTransition ist ein Designübergang, der hilfreiches Feedback bietet, wenn Sie ein Popup leicht ausblenden möchten.

Weitere Informationen finden Sie unter Animieren von Popupbenutzeroberflächen.

Rand-UI einblenden/ausblenden

Verwenden Sie die EdgeUIThemeTransition-Animationen, um kleine UI-Elemente am Bildschirmrand in die und aus der Ansicht zu verschieben. Verwenden Sie diese Animationen zum Beispiel, wenn Sie eine benutzerdefinierte App-Leiste oben oder unten auf dem Bildschirm oder ein Oberflächenelement für Fehler und Warnungen oben auf dem Bildschirm anzeigen.

Verwenden Sie die PaneThemeTransition-Animation, um einen Bereich oder ein Panel ein- oder auszublenden. Dies ist für große randbasierte UI vorgesehen, z. B. eine benutzerdefinierte Tastatur oder ein Aufgabenbereich.

Weitere Informationen finden Sie unter Animieren von randbasierten Benutzeroberflächen.

Listenelementänderungen

Verwenden Sie die AddDeleteThemeTransition-Animation, um dem Hinzufügen oder Löschen von Listenelementen animiertes Verhalten hinzuzufügen. Beim Hinzufügen ordnet der Übergang zunächst vorhandene Elemente in der Liste neu an, um Platz für die neuen Elemente zu schaffen, und fügt dann die neuen Elemente hinzu. Beim Löschen entfernt der Übergang Elemente aus einer Liste und ordnet die verbleibenden Listenelemente bei Bedarf neu an, wenn die gelöschten Elemente entfernt wurden.

Es besteht zudem eine separate ReorderThemeTransition, die zum Ändern der Position in einer Liste verwendet wird. Diese wird anders als die Löschung eines Elements und das Hinzufügen des Elements an einer neuen Position mit den zugeordneten Animationen für das Löschen/Hinzufügen animiert.

Weitere Infos finden Sie unter Animieren von Listenelementänderungen.

Drag & Drop

Verwenden Sie die Ziehanimation (DragItemThemeAnimation, DragOverThemeAnimation) und die Ablegeanimation (DropTargetItemThemeAnimation), um visuelles Feedback zu geben, wenn der Benutzer ein Element zieht oder ablegt.

Wenn aktiv, zeigen die Animationen dem Benutzer an, dass die Liste um ein abgelegtes Element neu angeordnet werden kann. Für Benutzer ist es hilfreich, zu wissen, wo das Element in einer Liste platziert wird, wenn es am aktuellen Ort abgelegt wird. Die Animationen geben visuelles Feedback dazu, dass ein gezogenes Element zwischen zwei anderen Elementen in der Liste abgelegt werden kann und dass diese Elemente den Platz freigegeben.

Weitere Infos finden Sie unter Animieren von Drag & Drop-Sequenzen.

Streifbewegungen

Verwenden Sie die SwipeHintThemeAnimation-Animation, um anzuzeigen, dass eine Kachel die Streifeninteraktion unterstützt. Benutzer können nach unten Streifen, um eine Kachel auszuwählen. Falls ein Benutzer nicht weiß, dass er auf einer Kachel streifen kann, wird durch eine Gedrückthaltebewegung auf der Kachel die Animation für den Streifenhinweis wiedergegeben, um den Benutzer darauf hinzuweisen, dass er mit der Kachel durch Streifen interagieren sollte.

Verwenden Sie die SwipeBackThemeAnimation-Animation, um anzuzeigen, dass die Kachel ausgewählt wurde, und die Kachel wieder in die Ruheposition zu bringen.

Weitere Infos finden Sie unter Animieren von Streifbewegungen.

Verwenden von Animationen mit benutzerdefinierten Steuerelementen

In der folgenden Tabelle werden die Animationen zusammengefasst, die zum Erstellen einer benutzerdefinierten Version dieser Windows-Runtime-Steuerelemente verwendet werden sollten:

UI-TypEmpfohlene Animation
Dialogfeld FadeInThemeAnimation und FadeOutThemeAnimation
Flyout PopInThemeAnimation und PopOutThemeAnimation
QuickInfo FadeInThemeAnimation und FadeOutThemeAnimation
Kontextmenü PopInThemeAnimation und PopOutThemeAnimation
Befehlsleiste EdgeUIThemeTransition
Aufgabenbereich oder randbasiertes Panel PaneThemeTransition
Inhalt eines UI-Containers ContentThemeTransition
Für Steuerelemente oder wenn keine andere Animation zutrifft FadeInThemeAnimation und FadeOutThemeAnimation

 

Verwandte Themen

Roadmap für Windows-Runtime-Apps mit C# oder Visual Basic
XAML-Beispiel für Charakteranimationen
HTML-Beispiel für Animationsbibliothek
Windows.UI.Xaml.Media.Animation namespace

 

 

Anzeigen:
© 2014 Microsoft