Połączona animacja dla aplikacji systemu Windows

Połączone animacje umożliwiają tworzenie dynamicznego i atrakcyjnego środowiska nawigacji przez animowanie przejścia elementu między dwoma różnymi widokami. Pomaga to użytkownikowi zachować swój kontekst i zapewnić ciągłość między widokami.

W połączonej animacji element wydaje się "kontynuować" między dwoma widokami podczas zmiany zawartości interfejsu użytkownika, lecąc po ekranie z jego lokalizacji w widoku źródłowym do miejsca docelowego w nowym widoku. Podkreśla to wspólną zawartość między widokami i tworzy piękny i dynamiczny efekt w ramach przejścia.

Aplikacja Galeria WinUI 3 zawiera interaktywne przykłady większości kontrolek, funkcji i funkcji interfejsu WinUI 3. Pobierz aplikację ze Sklepu Microsoft lub pobierz kod źródłowy w witrynie GitHub

W tym krótkim filmie wideo aplikacja używa połączonej animacji do animowania obrazu elementu, ponieważ "kontynuuje", aby stać się częścią nagłówka następnej strony. Efekt pomaga zachować kontekst użytkownika w całym przejściu.

Połączona animacja i system Fluent Design

System Fluent Design ułatwia tworzenie nowoczesnego, odważnego interfejsu użytkownika, który zawiera światło, głębokość, ruch, materiał i skalę. Połączona animacja to składnik systemu Fluent Design, który dodaje ruch do aplikacji. Aby dowiedzieć się więcej, zobacz Projektowanie aplikacji systemu Windows.

Dlaczego połączona animacja?

Podczas nawigowania między stronami ważne jest, aby użytkownik zrozumiał, jakie nowe treści są prezentowane po nawigacji i jak odnosi się do ich intencji podczas nawigowania. Połączone animacje zapewniają silną metaforę wizualną, która podkreśla relację między dwoma widokami, zwracając uwagę użytkownika na zawartość udostępnioną między nimi. Ponadto połączone animacje dodają zainteresowanie wizualne i polerowane do nawigacji stron, które mogą pomóc w odróżnieniu projektu ruchu aplikacji.

Kiedy używać połączonej animacji

Połączone animacje są zwykle używane podczas zmieniania stron, ale mogą być stosowane do dowolnego środowiska, w którym zmieniasz zawartość w interfejsie użytkownika i chcesz, aby użytkownik zachowywał kontekst. Należy rozważyć użycie połączonej animacji zamiast przechodzenia do szczegółów w przypadku , gdy istnieje obraz lub inny fragment interfejsu użytkownika współużytkowany między widokami źródłowymi i docelowymi.

Konfigurowanie połączonej animacji

Połączone animacje dodatkowo uosabiają styl Fluent, zapewniając konfiguracje animacji dostosowane specjalnie do nawigacji do przodu i do tyłu między stronami.

Konfigurację animacji należy określić, ustawiając właściwość Configuration w aplikacji ConnectedAnimation. (Pokażemy przykłady tego w następnej sekcji).

W tej tabeli opisano dostępne konfiguracje. Aby uzyskać więcej informacji na temat zasad ruchu stosowanych w tych animacjach, zobacz Kierunek i grawitacja.

Konfiguracja usługi ConnectedAnimationService

Klasa ConnectedAnimationService ma dwie właściwości, które mają zastosowanie do poszczególnych animacji, a nie do ogólnej usługi.

• Wartość domyślna
• DefaultEasingFunction

Aby uzyskać różne efekty, niektóre konfiguracje ignorują te właściwości w usłudze ConnectedAnimationService i używają własnych wartości, zgodnie z opisem w tej tabeli.

Jak zaimplementować połączoną animację

Skonfigurowanie połączonej animacji obejmuje dwa kroki:

1. Przygotuj obiekt animacji na stronie źródłowej, który wskazuje systemowi, że element źródłowy będzie uczestniczyć w połączonej animacji.
2. Rozpocznij animację na stronie docelowej, przekazując odwołanie do elementu docelowego.

Podczas nawigowania ze strony źródłowej wywołaj metodę ConnectedAnimationService.GetForCurrentView , aby uzyskać wystąpienie usługi ConnectedAnimationService. Aby przygotować animację, wywołaj metodę PrepareToAnimate w tym wystąpieniu i przekaż unikatowy klucz oraz element interfejsu użytkownika, którego chcesz użyć w przejściu. Unikatowy klucz umożliwia pobranie animacji później na stronie docelowej.

ConnectedAnimationService.GetForCurrentView()
    .PrepareToAnimate("forwardAnimation", SourceImage);

Po zakończeniu nawigacji uruchom animację na stronie docelowej. Aby rozpocząć animację, wywołaj metodę ConnectedAnimation.TryStart. Odpowiednie wystąpienie animacji można pobrać, wywołując element ConnectedAnimationService.GetAnimation za pomocą unikatowego klucza podanego podczas tworzenia animacji.

ConnectedAnimation animation =
    ConnectedAnimationService.GetForCurrentView().GetAnimation("forwardAnimation");
if (animation != null)
{
    animation.TryStart(DestinationImage);
}

Nawigacja do przodu

W tym przykładzie pokazano, jak za pomocą usługi ConnectedAnimationService utworzyć przejście do nawigacji do przodu między dwiema stronami (Page_A do Page_B).

Zalecana konfiguracja animacji nawigacji do przodu to GravityConnectedAnimationConfiguration. Jest to ustawienie domyślne, dlatego nie trzeba ustawiać właściwości Konfiguracja , chyba że chcesz określić inną konfigurację.

Skonfiguruj animację na stronie źródłowej.

<!-- 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();
}

Rozpocznij animację na stronie docelowej.

<!-- 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);
    }
}

Nawigacja wstecz

W przypadku nawigacji wstecznej (Page_B do Page_A) wykonaj te same kroki, ale strony źródłowe i docelowe są odwrócone.

Gdy użytkownik przejdzie z powrotem, spodziewa się, że aplikacja zostanie zwrócona do poprzedniego stanu tak szybko, jak to możliwe. W związku z tym zalecaną konfiguracją jest DirectConnectedAnimationConfiguration. Ta animacja jest szybsza, bardziej bezpośrednia i wykorzystuje złagodzenie spadku.

Skonfiguruj animację na stronie źródłowej.

// 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();
    }
}

Rozpocznij animację na stronie docelowej.

// 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);
    }
}

Między czasem skonfigurowania animacji i momentu jej uruchomienia element źródłowy jest zamrożony powyżej innego interfejsu użytkownika w aplikacji. Umożliwia to jednoczesne wykonywanie innych animacji przejścia. Z tego powodu nie należy czekać więcej niż ok. 250 milisekund między dwoma krokami, ponieważ obecność elementu źródłowego może stać się rozpraszana. Jeśli przygotujesz animację i nie uruchomisz jej w ciągu trzech sekund, system usunie animację, a wszystkie kolejne wywołania trystartu nie powiedzą się.

Połączona animacja na liście i w środowiskach siatki

Często chcesz utworzyć połączoną animację z listy lub do kontrolki listy lub siatki. Aby uprościć ten proces, można użyć dwóch metod w listView i GridView, PrepareConnectedAnimation i TryStartConnectedAnimationAsync.

Załóżmy na przykład, że masz element ListView zawierający element o nazwie "PortraitEllipse" w szablonie danych.

<ListView x:Name="ContactsListView" Loaded="ContactsListView_Loaded">
    <ListView.ItemTemplate>
        <DataTemplate x:DataType="vm:ContactsItem">
            <Grid>
                …
                <Ellipse x:Name="PortraitEllipse" … />
            </Grid>
        </DataTemplate>
    </ListView.ItemTemplate>
</ListView>

Aby przygotować połączoną animację z wielokropkiem odpowiadającym danym elementowi listy, wywołaj metodę PrepareConnectedAnimation z unikatowym kluczem, elementem i nazwą "PortraitEllipse".

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

Aby rozpocząć animację z tym elementem jako miejscem docelowym, na przykład podczas powrotu z widoku szczegółów, użyj polecenia TryStartConnectedAnimationAsync. Jeśli właśnie załadowano źródło danych dla elementu ListView, narzędzie TryStartConnectedAnimationAsync będzie czekać na uruchomienie animacji do momentu utworzenia odpowiedniego kontenera elementów.

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");
        }
    }
}

Koordynowana animacja

Skoordynowana animacja to specjalny typ animacji wejścia, w której element pojawia się wraz z połączonym elementem docelowym animacji, animując w parze z połączonym elementem animacji, gdy porusza się po ekranie. Skoordynowane animacje mogą zwiększać zainteresowanie wizualizacją przejścia i dalej zwracać uwagę użytkownika na kontekst udostępniany między widokami źródłowymi i docelowymi. Na tych obrazach interfejs użytkownika podpisu dla elementu animuje się przy użyciu skoordynowanej animacji.

Gdy skoordynowana animacja używa konfiguracji grawitacji, grawitacja jest stosowana zarówno do połączonego elementu animacji, jak i elementów skoordynowanych. Skoordynowane elementy będą "swoop" obok połączonego elementu, dzięki czemu elementy pozostają naprawdę skoordynowane.

Użyj przeciążenia dwóch parametrów tryStart , aby dodać skoordynowane elementy do połączonej animacji. W tym przykładzie pokazano skoordynowaną animację układu siatki o nazwie "DescriptionRoot", która wchodzi w parze z połączonym elementem animacji o nazwie "CoverImage".

<!-- 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 });
     }
}

Rekomendacje

• Użyj połączonej animacji w przejściach stron, w których element jest udostępniany między stronami źródłowymi i docelowymi.
• Użyj elementu GravityConnectedAnimationConfiguration do nawigacji do przodu.
• Użyj polecenia DirectConnectedAnimationConfiguration na potrzeby nawigacji wstecznej.
• Nie czekaj na żądania sieciowe ani inne długotrwałe operacje asynchroniczne między przygotowaniem i uruchomieniem połączonej animacji. Może być konieczne wstępne załadowanie niezbędnych informacji do wcześniejszego uruchomienia przejścia lub użycie obrazu zastępczego o niskiej rozdzielczości podczas ładowania obrazu o wysokiej rozdzielczości w widoku docelowym.
• Użyj polecenia SuppressNavigationTransitionInfo , aby uniemożliwić przejście animacji w ramce , jeśli używasz usługi ConnectedAnimationService, ponieważ połączone animacje nie mają być używane jednocześnie z domyślnymi przejściami nawigacji. Zobacz NawigacjaThemeTransition , aby uzyskać więcej informacji na temat korzystania z przejść nawigacji.

UwP i WinUI 2

Powiązane artykuły

ConnectedAnimation

ConnectedAnimationService

NavigationThemeTransition