animazione Connessione ed per le app di Windows

Le animazioni connesse consentono di creare un'esperienza di spostamento dinamica e convincente attraverso l'aggiunta di un'animazione alla transizione di un elemento tra due diverse viste. In questo modo l'utente mantiene il contesto e garantisce la continuità tra le visualizzazioni.

In un'animazione connessa, un elemento sembra "continuare" tra due visualizzazioni durante una modifica del contenuto dell'interfaccia utente, volando sullo schermo dalla posizione nella visualizzazione di origine alla destinazione nella nuova visualizzazione. Questo evidenzia il contenuto comune tra le visualizzazioni e crea un effetto bello e dinamico come parte di una transizione.

API importanti: classe Connessione edAnimation, classe Connessione edAnimationService

Esempi

Raccolta WinUI 2
	Se è installata l'app WinUI 2 Gallery, fare clic qui per aprire l'app e vedere il controllo Connected Animation stato attivo in azione. Scarica l'app WinUI 2 Gallery (Microsoft Store) Ottieni il codice sorgente (GitHub)

In questo breve video, un'app usa un'animazione connessa per animare un'immagine dell'elemento mentre "continua" per diventare parte dell'intestazione della pagina successiva. L'effetto consente di mantenere il contesto utente durante la transizione.

Connected animation e Fluent Design System

Il sistema di progettazione Fluent Design ti consente di creare un'interfaccia utente moderna e vivace che incorpora luminosità, profondità, movimento, materiale e ridimensionamento. Connected animation è un componente Fluent Design System che aggiunge movimento all'app. Per altre informazioni, vedi la panoramica di Fluent Design.

Perché animazione connesse?

Quando si passa da una pagina all'altra, è importante che l'utente comprenda quali nuovi contenuti vengono presentati dopo la navigazione e come si riferisce alla finalità durante l'esplorazione. le animazioni Connessione ed forniscono una potente metafora visiva che enfatizza la relazione tra due visualizzazioni disegnando lo stato attivo dell'utente sul contenuto condiviso tra di loro. Inoltre, le animazioni connesse aggiungono interesse visivo e lucido alla navigazione tra le pagine che consentono di distinguere la progettazione del movimento dell'app.

Quando usare l'animazione connessa

le animazioni Connessione vengono in genere usate quando si modificano le pagine, anche se possono essere applicate a qualsiasi esperienza in cui si modifica il contenuto in un'interfaccia utente e si vuole che l'utente mantenga il contesto. È consigliabile usare un'animazione connessa anziché una transizione di navigazione drill-in ogni volta che è presente un'immagine o un'altra parte dell'interfaccia utente condivisa tra le visualizzazioni di origine e di destinazione.

Configurare l'animazione connessa

A partire da Windows 10, versione 1809, le animazioni connesse incorporano ulteriormente la progettazione Fluent fornendo configurazioni di animazione personalizzate appositamente per lo spostamento avanti e indietro della pagina.

Per specificare una configurazione di animazione, impostare la proprietà Configuration nella Connessione edAnimation. (Mostreremo esempi nella sezione successiva.)

Questa tabella descrive le configurazioni disponibili. Per altre informazioni sui principi di movimento applicati in queste animazioni, vedi Direzione e gravità.

configurazione di Connessione edAnimationService

La classe Connessione edAnimationService ha due proprietà che si applicano alle singole animazioni anziché al servizio complessivo.

• DefaultDuration
• DefaultEasingFunction

Per ottenere i vari effetti, alcune configurazioni ignorano queste proprietà in Connessione edAnimationService e usano invece i propri valori, come descritto in questa tabella.

Come implementare l'animazione connessa

La configurazione di un'animazione connessa prevede due passaggi:

1. Preparare un oggetto animazione nella pagina di origine, che indica al sistema che l'elemento di origine parteciperà all'animazione connessa.
2. Avviare l'animazione nella pagina di destinazione, passando un riferimento all'elemento di destinazione.

Quando si passa dalla pagina di origine, chiamare Connessione edAnimationService.GetForCurrentView per ottenere un'istanza di Connessione edAnimationService. Per preparare un'animazione, chiama PrepareToAnimate in questa istanza e passa una chiave univoca e l'elemento dell'interfaccia utente che vuoi usare nella transizione. La chiave univoca consente di recuperare l'animazione in un secondo momento nella pagina di destinazione.

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

Quando si verifica la navigazione, avviare l'animazione nella pagina di destinazione. Per avviare l'animazione, chiamare Connessione edAnimation.TryStart. È possibile recuperare l'istanza di animazione corretta chiamando Connessione edAnimationService.GetAnimation con la chiave univoca specificata durante la creazione dell'animazione.

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

Spostamento in avanti

Questo esempio illustra come usare Connessione edAnimationService per creare una transizione per lo spostamento in avanti tra due pagine (Page_A a Page_B).

La configurazione di animazione consigliata per lo spostamento in avanti è Gravity Connessione edAnimationConfiguration. Si tratta dell'impostazione predefinita, pertanto non è necessario impostare la proprietà Configuration a meno che non si voglia specificare una configurazione diversa.

Configurare l'animazione nella pagina di origine.

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

Avviare l'animazione nella pagina di destinazione.

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

Spostamento all'indietro

Per lo spostamento indietro (Page_B a Page_A), seguire gli stessi passaggi, ma le pagine di origine e di destinazione vengono invertite.

Quando l'utente torna indietro, si prevede che l'app venga restituita allo stato precedente il prima possibile. Pertanto, la configurazione consigliata è Direct Connessione edAnimationConfiguration. Questa animazione è più rapida, più diretta e usa l'interpolazione decelerazione.

Configurare l'animazione nella pagina di origine.

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

Avviare l'animazione nella pagina di destinazione.

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

Tra il momento in cui viene configurata l'animazione e l'avvio, l'elemento di origine viene bloccato sopra l'altra interfaccia utente nell'app. In questo modo puoi eseguire contemporaneamente qualsiasi altra animazione di transizione. Per questo motivo, non è consigliabile attendere più di circa 250 millisecondi tra i due passaggi perché la presenza dell'elemento di origine potrebbe distrarre. Se prepari un'animazione e non la avvii entro tre secondi, il sistema eliminerà l'animazione ed eventuali chiamate successive a TryStart avranno esito negativo.

animazione Connessione ed nelle esperienze elenco e griglia

Spesso, è necessario creare un'animazione connessa da o a un controllo elenco o griglia. Per semplificare questo processo, è possibile usare i due metodi in ListView e GridView, PrepareConnectedAnimation e TryStartConnectedAnimationAsync.

Si supponga, ad esempio, di avere un controllo ListView che contiene un elemento con il nome "PortraitEllipse" nel relativo modello di dati.

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

Per preparare un'animazione connessa con l'ellisse corrispondente a una determinata voce di elenco, chiamare il metodo Prepare Connessione edAnimation con una chiave univoca, l'elemento e il nome "PortraitEllipse".

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

Per avviare un'animazione con questo elemento come destinazione, ad esempio quando si passa da una visualizzazione dettagli, usare TryStart Connessione edAnimationAsync. Se è stata appena caricata l'origine dati per ListView, TryStart Connessione edAnimationAsync attenderà l'avvio dell'animazione fino alla creazione del contenitore di elementi corrispondente.

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

Animazione coordinata

Un'animazione coordinata è un tipo speciale di animazione di ingresso in cui viene visualizzato un elemento insieme alla destinazione di animazione connessa, animando in combinazione con l'elemento di animazione connessa mentre si sposta sullo schermo. Le animazioni coordinate possono aggiungere maggiore interesse visivo a una transizione e attirare ulteriormente l'attenzione dell'utente sul contesto condiviso tra le visualizzazioni di origine e di destinazione. In queste immagini, l'interfaccia utente didascalia per l'elemento sta animando usando un'animazione coordinata.

Quando un'animazione coordinata usa la configurazione della gravità, la gravità viene applicata sia all'elemento di animazione connessa che agli elementi coordinati. Gli elementi coordinati "swoop" insieme all'elemento connesso in modo che gli elementi rimangano realmente coordinati.

Usare l'overload a due parametri di TryStart per aggiungere elementi coordinati a un'animazione connessa. In questo esempio viene illustrata un'animazione coordinata di un layout grid denominato "DescriptionRoot" che entra in combinazione con un elemento di animazione connesso denominato "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 });
     }
}

Cosa fare e cosa non fare

• Usa un'animazione connessa nelle transizioni di pagina in cui un elemento viene condiviso tra le pagine di origine e di destinazione.
• Usare Gravity Connessione edAnimationConfiguration per lo spostamento in avanti.
• Usare Direct Connessione edAnimationConfiguration per lo spostamento indietro.
• Non attendere le richieste di rete o altre operazioni asincrone a esecuzione prolungata tra la preparazione e l'avvio di un'animazione connessa. Potrebbe essere necessario precariare le informazioni necessarie per eseguire la transizione in anticipo oppure usare un'immagine segnaposto a bassa risoluzione mentre un'immagine ad alta risoluzione viene caricata nella visualizzazione di destinazione.
• Usa SuppressNavigationTransitionInfo per impedire un'animazione di transizione in un frame se usi Connessione edAnimationService, poiché le animazioni connesse non devono essere usate simultaneamente con le transizioni di spostamento predefinite. Per altre informazioni su come usare le transizioni di spostamento, vedi NavigationThemeTransition .

Articoli correlati

ConnectedAnimation

ConnectedAnimationService

NavigationThemeTransition