Language: HTML | XAML

Animieren der randbasierten Benutzeroberfläche (Windows Store-Apps mit JavaScript und HTML)

Applies to Windows only

Verwenden Sie Animationen für randbasierte Benutzeroberflächen zum Anzeigen oder Ausblenden von Benutzeroberflächen, die vom Bildschirmrand ausgehen. Diese Benutzeroberflächenelemente 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-Benutzeroberflächenelementen, und das Animationsverhalten wird durch einfaches Integrieren dieser Steuerelemente in die Benutzeroberfläche erzielt.

Die Benutzeroberflächenelemente 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.

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 Benutzeroberflächenelementen:

Das folgende Video zeigt die Animationen für das Ein- und Ausblenden von Panels:

  • Verwenden Sie Animationen für Rand-Benutzeroberflächenelemente für kleinere randbasierte Benutzeroberflächenelemente, 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-Benutzeroberflächenelemente für randbasierte Benutzeroberflächenelemente, die im Allgemeinen größer sind und einen größeren Teil des Bildschirms belegen (z. B. die Bildschirmtastatur).

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.

    Illustration des Offset-Bereichs

Randbasierte Animationen in standardmäßigem Windows-Runtime-Steuerelementverhalten

Die empfohlene Methode zur Integration von Rand-Benutzeroberflächenelementen 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 Benutzeroberflächenelemente. 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-Benutzeroberflächenelemente 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 Benutzeroberflächenelemente 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 Benutzeroberflächenelemente.

Verwandte Themen

Animieren der Benutzeroberfläche
showEdgeUI
hideEdgeUI
showPanel
hidePanel

 

 

Anzeigen:
© 2014 Microsoft