Animazione connessa per le app di WindowsConnected animation for Windows apps

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.Connected animations let you create a dynamic and compelling navigation experience by animating the transition of an element between two different views. Questo consente all'utente di gestire il contesto e fornisce la continuità tra le visualizzazioni.This helps the user maintain their context and provides continuity between the views.

In un'animazione connessa, un elemento sembra "continuare" tra due visualizzazioni durante una modifica del contenuto dell'interfaccia utente, in modo che si trovino sullo schermo dalla relativa posizione nella visualizzazione origine alla destinazione nella nuova visualizzazione.In a connected animation, an element appears to "continue" between two views during a change in UI content, flying across the screen from its location in the source view to its destination in the new view. In questo modo viene enfatizzato il contenuto comune tra le visualizzazioni e viene creato un effetto accattivante e dinamico come parte di una transizione.This emphasizes the common content between the views and creates a beautiful and dynamic effect as part of a transition.

API importanti: classe ConnectedAnimation, classe ConnectedAnimationServiceImportant APIs: ConnectedAnimation class, ConnectedAnimationService class

EsempiExamples

Raccolta di controlli XAMLXAML Controls Gallery
XAML controls gallery

Se è installata l'app raccolta controlli XAML , fare clic qui per aprire l'app e vedere animazione connessa in azione.If you have the XAML Controls Gallery app installed, click here to open the app and see Connected Animation in action.

In questo breve video un'app usa un'animazione connessa per animare un'immagine dell'elemento Man mano che "continua" a diventare parte dell'intestazione della pagina successiva.In this short video, an app uses a connected animation to animate an item image as it "continues" to become part of the header of the next page. L'effetto consente di mantenere il contesto utente durante la transizione.The effect helps maintain user context across the transition.

Animazione connessa

Riepilogo videoVideo summary

Animazione connessa e sistema di progettazione FluentConnected animation and the 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.The Fluent Design System helps you create modern, bold UI that incorporates light, depth, motion, material, and scale. L'animazione connessa è un componente del sistema di progettazione Fluent che aggiunge un movimento all'app.Connected animation is a Fluent Design System component that adds motion to your app. Per altre informazioni, vedi la panoramica di Fluent Design.To learn more, see the Fluent Design overview.

Perché è stata connessa l'animazione?Why connected animation?

Quando si passa da una pagina all'altra, è importante comprendere il nuovo contenuto presentato dopo lo spostamento e il modo in cui è correlato al loro scopo durante lo spostamento.When navigating between pages, it’s important for the user to understand what new content is being presented after the navigation and how it relates to their intent when navigating. Le animazioni connesse forniscono una metafora visiva avanzata che enfatizza la relazione tra due visualizzazioni, disegnando lo stato attivo dell'utente sul contenuto condiviso tra di essi.Connected animations provide a powerful visual metaphor that emphasizes the relationship between two views by drawing the user’s focus to the content shared between them. Inoltre, le animazioni connesse aggiungono interesse visivo e la navigazione da lucido a pagina che consente di distinguere la progettazione del movimento dell'app.Additionally, connected animations add visual interest and polish to page navigation that can help differentiate the motion design of your app.

Quando usare l'animazione connessaWhen to use connected animation

Le animazioni connesse 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.Connected animations are generally used when changing pages, though they can be applied to any experience where you are changing content in a UI and want the user to maintain context. È consigliabile usare un'animazione connessa anziché una transizione di esplorazione in ogni volta che è presente un'immagine o un'altra parte dell'interfaccia utente condivisa tra le visualizzazioni di origine e di destinazione.You should consider using a connected animation instead of a drill in navigation transition whenever there is an image or other piece of UI shared between the source and destination views.

Configurare un'animazione connessaConfigure connected animation

Importante

Questa funzionalità richiede che la versione di destinazione dell'app sia Windows 10, versione 1809 (SDK 17763) o successiva.This feature requires that your app's Target version be Windows 10, version 1809 (SDK 17763) or later. La proprietà di configurazione non è disponibile negli SDK precedenti.The Configuration property is not available in earlier SDKs. È possibile fare riferimento a una versione minima precedente all'SDK 17763 usando il codice adattivo o il codice XAML condizionale.You can target a Minimum version lower than SDK 17763 using adaptive code or conditional XAML. Per altre informazioni, vedere Version Adaptive Apps.For more info, see Version adaptive apps.

A partire da Windows 10, versione 1809, le animazioni connesse incarnano ulteriormente la progettazione Fluent fornendo configurazioni di animazione personalizzate appositamente per l'esplorazione delle pagine in avanti e indietro.Starting in Windows 10, version 1809, connected animations further embody Fluent design by providing animation configurations tailored specifically for forward and backwards page navigation.

Per specificare una configurazione di animazione, impostare la proprietà di configurazione in ConnectedAnimation.You specify an animation configuration by setting the Configuration property on the ConnectedAnimation. Nella sezione successiva verranno illustrati alcuni esempi.(We’ll show examples of this in the next section.)

In questa tabella vengono descritte le configurazioni disponibili.This table describes the available configurations. Per altre informazioni sui principi di movimento applicati in queste animazioni, vedere direzionalità e gravità.For more information about the motion principles applied in these animations, see Directionality and gravity.

GravityConnectedAnimationConfigurationGravityConnectedAnimationConfiguration
Questa è la configurazione predefinita ed è consigliata per l'esplorazione in diretta.This is the default configuration, and is recommended for forward navigation.
Quando l'utente si sposta in un secondo momento nell'app (da a a B), l'elemento connesso appare fisicamente "Estrai la pagina".As the user navigates forward in the app (A to B), the connected element appears to physically “pull off the page”. In questo modo, l'elemento sembra andare avanti nello spazio z ed eliminare un bit come effetto della gravità in attesa.In doing so, the element appears to move forward in z-space and drops a bit as an effect of gravity taking hold. Per superare gli effetti di gravità, l'elemento ottiene la velocità e accelera la posizione finale.To overcome the effects of gravity, the element gains velocity and accelerates into its final position. Il risultato è un'animazione "scale and DIP".The result is a “scale and dip” animation.
DirectConnectedAnimationConfigurationDirectConnectedAnimationConfiguration
Quando l'utente si sposta all'indietro nell'app (da B a A), l'animazione è più diretta.As the user navigates backwards in the app (B to A), the animation is more direct. L'elemento connesso viene convertito linearmente da B a A utilizzando una funzione di interpolazione di Bezier cubica con decelerazione.The connected element linearly translates from B to A using a decelerate cubic Bezier easing function. Con la convenienza per gli oggetti visivi all'indietro viene restituito lo stato precedente dell'utente il più rapidamente possibile mantenendo il contesto del flusso di navigazione.The backwards visual affordance returns the user to their previous state as fast as possible while still maintaining the context of the navigation flow.
BasicConnectedAnimationConfigurationBasicConnectedAnimationConfiguration
Si tratta dell'animazione predefinita (e solo) usata nelle versioni precedenti a Windows 10, versione 1809 (SDK 17763).This is the default (and only) animation used in versions prior to Windows 10, version 1809 (SDK 17763).

Configurazione di ConnectedAnimationServiceConnectedAnimationService configuration

La classe ConnectedAnimationService dispone di due proprietà che si applicano alle singole animazioni anziché al servizio complessivo.The ConnectedAnimationService class has two properties that apply to the individual animations rather than the overall service.

Per ottenere i vari effetti, alcune configurazioni ignorano queste proprietà in ConnectedAnimationService e usano invece i rispettivi valori, come descritto in questa tabella.To achieve the various effects, some configurations ignore these properties on ConnectedAnimationService and use their own values instead, as described in this table.

ConfigurazioneConfiguration Rispetta DefaultDuration?Respects DefaultDuration? Rispetta DefaultEasingFunction?Respects DefaultEasingFunction?
GravitàGravity Yes Sì*Yes*
*La conversione di base da a a B usa questa funzione di interpolazione, ma il "Gravity DIP" ha una propria funzione di interpolazione.*The basic translation from A to B uses this easing function, but the "gravity dip" has its own easing function.
Connessione direttaDirect NoNo
Aggiunge un'animazione a 150ms.Animates over 150ms.
NoNo
Usa la funzione di interpolazione decelerazione.Uses the Decelerate easing function.
BasicBasic Yes Yes

Come implementare un'animazione connessaHow to implement connected animation

La configurazione di un'animazione connessa prevede due passaggi:Setting up a connected animation involves two steps:

  1. Preparare un oggetto animazione nella pagina di origine, che indica al sistema che l'elemento di origine parteciperà all'animazione connessa.Prepare an animation object on the source page, which indicates to the system that the source element will participate in the connected animation.
  2. Avviare l'animazione nella pagina di destinazione, passando un riferimento all'elemento di destinazione.Start the animation on the destination page, passing a reference to the destination element.

Quando si esegue la navigazione dalla pagina di origine, chiamare ConnectedAnimationService. GetForCurrentView per ottenere un'istanza di ConnectedAnimationService.When navigating from the source page, call ConnectedAnimationService.GetForCurrentView to get an instance of ConnectedAnimationService. Per preparare un'animazione, chiamare PrepareToAnimate su questa istanza e passare una chiave univoca e l'elemento dell'interfaccia utente che si desidera utilizzare nella transizione.To prepare an animation, call PrepareToAnimate on this instance, and pass in a unique key and the UI element you want to use in the transition. La chiave univoca consente di recuperare l'animazione in un secondo momento nella pagina di destinazione.The unique key lets you retrieve the animation later on the destination page.

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

Quando si verifica la navigazione, avviare l'animazione nella pagina di destinazione.When the navigation occurs, start the animation in the destination page. Per avviare l'animazione, chiamare ConnectedAnimation. TryStart.To start the animation, call ConnectedAnimation.TryStart. È possibile recuperare l'istanza di animazione corretta chiamando ConnectedAnimationService. getanimation con la chiave univoca fornita durante la creazione dell'animazione.You can retrieve the right animation instance by calling ConnectedAnimationService.GetAnimation with the unique key you provided when creating the animation.

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

Navigazione in direttaForward navigation

Questo esempio illustra come usare ConnectedAnimationService per creare una transizione per la navigazione in diretta tra due pagine (Page_A Page_B).This example shows how to use ConnectedAnimationService to create a transition for forward navigation between two pages (Page_A to Page_B).

La configurazione di animazione consigliata per l'esplorazione in diretta è GravityConnectedAnimationConfiguration.The recommended animation configuration for forward navigation is GravityConnectedAnimationConfiguration. Questa è l'impostazione predefinita, quindi non è necessario impostare la proprietà di configurazione a meno che non si desideri specificare una configurazione diversa.This is the default, so you don't need to set the Configuration property unless you want to specify a different configuration.

Configurare l'animazione nella pagina di origine.Set up the animation in the source page.

<!-- 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 destinazione.Start the animation in the destination page.

<!-- 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 indietroBack navigation

Per lo spostamento indietro (Page_B Page_A), seguire la stessa procedura, ma le pagine di origine e di destinazione sono invertite.For back navigation (Page_B to Page_A), you follow the same steps, but the source and destination pages are reversed.

Quando l'utente torna indietro, si aspetta che l'app venga restituita allo stato precedente il prima possibile.When the user navigates back, they expect the app to be returned to the previous state as soon as possible. La configurazione consigliata è quindi DirectConnectedAnimationConfiguration.Therefore, the recommended configuration is DirectConnectedAnimationConfiguration. Questa animazione è più veloce, più diretta e usa l'interpolazione decelerazione.This animation is quicker, more direct, and uses the decelerate easing.

Configurare l'animazione nella pagina di origine.Set up the animation in the source page.

// 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 destinazione.Start the animation in the destination page.

// 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 l'animazione viene configurata e l'avvio, l'elemento di origine appare bloccato sopra altra interfaccia utente nell'app.Between the time that the animation is set up and when it's started, the source element appears frozen above other UI in the app. In questo modo è possibile eseguire contemporaneamente altre animazioni di transizione.This lets you perform any other transition animations simultaneously. Per questo motivo, non è necessario attendere più di ~ 250 millisecondi tra i due passaggi, perché la presenza dell'elemento di origine potrebbe diventare distrazione.For this reason, you shouldn't wait more than ~250 milliseconds in between the two steps because the presence of the source element may become distracting. Se si prepara un'animazione e non la si avvia entro tre secondi, il sistema eliminerà l'animazione e tutte le chiamate successive a TryStart avranno esito negativo.If you prepare an animation and do not start it within three seconds, the system will dispose of the animation and any subsequent calls to TryStart will fail.

Animazione connessa in un'esperienza di elenco e grigliaConnected animation in list and grid experiences

Spesso è necessario creare un'animazione connessa da o a un controllo elenco o griglia.Often, you will want to create a connected animation from or to a list or grid control. Per semplificare questo processo, è possibile usare i due metodi su ListView e GridView, PrepareConnectedAnimation e TryStartConnectedAnimationAsync.You can use the two methods on ListView and GridView, PrepareConnectedAnimation and TryStartConnectedAnimationAsync, to simplify this process.

Si immagini, ad esempio, di avere un controllo ListView che contiene un elemento con il nome "PortraitEllipse" nel relativo modello di dati.For example, say you have a ListView that contains an element with the name "PortraitEllipse" in its data template.

<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 voce di elenco specificata, chiamare il metodo PrepareConnectedAnimation con una chiave univoca, l'elemento e il nome "PortraitEllipse".To prepare a connected animation with the ellipse corresponding to a given list item, call the PrepareConnectedAnimation method with a unique key, the item, and the name "PortraitEllipse".

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

Per avviare un'animazione con questo elemento come destinazione, ad esempio quando si esegue la navigazione da una visualizzazione dettagli, usare TryStartConnectedAnimationAsync.To start an animation with this element as the destination, such as when navigating back from a detail view, use TryStartConnectedAnimationAsync. Se è stata appena caricata l'origine dati per ListView, TryStartConnectedAnimationAsync attenderà di avviare l'animazione fino a quando non sarà stato creato il contenitore degli elementi corrispondente.If you have just loaded the data source for the ListView, TryStartConnectedAnimationAsync will wait to start the animation until the corresponding item container has been created.

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 coordinataCoordinated animation

Animazione coordinata

Un' animazione coordinata è un tipo speciale di animazione di ingresso in cui un elemento viene visualizzato insieme alla destinazione di animazione connessa, animando in tandem con l'elemento di animazione connesso mentre viene spostato sullo schermo.A coordinated animation is a special type of entrance animation where an element appears along with the connected animation target, animating in tandem with the connected animation element as it moves across the screen. Le animazioni coordinate possono aggiungere un maggiore interesse visivo a una transizione e attirare l'attenzione dell'utente sul contesto condiviso tra le visualizzazioni di origine e di destinazione.Coordinated animations can add more visual interest to a transition and further draw the user’s attention to the context that is shared between the source and destination views. In queste immagini l'interfaccia utente della didascalia per l'elemento viene animata usando un'animazione coordinata.In these images, the caption UI for the item is animating using a coordinated animation.

Quando un'animazione coordinata usa la configurazione di gravità, la gravità viene applicata sia all'elemento di animazione connesso che agli elementi coordinati.When a coordinated animation uses the gravity configuration, gravity is applied to both the connected animation element and the coordinated elements. Gli elementi coordinati si "piombano" insieme all'elemento connesso, in modo che gli elementi restino effettivamente coordinati.The coordinated elements will "swoop" alongside the connected element so the elements stay truly coordinated.

Usare l'overload a due parametri di TryStart per aggiungere elementi coordinati a un'animazione connessa.Use the two-parameter overload of TryStart to add coordinated elements to a connected animation. In questo esempio viene illustrata un'animazione coordinata di un layout di griglia denominato "DescriptionRoot" che viene inserito in tandem con un elemento di animazione connesso denominato "CoverImage".This example demonstrates a coordinated animation of a Grid layout named "DescriptionRoot" that enters in tandem with a connected animation element named "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 });
     }
}

Operazioni da eseguire e nonDo’s and don’ts

  • Utilizzare un'animazione connessa in transizioni di pagina in cui un elemento viene condiviso tra le pagine di origine e di destinazione.Use a connected animation in page transitions where an element is shared between the source and destination pages.
  • Usare GravityConnectedAnimationConfiguration per la navigazione in diretta.Use GravityConnectedAnimationConfiguration for forward navigation.
  • Usare DirectConnectedAnimationConfiguration per lo spostamento indietro.Use DirectConnectedAnimationConfiguration for back navigation.
  • Non attendere le richieste di rete o altre operazioni asincrone a esecuzione prolungata durante la preparazione e l'avvio di un'animazione connessa.Don't wait on network requests or other long-running asynchronous operations in between preparing and starting a connected animation. Potrebbe essere necessario pre-caricare le informazioni necessarie per eseguire la transizione in anticipo oppure utilizzare un'immagine segnaposto a bassa risoluzione mentre un'immagine ad alta risoluzione viene caricata nella visualizzazione di destinazione.You may need to pre-load the necessary information to run the transition ahead of time, or use a low-resolution placeholder image while a high-resolution image loads in the destination view.
  • Usare SuppressNavigationTransitionInfo per evitare un'animazione di transizione in un frame se si usa ConnectedAnimationService, poiché le animazioni connesse non sono destinate a essere usate simultaneamente con le transizioni di navigazione predefinite.Use SuppressNavigationTransitionInfo to prevent a transition animation in a Frame if you are using ConnectedAnimationService, since connected animations aren't meant to be used simultaneously with the default navigation transitions. Per altre informazioni su come usare le transizioni di navigazione, vedere NavigationThemeTransition .See NavigationThemeTransition for more info on how to use navigation transitions.

ConnectedAnimationConnectedAnimation

ConnectedAnimationServiceConnectedAnimationService

NavigationThemeTransitionNavigationThemeTransition