Verbundene Animation für Windows-Apps
Mit verbundenen Animationen können Sie dynamische und ansprechende Navigationsfunktionen erstellen, indem Sie den Übergang eines Elements zwischen zwei verschiedenen Ansichten animieren. Dies hilft dem Benutzer, seinen Kontext zu verwalten, und sorgt für Kontinuität zwischen den Ansichten.
In einer verbundenen Animation scheint ein Element während einer Änderung des UI-Inhalts zwischen zwei Ansichten zu "fortfahren" und über den Bildschirm von seiner Position in der Quellansicht bis zu seinem Ziel in der neuen Ansicht zu fliegen. Dies unterstreicht den gemeinsamen Inhalt zwischen den Ansichten und erzeugt einen schönen und dynamischen Effekt als Teil eines Übergangs.
Wichtige APIs: ConnectedAnimation-Klasse, ConnectedAnimationService-Klasse
Beispiele
| WinUI 2-Katalog | |
|---|---|
 |
Wenn Sie die WinUI 2-Katalog-App installiert haben, klicken Sie hier, um die App zu öffnen und Verbundene Animation in Aktion zu sehen. |
In diesem kurzen Video verwendet eine App eine verbundene Animation, um ein Elementbild zu animieren, während es "weiterhin" Teil der Kopfzeile der nächsten Seite wird. Der Effekt hilft dabei, den Benutzerkontext über den gesamten Übergang hinweg beizubehalten.
Verbundene Animation und die Fluent Design System
Mit dem Fluent Design-System erstellen Sie moderne Oberflächen, die Licht, Tiefe, Bewegung, Material und Skalierungsmöglichkeiten beinhalten. Verbundene Animation ist eine Fluent Design System Komponente, die Ihrer App Bewegung hinzufügt. Weitere Informationen finden Sie in der Übersicht über Fluent Design.
Gründe für verbundene Animationen
Beim Navigieren zwischen Seiten ist es für den Benutzer wichtig zu verstehen, welche neuen Inhalte nach der Navigation präsentiert werden und wie er sich auf seine Absicht beim Navigieren bezieht. Verbundene Animationen bieten eine leistungsstarke visuelle Metapher, die die Beziehung zwischen zwei Ansichten betont, indem sie den Fokus des Benutzers auf den zwischen ihnen freigegebenen Inhalt lenken. Darüber hinaus verleihen verbundene Animationen visuelles Interesse und optimieren die Seitennavigation, um das Bewegungsdesign Ihrer App zu unterscheiden.
Verwendung von verbundenen Animationen
Verbundene Animationen werden in der Regel beim Ändern von Seiten verwendet, obwohl sie auf jede Benutzeroberfläche angewendet werden können, in der Sie Inhalte in einer Benutzeroberfläche ändern und den Benutzer den Kontext beibehalten sollen. Sie sollten erwägen, eine verbundene Animation anstelle eines Drillvorgangs für den Navigationsübergang zu verwenden, wenn ein Bild oder ein anderer Teil der Benutzeroberfläche zwischen der Quell- und zielansicht gemeinsam genutzt wird.
Konfigurieren der verbundenen Animation
Wichtig
Für dieses Feature muss die Zielversion Ihrer App Windows 10, Version 1809 (SDK 17763) oder höher sein. Die Configuration-Eigenschaft ist in früheren SDKs nicht verfügbar. Sie können eine Mindestversion unter SDK 17763 mit adaptivem Code oder bedingtem XAML als Ziel verwenden. Weitere Informationen finden Sie unter Versionsadaptive Apps.
Ab Windows 10, Version 1809 verkörpern verbundene Animationen das Fluent-Design weiter, indem sie Speziell für die Vorwärts- und Rückwärtsnavigation auf Seiten angepasste Animationskonfigurationen bereitstellen.
Sie geben eine Animationskonfiguration an, indem Sie die Configuration-Eigenschaft für ConnectedAnimation festlegen. (Beispiele hierfür werden im nächsten Abschnitt gezeigt.)
In dieser Tabelle werden die verfügbaren Konfigurationen beschrieben. Weitere Informationen zu den Bewegungsprinzipien, die in diesen Animationen angewendet werden, finden Sie unter Richtungs- und Schwerkraft.
| GravityConnectedAnimationConfiguration |
|---|
| Dies ist die Standardkonfiguration und wird für die Vorwärtsnavigation empfohlen. |
| Wenn der Benutzer in der App vorwärts navigiert (A bis B), scheint das verbundene Element physisch "die Seite abzuziehen". Dabei scheint sich das Element im Z-Raum vorwärts zu bewegen und fällt ein bisschen ab, als Effekt, dass sich die Schwerkraft festhält. Um die Auswirkungen der Schwerkraft zu überwinden, gewinnt das Element an Geschwindigkeit und beschleunigt in seine endgültige Position. Das Ergebnis ist eine Animation zum Skalieren und Abtauchen. |
| DirectConnectedAnimationConfiguration |
|---|
| Wenn der Benutzer in der App rückwärts navigiert (B bis A), ist die Animation direkter. Das verbundene Element wird linear von B zu A übersetzt, indem eine kubische Bézier-Beschleunigungsfunktion verlangsamt wird. Das visuelle Angebot rückwärts kehrt den Benutzer so schnell wie möglich in seinen vorherigen Zustand zurück, während der Kontext des Navigationsflusses beibehalten wird. |
| BasicConnectedAnimationConfiguration |
|---|
| Dies ist die Standardanimation (und nur), die in Versionen vor Windows 10, Version 1809 (SDK 17763) verwendet wurde. |
ConnectedAnimationService-Konfiguration
Die ConnectedAnimationService-Klasse verfügt über zwei Eigenschaften, die auf die einzelnen Animationen und nicht auf den gesamten Dienst angewendet werden.
Um die verschiedenen Effekte zu erzielen, ignorieren einige Konfigurationen diese Eigenschaften für ConnectedAnimationService und verwenden stattdessen ihre eigenen Werte, wie in dieser Tabelle beschrieben.
| Konfiguration | Berücksichtigt DefaultDuration? | Berücksichtigt DefaultEasingFunction? |
|---|---|---|
| Gravity | Ja | Ja* *Die grundlegende Übersetzung von A nach B verwendet diese Beschleunigungsfunktion, aber die "Schwerkrafteintauchung" hat eine eigene Beschleunigungsfunktion. |
| Direkt | Nein Animiert über 150 ms. |
Nein Verwendet die Beschleunigungsfunktion "Verlangsamen". |
| Basic | Ja | Ja |
Implementieren einer verbundenen Animation
Das Einrichten einer verbundenen Animation umfasst zwei Schritte:
- Bereiten Sie ein Animationsobjekt auf der Quellseite vor, das dem System angibt, dass das Quellelement an der verbundenen Animation teilnimmt.
- Starten Sie die Animation auf der Zielseite, und übergeben Sie einen Verweis auf das Zielelement.
Rufen Sie beim Navigieren von der Quellseite ConnectedAnimationService.GetForCurrentView auf, um eine instance von ConnectedAnimationService zu erhalten. Um eine Animation vorzubereiten, rufen Sie PrepareToAnimate für diese instance auf, und übergeben Sie einen eindeutigen Schlüssel und das UI-Element, das Sie beim Übergang verwenden möchten. Mit dem eindeutigen Schlüssel können Sie die Animation später auf der Zielseite abrufen.
ConnectedAnimationService.GetForCurrentView()
.PrepareToAnimate("forwardAnimation", SourceImage);
Wenn die Navigation erfolgt, starten Sie die Animation auf der Zielseite. Rufen Sie ConnectedAnimation.TryStart auf, um die Animation zu starten. Sie können die richtige Animation instance abrufen, indem Sie ConnectedAnimationService.GetAnimation mit dem eindeutigen Schlüssel aufrufen, den Sie beim Erstellen der Animation angegeben haben.
ConnectedAnimation animation =
ConnectedAnimationService.GetForCurrentView().GetAnimation("forwardAnimation");
if (animation != null)
{
animation.TryStart(DestinationImage);
}
Vorwärtsnavigation
In diesem Beispiel wird gezeigt, wie Sie mit ConnectedAnimationService einen Übergang für die Vorwärtsnavigation zwischen zwei Seiten (Page_A zu Page_B) erstellen.
Die empfohlene Animationskonfiguration für die Vorwärtsnavigation ist GravityConnectedAnimationConfiguration. Dies ist die Standardeinstellung, sodass Sie die Configuration-Eigenschaft nicht festlegen müssen, es sei denn, Sie möchten eine andere Konfiguration angeben.
Richten Sie die Animation auf der Quellseite ein.
<!-- Page_A.xaml -->
<Image x:Name="SourceImage"
HorizontalAlignment="Left" VerticalAlignment="Top"
Width="200" Height="200"
Stretch="Fill"
Source="Assets/StoreLogo.png"
PointerPressed="SourceImage_PointerPressed"/>
// Page_A.xaml.cs
private void SourceImage_PointerPressed(object sender, PointerRoutedEventArgs e)
{
// Navigate to detail page.
// Suppress the default animation to avoid conflict with the connected animation.
Frame.Navigate(typeof(Page_B), null, new SuppressNavigationTransitionInfo());
}
protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
ConnectedAnimationService.GetForCurrentView()
.PrepareToAnimate("forwardAnimation", SourceImage);
// You don't need to explicitly set the Configuration property because
// the recommended Gravity configuration is default.
// For custom animation, use:
// animation.Configuration = new BasicConnectedAnimationConfiguration();
}
Starten Sie die Animation auf der Zielseite.
<!-- Page_B.xaml -->
<Image x:Name="DestinationImage"
Width="400" Height="400"
Stretch="Fill"
Source="Assets/StoreLogo.png" />
// Page_B.xaml.cs
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
ConnectedAnimation animation =
ConnectedAnimationService.GetForCurrentView().GetAnimation("forwardAnimation");
if (animation != null)
{
animation.TryStart(DestinationImage);
}
}
Zurück-Navigation
Für die Zurücknavigation (Page_B zu Page_A) führen Sie die gleichen Schritte aus, aber die Quell- und Zielseiten werden umgekehrt.
Wenn der Benutzer zurück navigiert, wird erwartet, dass die App so bald wie möglich in den vorherigen Zustand zurückgerückt wird. Daher wird directConnectedAnimationConfiguration als Konfiguration empfohlen. Diese Animation ist schneller, direkter und verwendet die Beschleunigungsverlangsamung.
Richten Sie die Animation auf der Quellseite ein.
// Page_B.xaml.cs
protected override void OnNavigatingFrom(NavigatingCancelEventArgs e)
{
if (e.NavigationMode == NavigationMode.Back)
{
ConnectedAnimation animation =
ConnectedAnimationService.GetForCurrentView().PrepareToAnimate("backAnimation", DestinationImage);
// Use the recommended configuration for back animation.
animation.Configuration = new DirectConnectedAnimationConfiguration();
}
}
Starten Sie die Animation auf der Zielseite.
// Page_A.xaml.cs
protected override void OnNavigatedTo(NavigationEventArgs e)
{
base.OnNavigatedTo(e);
ConnectedAnimation animation =
ConnectedAnimationService.GetForCurrentView().GetAnimation("backAnimation");
if (animation != null)
{
animation.TryStart(SourceImage);
}
}
Zwischen der Einrichtung der Animation und dem Start wird das Quellelement über einer anderen Benutzeroberfläche in der App fixiert angezeigt. Auf diese Weise können Sie alle anderen Übergangsanimationen gleichzeitig ausführen. Aus diesem Grund sollten Sie nicht länger als ~250 Millisekunden zwischen den beiden Schritten warten, da das Vorhandensein des Quellelements ablenkend werden kann. Wenn Sie eine Animation vorbereiten und nicht innerhalb von drei Sekunden starten, wird die Animation vom System gelöscht, und alle nachfolgenden Aufrufe von TryStart schlagen fehl.
Verbundene Animation in Listen- und Rasterfunktionen
Häufig möchten Sie eine verbundene Animation aus oder mit einem Listen- oder Rastersteuerelement erstellen. Sie können die beiden Methoden in ListView und GridView, PrepareConnectedAnimation und TryStartConnectedAnimationAsync, verwenden, um diesen Prozess zu vereinfachen.
Angenommen, Sie verfügen über eine ListView , die ein Element mit dem Namen "PortraitEllipse" in der Datenvorlage enthält.
<ListView x:Name="ContactsListView" Loaded="ContactsListView_Loaded">
<ListView.ItemTemplate>
<DataTemplate x:DataType="vm:ContactsItem">
<Grid>
…
<Ellipse x:Name="PortraitEllipse" … />
</Grid>
</DataTemplate>
</ListView.ItemTemplate>
</ListView>
Um eine verbundene Animation mit der Ellipse vorzubereiten, die einem bestimmten Listenelement entspricht, rufen Sie die PrepareConnectedAnimation-Methode mit einem eindeutigen Schlüssel, dem Element und dem Namen "PortraitEllipse" auf.
void PrepareAnimationWithItem(ContactsItem item)
{
ContactsListView.PrepareConnectedAnimation("portrait", item, "PortraitEllipse");
}
Verwenden Sie TryStartConnectedAnimationAsync, um eine Animation mit diesem Element als Ziel zu starten, z. B. beim Zurück navigieren aus einer Detailansicht. Wenn Sie gerade die Datenquelle für die ListView geladen haben, wartet TryStartConnectedAnimationAsync mit dem Start der Animation, bis der entsprechende Elementcontainer erstellt wurde.
private async void ContactsListView_Loaded(object sender, RoutedEventArgs e)
{
ContactsItem item = GetPersistedItem(); // Get persisted item
if (item != null)
{
ContactsListView.ScrollIntoView(item);
ConnectedAnimation animation =
ConnectedAnimationService.GetForCurrentView().GetAnimation("portrait");
if (animation != null)
{
await ContactsListView.TryStartConnectedAnimationAsync(
animation, item, "PortraitEllipse");
}
}
}
Koordinierte Animation
Eine koordinierte Animation ist eine spezielle Art der Eingangsanimation, bei der ein Element zusammen mit dem verbundenen Animationsziel angezeigt wird und parallel zum verbundenen Animationselement animiert wird, während es sich über den Bildschirm bewegt. Koordinierte Animationen können einem Übergang mehr visuelles Interesse verleihen und die Aufmerksamkeit des Benutzers auf den Kontext lenken, der zwischen der Quell- und Zielansicht gemeinsam genutzt wird. In diesen Bildern wird die Untertitel Ui für das Element mithilfe einer koordinierten Animation animiert.
Wenn eine koordinierte Animation die Schwerkraftkonfiguration verwendet, wird die Schwerkraft sowohl auf das verbundene Animationselement als auch auf die koordinierten Elemente angewendet. Die koordinierten Elemente "schwenken" neben dem verbundenen Element, sodass die Elemente wirklich koordiniert bleiben.
Verwenden Sie die Zwei-Parameter-Überladung von TryStart , um einer verbundenen Animation koordinierte Elemente hinzuzufügen. In diesem Beispiel wird eine koordinierte Animation eines Rasterlayouts mit dem Namen "DescriptionRoot" veranschaulicht, das zusammen mit einem verbundenen Animationselement namens "CoverImage" eingegeben wird.
<!-- DestinationPage.xaml -->
<Grid>
<Image x:Name="CoverImage" />
<Grid x:Name="DescriptionRoot" />
</Grid>
// DestinationPage.xaml.cs
void OnNavigatedTo(NavigationEventArgs e)
{
var animationService = ConnectedAnimationService.GetForCurrentView();
var animation = animationService.GetAnimation("coverImage");
if (animation != null)
{
// Don’t need to capture the return value as we are not scheduling any subsequent
// animations
animation.TryStart(CoverImage, new UIElement[] { DescriptionRoot });
}
}
Do's and Don'ts
- Verwenden Sie eine verbundene Animation in Seitenübergängen, bei denen ein Element zwischen den Quell- und Zielseiten gemeinsam genutzt wird.
- Verwenden Sie GravityConnectedAnimationConfiguration für die Vorwärtsnavigation.
- Verwenden Sie DirectConnectedAnimationConfiguration für die Backnavigation.
- Warten Sie nicht auf Netzwerkanforderungen oder andere asynchrone Vorgänge mit langer Ausführungszeit zwischen dem Vorbereiten und Starten einer verbundenen Animation. Möglicherweise müssen Sie die erforderlichen Informationen vorab laden, um den Übergang im Voraus auszuführen, oder ein Platzhalterimage mit niedriger Auflösung verwenden, während ein hochauflösendes Image in der Zielansicht geladen wird.
- Verwenden Sie SuppressNavigationTransitionInfo , um eine Übergangsanimation in einem Frame zu verhindern, wenn Sie ConnectedAnimationService verwenden, da verbundene Animationen nicht gleichzeitig mit den Standardnavigationsübergängen verwendet werden sollen. Weitere Informationen zur Verwendung von Navigationsübergängen finden Sie unter NavigationThemeTransition .
Verwandte Artikel
Windows developer
Feedback
Bald verfügbar: Im Laufe des Jahres 2024 werden wir GitHub-Issues stufenweise als Feedbackmechanismus für Inhalte abbauen und durch ein neues Feedbacksystem ersetzen. Weitere Informationen finden Sie unter https://aka.ms/ContentUserFeedback.
Feedback senden und anzeigen für