Verbundene Animation für Windows-Apps

Mit verbundenen Animationen können Sie eine dynamische und ansprechende Navigationsoberfläche erstellen, indem Sie den Übergang eines Elements zwischen zwei verschiedenen Ansichten animieren. Dies hilft dem Benutzer, seinen Kontext aufrechtzuerhalten und die Kontinuität zwischen den Ansichten zu gewährleisten.

In einer verbundenen Animation wird ein Element während einer Änderung des UI-Inhalts zwischen zwei Ansichten "fortgesetzt" und über den Bildschirm von seiner Position in der Quellansicht bis zum Ziel in der neuen Ansicht fliegen. Dies hebt den gemeinsamen Inhalt zwischen den Ansichten hervor und schafft im Rahmen eines Übergangs einen schönen und dynamischen Effekt.

Wichtige APIs: ConnectedAnimation-Klasse, ConnectedAnimationService-Klasse

Beispiele

WinUI 2-Katalog
	Wenn Sie die WinUI 2 Gallery-App installiert haben, klicken Sie hier, um die App zu öffnen und verbundene Animation in Aktion zu sehen. Abrufen der WinUI 2-Katalog-App (Microsoft Store) Abrufen des Quellcodes (GitHub)

In diesem kurzen Video verwendet eine App eine verbundene Animation, um ein Elementbild zu animieren, da es weiterhin Teil der Kopfzeile der nächsten Seite wird. Der Effekt trägt dazu bei, den Benutzerkontext über den Übergang hinweg aufrechtzuerhalten.

Verbundene Animation und das 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 bei der Navigation auf seine Absicht 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 ziehen. Darüber hinaus fügen verbundene Animationen visuelles Interesse und eine ansprechende Seitennavigation hinzu, die dazu beitragen kann, das Bewegungsdesign Ihrer App zu unterscheiden.

Verwendung der verbundenen Animation

Verbundene Animationen werden in der Regel verwendet, wenn Seiten geändert werden, sie können jedoch auf jede Oberfläche angewendet werden, in der Sie Inhalte in einer Benutzeroberfläche ändern und möchten, dass der Benutzer den Kontext beibehalten kann. Sie sollten eine verbundene Animation anstelle eines Drill-In-Navigationsübergangs verwenden, wenn ein Bild oder ein anderer Teil der Benutzeroberfläche zwischen der Quell- und Zielansicht gemeinsam verwendet wird.

Konfigurieren der verbundenen Animation

Ab Windows 10, Version 1809, verkörpern verbundene Animationen das Fluent-Design weiter, indem Animationskonfigurationen bereitgestellt werden, die speziell auf die Vorwärts- und Rückwärtsseitennavigation zugeschnitten sind.

Sie geben eine Animationskonfiguration an, indem Sie die Configuration-Eigenschaft für die ConnectedAnimation festlegen. (Es werden Beispiele hierfür 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 "Directionality" und "Gravity".

ConnectedAnimationService-Konfiguration

Die ConnectedAnimationService-Klasse verfügt über zwei Eigenschaften, die auf die einzelnen Animationen und nicht auf den Gesamtdienst angewendet werden.

• DefaultDuration
• DefaultEasingFunction

Um die verschiedenen Effekte zu erzielen, ignorieren einige Konfigurationen diese Eigenschaften auf ConnectedAnimationService und verwenden stattdessen ihre eigenen Werte, wie in dieser Tabelle beschrieben.

Implementieren einer verbundenen Animation

Das Einrichten einer verbundenen Animation umfasst zwei Schritte:

1. Bereiten Sie ein Animationsobjekt auf der Quellseite vor, das an dem System angibt, dass das Quellelement an der verbundenen Animation teilnimmt.
2. 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 Instanz von ConnectedAnimationService abzurufen. Rufen Sie "PrepareToAnimate " für diese Instanz auf, und übergeben Sie einen eindeutigen Schlüssel und das UI-Element, das Sie im Ü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 auftritt, starten Sie die Animation auf der Zielseite. Rufen Sie "ConnectedAnimation.TryStart" auf, um die Animation zu starten. Sie können die richtige Animationsinstanz 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

Dieses Beispiel zeigt, wie Sie connectedAnimationService verwenden, um einen Übergang für die Vorwärtsnavigation zwischen zwei Seiten zu erstellen (Page_A zum Page_B).

Die empfohlene Animationskonfiguration für die Vorwärtsnavigation ist GravityConnectedAnimationConfiguration. Dies ist der Standardwert, sodass Sie die Konfigurationseigenschaft 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);
    }
}

Rückwärtsnavigation

Für die Rückwärtsnavigation (Page_B zu Page_A) führen Sie dieselben Schritte aus, aber die Quell- und Zielseiten werden umgekehrt.

Wenn der Benutzer zurück navigiert, erwartet er, dass die App so schnell wie möglich in den vorherigen Zustand zurückgesendet wird. Daher ist die empfohlene Konfiguration DirectConnectedAnimationConfiguration. Diese Animation ist schneller, direkter und verwendet die Beschleunigung der Verzögerung.

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 dem Zeitpunkt, zu dem die Animation eingerichtet ist und wann sie gestartet wird, wird das Quellelement über der anderen Benutzeroberfläche in der App fixiert. Auf diese Weise können Sie alle anderen Übergangsanimationen gleichzeitig ausführen. Aus diesem Grund sollten Sie nicht mehr als ~250 Millisekunden zwischen den beiden Schritten warten, da das Vorhandensein des Quellelements ablenken kann. Wenn Sie eine Animation vorbereiten und sie 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 " ListView " und "GridView", "PrepareConnectedAnimation " und "TryStartConnectedAnimationAsync" verwenden, um diesen Prozess zu vereinfachen.

Angenommen, Sie haben 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>

Rufen Sie die PrepareConnectedAnimation-Methode mit einem eindeutigen Schlüssel, dem Element und dem Namen "PortraitEllipse" auf, um eine verbundene Animation mit der Ellipse vorzubereiten, die einem bestimmten Listenelement entspricht.

void PrepareAnimationWithItem(ContactsItem item)
{
     ContactsListView.PrepareConnectedAnimation("portrait", item, "PortraitEllipse");
}

Verwenden Sie TryStartConnectedAnimationAsync, um eine Animation mit diesem Element als Ziel zu starten, z. B. wenn Sie aus einer Detailansicht zurück navigieren. Wenn Sie die Datenquelle für listView gerade geladen haben, wartet TryStartConnectedAnimationAsync auf das Starten 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 von Eingangsanimation, bei der ein Element zusammen mit dem verbundenen Animationsziel angezeigt wird, das zusammen mit dem verbundenen Animationselement animiert wird, während es sich über den Bildschirm bewegt. Koordinierte Animationen können einem Übergang ein größeres 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 Beschriftungsbenutzeroberfläche 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 "schwemmen" zusammen mit dem verbundenen Element, damit die Elemente wirklich koordiniert bleiben.

Verwenden Sie die überladene zwei Parameter von TryStart , um koordinierte Elemente zu einer verbundenen Animation 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't

• 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 Rückwärtsnavigation.
• Warten Sie nicht auf Netzwerkanforderungen oder andere lange ausgeführte asynchrone Vorgänge zwischen der Vorbereitung und dem Starten einer verbundenen Animation. Möglicherweise müssen Sie die erforderlichen Informationen vorab laden, um den Übergang vorab auszuführen, oder ein Platzhalterbild mit niedriger Auflösung verwenden, während ein hochauflösendes Bild 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

ConnectedAnimation

ConnectedAnimationService

NavigationThemeTransition