Animieren von Popupbenutzeroberflä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 Popupanimationen, um Popup-UI-Elemente wie Kontextmenüs und Flyouts anzuzeigen und auszublenden. Popupelemente sind Container, die über dem Inhalt der App angezeigt werden und ausgeblendet werden, wenn Benutzer außerhalb des Popupelements tippen oder klicken. Diese Animationen dienen in erster Linie für benutzerdefinierte Steuerelemente. Die Flyout- und Menu-Steuerelemente enthalten die Popupanimationen. Wenn Sie diese Steuerelemente in einer App verwenden, müssen Sie die Animationen nicht selbst angeben.
Dieser Satz von Animationen umfasst die folgenden APIs:
Das folgende Video zeigt die Animationen für das Anzeigen und Ausblenden von Popup-UI-Elementen:
Die showPopup-Animation enthält eine Translation, d. h. eine vertikale Verschiebung von einer Anfangsposition zur endgültigen Position, wenn das Popupelement eingeblendet wird. Distanz und Richtung der Umwandlung werden von der App angegeben. In den meisten Fällen sollte die Umwandlung 50 Pixel für eine Verschiebung nach oben betragen. Wenn das Popupelement jedoch unter dem Benutzeroberflächenelement angezeigt wird, das das Popup ausgelöst hat, sollte die Umwandlung 50 Pixel nach unten betragen. Diese nach unten gerichtete Umwandlung könnte beispielsweise für ein Flyout gelten, das von einer Navigationsleiste oder einem App-Header ausgelöst wird. Hiermit soll für die Benutzer ein visueller Bezug zwischen dem Popupelement und dem auslösenden Element hergestellt werden.
Um die Popupanimationen zu verwenden, müssen Sie das Objekt kennen, das ein- oder ausgeblendet wird. Für showPopup müssen Sie außerdem den Offset kennen, um den das eingeblendete Objekt verschoben wird.
Weitere Ressourcen
Codebeispiele zur Verwendung der APIs für Animationen für Popup-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 Popup-Benutzeroberflächenanimationen.
Verwandte Themen
Animieren der Benutzeroberfläche