Animieren der Benutzeroberfläche (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]
Sie können das Windows 8-Erscheinungsbild mithilfe der Animationsbibliothek der von Windows bereitgestellten Animationen in Windows Store-Apps integrieren. Dieser Artikel enthält eine Zusammenfassung der Animationen und Beispiele für typische Szenarien, in denen die Animationsbibliothek verwendet werden kann.
Die Verwendung der Animationen aus der Animationsbibliothek bietet folgende Vorteile:
- Bewegungen, die an die Animationsprinzipien von Windows Store-Apps angepasst sind.
- Schnelle, flüssige Übergänge zwischen UI-Zuständen, die den Benutzer informieren, aber nicht ablenken.
- Bessere Grafik zum Anzeigen der Benutzerübergänge innerhalb einer App
Wenn der Benutzer z. B. einer Liste ein Element hinzufügt, wird das neue Element nicht sofort in der Liste angezeigt, sondern mit einer Animation eingeblendet, und die anderen Elemente in der Liste werden per Animation an ihre neuen Positionen verschoben, um Platz für das hinzugefügte Element zu schaffen. Dadurch wird die Aktion auf eine Art und Weise für den Benutzer verdeutlicht, die bei sofortigen Übergängen nicht möglich ist.
Beachten Sie, dass alle in Windows 8 eingeführten Steuerelemente wie ListView, FlipView, Flyout und AppBar Animationen aus der Animationsbibliothek verwenden. Wenn Sie diese Steuerelemente in einer App verwenden, erreichen Sie ein Erscheinungsbild im Stil von Windows Store-App-Animationen, ohne solche selbst programmieren zu müssen.
Die Animationsbibliothek deckt nicht alle vorstellbaren Szenarien ab, und es gibt Fälle, in denen Sie es vielleicht vorziehen würden, eine benutzerdefinierte Animation zur Darstellung Ihrer Marke zu erstellen. Überlegen Sie genau, ob und wann Sie eigene Animationen verwenden. Dafür sollte immer ein stichhaltiger Grund vorliegen, z. B. spezielle Brandingzwecke oder das Fehlen einer Animation in der Animationsbibliothek für das betreffende Szenario.
Beispielcode mit den in diesem Thema beschriebenen APIs finden Sie unter HTML-Beispiel für Animationsbibliothek.
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 wichtigsten Verwendungsszenarien und die zum Ausführen verwendeten Funktionen zu erfahren und eine Beispielanimation anzuzeigen.
- Seitenübergang: Blendet die Inhalte einer Seite per Animation ein oder aus.
- Inhaltsübergang: Blendet eines oder mehrere Inhaltselemente per Animation ein oder aus.
- Einblenden/Ausblenden: Zeigt Übergangselemente oder Steuerelemente an.
- Überblenden: Aktualisiert einen Inhaltsbereich.
- Zeiger hoch/runter: Gibt visuelles Feedback beim Tippen oder Klicken auf eine Kachel.
- Erweitern/Reduzieren: Zeigt zusätzliche Inlineinformationen an.
- Ändern der Position: Verschiebt ein Element an eine neue Position.
- Popup einblenden/ausblenden: Zeigt Kontext-UI oben in der Ansicht an.
- Rand-UI einblenden/ausblenden: Verschiebt UI am Bildschirmrand in die oder aus der Ansicht.
- Panel einblenden/ausblenden: Verschiebt große Panels am Bildschirmrand in die oder aus der Ansicht.
- Zur Liste hinzufügen/aus Liste löschen: Fügt ein Element einer Liste hinzu oder löscht es daraus.
- Zur Suchliste hinzufügen/aus Suchliste löschen: Fügt ein Element beim Filtern von Suchergebnissen einer Liste hinzu oder löscht es daraus.
- Vorschau: Aktualisiert die Inhalte einer Kachel.
- Signalaktualisierung: Aktualisiert ein numerisches Signal.
- Ziehen starten/beenden oder Ziehen zwischen Eingang/Ausgang: Gibt visuelles Feedback während eines Drag & Drop-Vorgangs.
- Streifenhinweis: Weist darauf hin, dass eine Kachel die Streifeninteraktion unterstützt.
- Durch Streifen auswählen/Auswahl durch Streifen aufheben: Aktiviert für eine Kachel den Status der Auswahl durch Streifen.
Seitenübergang
Seitenübergänge blenden die Inhalte einer Seite per Animation ein oder aus. Sie werden sowohl für die Anzeige der ersten App-Seite nach dem Begrüßungsbildschirm als auch den Übergang zwischen den Seiten einer App verwendet.
Das folgende Video zeigt die Animation, mit der eine Inhaltsseite eingeblendet wird:
Das folgende Video zeigt die Animationen, mit denen der Übergang zwischen zwei Inhaltsseiten gestaltet wird:
Weitere Informationen zur UX und zur Verwendung finden Sie unter Richtlinien und Prüfliste für Seitenübergangsanimationen.
Verwenden Sie diese APIs zum Ausführen dieser Animation in JavaScript-Code:
Inhaltsübergang
Verwenden Sie Inhaltsübergangsanimationen, um Inhalte in die oder aus der aktuelle(n) Ansicht zu verschieben. Inhaltsübergänge betreffen Elemente auf einer Seite. Sie sind nicht mit Seitenübergängen zu verwechseln, mit denen der Übergang für ganze Seiten ausgeführt wird. 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.
Das folgende Video zeigt die Animationen, mit denen vorhandene Inhalte entfernt und neue Inhalte sichtbar gemacht werden:
Weitere Informationen zur UX und zur Verwendung finden Sie unter Richtlinien und Prüfliste für Inhaltsübergangsanimationen.
Verwenden Sie diese APIs zum Ausführen dieser Animation in JavaScript-Code:
Einblenden/Ausblenden
Verwenden Sie die Ein-und Ausblendungsanimationen, um vorübergehend angezeigte Benutzeroberflächen oder Steuerelemente ein- bzw. auszublenden. 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.
Das folgende Video zeigt die Animationen, mit denen Inhalt ein- und ausgeblendet wird. Achten Sie auf die Bildlaufleiste am unteren Bildschirmrand, die ein- und ausgeblendet wird:
Weitere Informationen zur UX und zur Verwendung finden Sie unter Richtlinien und Prüfliste für Ein- und Ausblendungsanimationen.
Verwenden Sie diese APIs zum Ausführen dieser Animation in JavaScript-Code:
Überblenden
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.
Das folgende Video zeigt die Überblendungsanimation:
Weitere Informationen zur UX und zur Verwendung finden Sie unter Richtlinien und Prüfliste für Ein- und Ausblendungsanimationen.
JavaScript: Verwenden Sie diese APIs zum Ausführen dieser Animation:
Zeiger hoch/runter
Verwenden Sie die Animationen für Zeiger hoch und Zeiger unter, 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 der Benutzer das Klicken oder Tippen beendet, wird die Animation für Zeiger hoch wiedergegeben.
Das folgende Video zeigt die Animationen für das Bewegen des Zeigers nach unten und oben:
Weitere Informationen zu UX und Hilfe zur Nutzung finden Sie unter Richtlinien und Prüfliste für Zeigeranimationen.
Verwenden Sie diese APIs zum Ausführen dieser Animation in JavaScript-Code:
Erweitern/Reduzieren
Verwenden Sie die Erweitertenanimation, um zusätzlichen Platz im Inhalt der Ansicht hinzuzufügen und so zusätzliche Inlineinformationen anzuzeigen. Zum Beispiel führt das Aussehen einer Fehlermeldung dazu, dass andere Inhalte in der Ansicht verschoben werden, um Platz für die Fehlermeldung zu schaffen. Die Reduzierungsanimation blendet diesen zusätzlichen Inhalt aus, um weniger Details zu einem bestimmten Element anzuzeigen. Die Reduzierungsanimation wird normalerweise durch eine Benutzeraktion ausgelöst.
Das folgende Video zeigt die Erweiterungs- und Reduzierungsanimationen:
Verwenden Sie diese APIs zum Ausführen dieser Animation in JavaScript-Code:
Ändern der Position
Verwenden Sie die Animation zum Ändern der Position, um ein Element an eine neue Position zu verschieben. Die Animation zum Ändern der Position kann zum Beispiel verwendet werden, um die Kopfzeilen in einer Panoramaansicht du verschieben.
Das folgende Video zeigt die Positionsänderungsanimation:
Weitere Informationen zur UX und zur Verwendung finden Sie unter Richtlinien und Prüfliste für Positionsänderungsanimationen.
JavaScript: Verwenden Sie diese APIs zum Ausführen dieser Animation:
Popup-UI einblenden/ausblenden
Verwenden Sie die Animationen zum Ein- und Ausblenden von Popup-UI zum Ein- bzw. Ausblenden von kontextabhängiger UI oben in der aktuellen Ansicht. Eine Popup-UI kann beispielsweise detailliertere Informationen zu einem Element in einem Element angeben. Verwenden Sie die Animationen zum Ein- und Ausblenden von Popup-UI, wenn Sie ein benutzerdefiniertes Kontextmenü oder Flyout anzeigen.
Das folgende Video zeigt die Animationen zum Ein- und Ausblenden von Popups:
Weitere Informationen zur UX und zur Verwendung finden Sie unter Popup-Benutzeroberflächenanimationen.
Verwenden Sie diese APIs zum Ausführen dieser Animation in JavaScript-Code:
Rand-UI einblenden/ausblenden
Verwenden Sie die Animationen zum Einblenden und Ausblenden von Rand-UI-Elementen, 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 unten auf dem Bildschirm oder eine Benutzeroberfläche für Fehler und Warnungen oben auf dem Bildschirm anzeigen.
Das folgende Video zeigt die Animationen zum Ein- und Ausblenden von randbasierten Benutzeroberflächen:
Weitere Informationen zu UX und Hilfe zur Nutzung finden Sie unter Richtlinien und Prüfliste für randbasierte Animationen.
Verwenden Sie diese APIs zum Ausführen dieser Animation in JavaScript-Code:
Panel einblenden/ausblenden
Verwenden Sie die Animationen zum Einblenden und Ausblenden eines Panels, eine große, randbasierte UI, zum Beispiel ein benutzerdefinierter Tastatur- oder Aufgabenbereich. Verwechseln Sie diese Animationen nicht mit den Animationen zum Einblenden und Ausblenden von UI-Animationen, die bei kleinen UI-Elementen verwendet werden, die den Rand als Eingangs- und Ausgangspunkt nutzen.
Das folgende Video zeigt die Animationen zum Ein- und Ausblenden von Panels:
Weitere Informationen zu UX und Hilfe zur Nutzung finden Sie unter Richtlinien und Prüfliste für randbasierte Animationen.
Verwenden Sie diese APIs zum Ausführen dieser Animation in JavaScript-Code:
Zur Liste hinzufügen/aus Liste löschen
Verwenden Sie die Animationen zum Hinzufügen zur Liste und zum Löschen aus der Liste, wenn Sie ein Element in einer vorhandenen ein- oder zweidimensionalen Liste hinzufügen oder entfernen. Die Animation zum Hinzufügen zur Liste positioniert zunächst vorhandene Elemente in der Liste neu, um Platz für die neuen Elemente zu schaffen, und fügt dann die neuen Elemente hinzu. Die Animation zum Löschen aus der Liste entfernt Elemente aus einer Liste und positioniert die verbleibenden Listenelemente bei Bedarf neu, wenn die gelöschten Elemente entfernt wurden.
Das folgende Video zeigt die Animationen für das Hinzufügen und Entfernen von Elementen in einer Liste:
Weitere Informationen zu UX und Hilfe zur Nutzung finden Sie unter Richtlinien und Prüfliste für Listenanimationen.
Verwenden Sie diese APIs zum Ausführen dieser Animation in JavaScript-Code:
Zur Suchliste hinzufügen/aus Suchliste löschen
Verwenden Sie die Animationen zum Hinzufügen zur Suchliste und zum Löschen aus der Suchliste, wenn sich die Elemente in einer Liste während einer Suche schnell ändern. Beachten Sie, dass die Suchlistenanimationen schneller sind als die standardmäßigen Listenanimationen. Wenn ein Benutzer z. B. einen Suchbegriff eingibt und die Liste die Ergebnisse in Echtzeit filtert, sollte für die herausgefilterten Elemente die Animation zum Löschen aus der Suchliste verwendet werden. Im umgekehrten Fall kann ein Benutzer nach einer Zeichenfolge suchen und dann mit der RÜCKTASTE ein Zeichen entfernen. Da dadurch der Suchergebnisliste wieder Elemente hinzugefügt werden, sollten Sie hierfür die Animation zum Hinzufügen zur Suchliste verwenden.
Das folgende Video zeigt die Animationen für das Hinzufügen und Entfernen von Elementen in einer Suchliste:
Weitere Informationen zu UX und Hilfe zur Nutzung finden Sie unter Richtlinien und Prüfliste für Listenanimationen.
Verwenden Sie diese APIs zum Ausführen dieser Animation in JavaScript-Code:
Vorschau
Verwenden Sie die Vorschauanimation (Peek), um eine Kachel zu aktualisieren, wenn die Kachel zwischen der Anzeige eines Bilds und eines Textes wechselt und die Kachelhöhe nicht ausreicht, um beides gleichzeitig anzuzeigen. Verwenden Sie diese Animation auch, wenn durch eine Reihe von Bildern auf einer Kachel geblättert wird.
Das folgende Video zeigt die Vorschauanimation:
JavaScript: Verwenden Sie diese APIs zum Ausführen dieser Animation:
Signalaktualisierung
Verwenden Sie die Signalaktualisierung zum Aktualisieren von Signalen, die eine Zahl anzeigen. Eine E-Mail-App, die die Anzahl ungelesener E-Mails anzeigt, kann beispielsweise die Animation zur Signalaktualisierung verwenden, um diesen Wert zu aktualisieren.
Das folgende Video zeigt die Animationen zum Aktualisieren eines Signals:
JavaScript: Verwenden Sie diese APIs zum Ausführen dieser Animation:
Ziehen starten/beenden oder Ziehen zwischen Engang/Ausgang
Verwenden Sie die Ziehanimationen, um visuelles Feedback zu geben, wenn der Benutzer ein Element zieht oder ablegt. Verwenden Sie die Animation zum Starten des Ziehens, wenn der Benutzer damit beginnt, ein Element zu ziehen. Verwenden Sie die Animation zum Beenden des Ziehens, wenn der Benutzer das Element ablegt.
Sie können auch die Animationen für das Ziehen zwischen Eingang und Ausgang verwenden, um dem Benutzer zu zeigen, dass die Liste um ein abgelegtes Element herum 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 zum Ziehen zwischen Eingang/Ausgang geben visuelles Feedback dazu, dass ein gezogenes Element zwischen zwei anderen Elementen in der Liste abgelegt werden kann und diese anderen Elemente entsprechend verschoben werden.
Das folgende Video zeigt die Animationen für einen Drag & Drop-Vorgang:
Weitere Informationen zu UX und Hilfe zur Nutzung finden Sie unter Richtlinien und Prüfliste für Drag & Drop-Animationen.
Verwenden Sie diese APIs zum Ausführen dieser Animation in JavaScript-Code:
Streifenhinweis
Verwenden Sie die Animation für den Streifenhinweis, um zu zeigen, 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.
Das folgende Video zeigt die Animation für die Streifbewegung:
JavaScript: Verwenden Sie diese APIs zum Ausführen dieser Animation:
Durch Streifen auswählen/Auswahl durch Streifen aufheben
Verwenden Sie die Animation zum Auswählen durch Streifen, wenn ein Element per Streifinteraktion ausgewählt wurde, um anzuzeigen, dass die Kachel jetzt ausgewählt ist, und die Kachel wieder in die Ruheposition zu bringen. Verwenden Sie die Animation zum Aufheben der Auswahl durch Streifen, wenn die Auswahl einer Kachel per Streifbewegung aufgehoben wird.
Das folgende Video zeigt die Animationen zum Auswählen und Aufheben der Auswahl durch Wischen:
Verwenden Sie diese APIs zum Ausführen dieser Animation in JavaScript-Code:
Verwenden von Animationen mit benutzerdefinierten Steuerelementen
In der folgenden Tabelle ist aufgeführt, welche Animationen Sie verwenden sollten, wenn Sie eine benutzerdefinierte Version dieser Systemsteuerelemente erstellen:
| UI-Typ | Empfohlene Animation |
|---|---|
| Dialogfeld | fadeIn und fadeOut |
| Flyout | showPopup und hidePopup |
| QuickInfo | fadeIn und fadeOut |
| Kontextmenü | showPopup und hidePopup |
| Befehlsleiste | showEdgeUI und hideEdgeUI |
| Aufgabenbereich oder am Rand angezeigter Bereich | showPanel und hidePanel |
| Inhalt eines UI-Containers | enterContent und exitContent |
| Für Steuerelemente oder wenn keine andere Animation zutrifft | fadeIn und fadeOut |
Verwandte Themen
HTML-Beispiel für Animationsbibliothek