Animieren von randbasierten Benutzeroberflächen (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 Animationen für randbasierte Benutzeroberflächen zum Anzeigen oder Ausblenden von Benutzeroberflächen, die vom Bildschirmrand ausgehen. Diese UI-Elemente können von Benutzern oder von der App angezeigt werden. Diese Animationen sind hauptsächlich für die Verwendung in benutzerdefinierten Steuerelementen vorgesehen. Vorhandene Steuerelemente wie AppBar verfügen über integrierte Bibliotheksanimationen für Rand-UI-Elementen, und das Animationsverhalten wird durch einfaches Integrieren dieser Steuerelemente in die Benutzeroberfläche erzielt.
Die UI-Elemente können die Anwendung überlagern oder Teil der Hauptoberfläche der App sein. Wenn das Benutzeroberflächenelement Teil der Hauptoberfläche der App ist, müssen Sie möglicherweise die Größe der restlichen App ändern, um Platz für das neue Benutzeroberflächenelement zu schaffen, wenn dieses angezeigt wird.
.png "Einfaches Diagramm eines randbasierten Elements")
Dieser Satz von Animationen umfasst die folgenden APIs:
Es gibt zwei Arten von randbasierten Elementen mit jeweils eigenen Sätzen von Animations-APIs: Randbenutzeroberflächen und Panelbenutzeroberflächen.
Das folgende Video zeigt die Animationen zum Ein- und Ausblenden von randbasierten UI-Elementen:
Das folgende Video zeigt die Animationen für das Ein- und Ausblenden von Panels:
- Verwenden Sie Animationen für Rand-UI-Elemente für kleinere randbasierte UI-Elemente, wenn Sie ein benutzerdefiniertes Steuerelement animieren möchten, dessen Verhalten AppBar entspricht. Sie sollten auch einen Benutzeroberflächenbereich für Fehler und Warnungen definieren, die sich aus Aktionen der App ergeben. Beachten Sie in diesem Fall jedenfalls die Richtlinien für Flyouts. Rand-UI ist möglicherweise nicht für Ihr Szenario geeignet.
- Verwenden Sie Animationen für Panel-UI-Elemente für randbasierte UI-Elemente, die im Allgemeinen größer sind und einen größeren Teil des Bildschirms belegen (z. B. die Bildschirmtastatur).
.png "Abbildung, die den Größenunterschied zwischen einer Randbenutzeroberfläche und einer Panelbenutzeroberfläche zeigt")
Wichtig Das von Windows bereitgestellte Steuerelement für die App-Leiste enthält die Animationen für Randbenutzeroberflächen. Wenn Sie dieses Steuerelement verwenden, müssen Sie die Animationen nicht selbst angeben.
Für die Verwendung dieser Animationen benötigen Sie folgende Infos:
Das Objekt, das ein- oder ausgeblendet wird.
Die Strecke (Offset), die das Objekt zurücklegt. Hierbei handelt es sich um den endgültigen Abstand zwischen dem inneren Rand des UI-Elements und dem Bildschirmrand.
.png "Illustration des Offset-Bereichs")
Randbasierte Animationen in standardmäßigem Windows-Runtime-Steuerelementverhalten
Die empfohlene Methode zur Integration von Rand-UI-Elementen ist das Hinzufügen eines AppBar-Elements, das automatisch alle entsprechenden Übergänge und Interaktionsverhalten für Sie anwendet. Weitere Informationen finden Sie unter Hinzufügen von App-Leisten.
Flyoutobjekte (Flyout, Menu oder SettingsFlyout) verfügen ebenfalls über integrierte Animationen, bei ihnen handelt es sich aber nicht wirklich um randbasierte UI-Elemente. Flyouts sind mit dem Kontext verknüpft, durch den sie angezeigt werden, und nicht mit dem Rand des App-Fensters. Sie können Flyouts für Benutzeroberflächen verwenden, die über ein AppBar-Element aufgerufen werden. Auch hier gilt wieder, dass es sich nicht um reine Rand-UI-Elemente handelt. Weitere Informationen finden Sie unter Hinzufügen von Flyouts und Animieren von Popupbenutzeroberflächen.
Weitere Ressourcen
Codebeispiele zur Verwendung der APIs für Animationen für randbasierte UI-Elemente finden Sie unter HTML-Beispiel für die Animationsbibliothek.
Bewährte Methoden für den Entwurf mit diesen Animationen finden Sie unter Richtlinien und Prüfliste für Animationen für randbasierte UI-Elemente.