Animazioni in XAML

Le animazioni possono migliorare la tua app aggiungendo movimento e interattività. Usando le animazioni della libreria di animazioni di Windows Runtime, puoi integrare l'aspetto di Windows nella tua app. In questo argomento viene fornito un riepilogo delle animazioni e degli esempi di scenari tipici in cui ognuno viene usato.

Le animazioni della libreria di animazioni di Windows Runtime offrono questi vantaggi:

• Movimenti allineati alle linee guida per le animazioni
• Transizioni veloci e fluide tra stati dell'interfaccia utente che informano ma non distraggono l'utente
• Comportamento visivo che indica le transizioni all'interno di un'app all'utente

Ad esempio, quando l'utente aggiunge un elemento a un elenco, anziché il nuovo elemento visualizzato immediatamente nell'elenco, il nuovo elemento viene animato sul posto. Gli altri elementi dell'elenco animano le nuove posizioni in un breve periodo di tempo, rendendo spazio per l'elemento aggiunto. Il comportamento di transizione qui rende più evidente l'interazione del controllo per l'utente.

Windows 10, versione 1607 introduce una nuova API Connessione edAnimationService per l'implementazione di animazioni in cui un elemento sembra animare tra le visualizzazioni durante uno spostamento. Questa API ha un modello di utilizzo diverso rispetto all'altra API della libreria di animazioni. L'utilizzo di Connessione edAnimationService è illustrato nella pagina di riferimento.

La libreria di animazioni non fornisce animazioni per ogni possibile scenario. Esistono casi in cui potresti voler creare un'animazione personalizzata in XAML. Per altre info, vedere Animazioni nello Storyboard.

Inoltre, per alcuni scenari avanzati, ad esempio l'animazione di un elemento in base alla posizione di scorrimento di scrollViewer, gli sviluppatori potrebbero voler usare l'interoperabilità del livello visivo per implementare animazioni personalizzate. Per altre informazioni, vedere Livello visivo.

Tipi di animazioni

Il sistema di animazione di Windows Runtime e la libreria di animazioni servono all'obiettivo più ampio di abilitare i controlli e altre parti dell'interfaccia utente per avere un comportamento animato. Esistono diversi tipi distinti di animazioni.

• Le transizioni di tema vengono applicate automaticamente quando determinate condizioni cambiano nell'interfaccia utente, che coinvolgono controlli o elementi dai tipi di interfaccia utente XAML di Windows Runtime predefiniti. Si tratta di transizioni di tema definite perché le animazioni supportano l'aspetto e l'aspetto di Windows e definiscono le operazioni eseguite da tutte le app per determinati scenari dell'interfaccia utente quando cambiano da una modalità di interazione a un'altra. Le transizioni del tema fanno parte della libreria di animazioni.
• Le animazioni del tema sono animazioni per una o più proprietà di tipi di interfaccia utente XAML di Windows Runtime predefiniti. Le animazioni del tema differiscono dalle transizioni di tema perché le animazioni del tema hanno come destinazione un elemento specifico ed esistono in stati di visualizzazione specifici all'interno di un controllo, mentre le transizioni del tema vengono assegnate alle proprietà del controllo che esistono all'esterno degli stati di visualizzazione e influenzano le transizioni tra tali stati. Molti dei controlli XAML di Windows Runtime includono animazioni del tema all'interno degli storyboard che fanno parte del modello di controllo, con le animazioni attivate dagli stati di visualizzazione. Finché non modifichi i modelli, avrai a disposizione queste animazioni del tema predefinite per i controlli nell'interfaccia utente. Tuttavia, se sostituisci i modelli, rimuoverai anche le animazioni del tema del controllo predefinite. Per riportarli indietro, devi definire uno storyboard che include animazioni a tema all'interno del set di stati di visualizzazione del controllo. È anche possibile eseguire animazioni del tema da storyboard che non si trovano all'interno degli stati di visualizzazione e iniziare con il metodo Begin , ma questo è meno comune. Le animazioni a tema fanno parte della libreria di animazioni.
• Le transizioni visive vengono applicate quando un controllo passa da uno dei relativi stati di visualizzazione definiti a un altro stato. Si tratta di animazioni personalizzate scritte e in genere correlate al modello personalizzato scritto per un controllo e le definizioni dello stato di visualizzazione all'interno di tale modello. L'animazione viene eseguita solo durante l'intervallo di tempo tra gli stati ed è in genere un breve intervallo di tempo, al massimo pochi secondi. Per altre info, vedi la sezione "VisualTransition" delle animazioni con storyboard per gli stati di visualizzazione.
• Le animazioni con storyboard animano il valore di una proprietà di dipendenza di Windows Runtime nel tempo. Gli storyboard possono essere definiti come parte di una transizione visiva o attivati in fase di esecuzione dall'applicazione. Per altre info, vedere Animazioni nello Storyboard. Per altre info sulle proprietà di dipendenza e sulla posizione in cui esistono, vedi Panoramica delle proprietà di dipendenza.
• Connessione animazioni fornite dalla nuova API Connessione edAnimationService consentono agli sviluppatori di creare facilmente un effetto in cui un elemento sembra animare tra le visualizzazioni durante una navigazione. Questa API è disponibile a partire da Windows 10, versione 1607. Per altre informazioni, vedere ConnectedAnimationService.

Animazioni disponibili nella libreria

Le animazioni seguenti vengono fornite nella libreria di animazioni. Fare clic sul nome di un'animazione per altre informazioni sui principali scenari di utilizzo, su come definirli e per visualizzare un esempio dell'animazione.

• Transizione di pagina: aggiunge un'animazione alle transizioni di pagina in un frame.
• Transizione di contenuto e ingresso: anima una parte o un set di contenuti all'interno o all'esterno della visualizzazione.
• Dissolvenza in/uscita e dissolvenza incrociata: mostra elementi o controlli temporanei oppure aggiorna un'area del contenuto.
• Puntatore verso l'alto o verso il basso: fornisce un feedback visivo di un tocco o un clic su un riquadro.
• Riposizionamento: sposta un elemento in una nuova posizione.
• Mostra/nascondi popup: visualizza l'interfaccia utente contestuale nella parte superiore della visualizzazione.
• Mostra/nascondi interfaccia utente perimetrale: scorre l'interfaccia utente basata su bordi, inclusa un'interfaccia utente di grandi dimensioni, ad esempio un pannello, in o fuori visualizzazione.
• Modifiche dell'elemento elenco: aggiunge o elimina un elemento da un elenco o riordina gli elementi.
• Trascinamento della selezione: fornisce feedback visivo durante un'operazione di trascinamento della selezione.

Transizione di pagina

Usa le transizioni di pagina per animare la navigazione all'interno di un'app. Poiché quasi tutte le app usano un certo tipo di navigazione, le animazioni di transizione di pagina sono il tipo più comune di animazione del tema usata dalle app. Per altre informazioni sulle API di transizione della pagina, vedere NavigationThemeTransition.

Transizione del contenuto e transizione di ingresso

Usa animazioni di transizione del contenuto (ContentThemeTransition) per spostare una parte o un set di contenuti all'interno o all'esterno della visualizzazione corrente. Ad esempio, le animazioni di transizione del contenuto mostrano il contenuto che non era pronto per la visualizzazione al primo caricamento della pagina o quando il contenuto cambia in una sezione di una pagina.

EntranceThemeTransition rappresenta un movimento che può essere applicato al contenuto quando viene caricata una pagina o una sezione di grandi dimensioni dell'interfaccia utente. Pertanto, la prima comparsa del contenuto può offrire commenti e suggerimenti diversi rispetto a una modifica apportata al contenuto. EntranceThemeTransition equivale a NavigationThemeTransition con i parametri predefiniti, ma può essere usato all'esterno di un frame.

Dissolvenza in/uscita e dissolvenza incrociata

Usa le animazioni dissolvenza in uscita e per mostrare o nascondere l'interfaccia utente o i controlli temporanei. In XAML questi elementi sono rappresentati come FadeInThemeAnimation e FadeOutThemeAnimation. Un esempio è in una barra dell'app in cui possono essere visualizzati nuovi controlli a causa dell'interazione dell'utente. Un altro esempio è un indicatore di scorrimento temporaneo o panoramica che viene disattivato dopo che non è stato rilevato alcun input dell'utente per un certo periodo di tempo. Le app devono usare anche la dissolvenza nell'animazione quando passano da un elemento segnaposto all'elemento finale quando il contenuto viene caricato in modo dinamico.

Usa un'animazione a dissolvenza incrociata per regolare la transizione quando lo stato di un elemento cambia; ad esempio, quando l'app aggiorna il contenuto corrente di una visualizzazione. La libreria di animazioni XAML non fornisce un'animazione crossfade dedicata (nessun equivalente per crossFade), ma puoi ottenere lo stesso risultato usando FadeInThemeAnimation e FadeOutThemeAnimation con tempi sovrapposti.

Puntatore verso l'alto/verso il basso

Usa le animazioni PointerUpThemeAnimation e PointerDownThemeAnimation per fornire all'utente commenti e suggerimenti per un tocco riuscito o fare clic su un riquadro. Ad esempio, quando un utente fa clic o tocca verso il basso su un riquadro, viene riprodotta l'animazione verso il basso del puntatore. Dopo che il clic o il tocco è stato rilasciato, viene riprodotta l'animazione puntatore su.

Proposta

Usa le animazioni di riposizionamento (RepositionThemeAnimation o RepositionThemeTransition) per spostare un elemento in una nuova posizione. Ad esempio, lo spostamento delle intestazioni in un controllo elementi usa l'animazione di riposizionamento.

Mostra/nascondi popup

Usa PopInThemeAnimation e PopOutThemeAnimation quando visualizzi e nascondi un popup o un'interfaccia utente contestuale simile nella parte superiore della visualizzazione corrente. PopupThemeTransition è una transizione di tema utile se vuoi accendere una finestra popup.

Mostra/nascondi interfaccia utente perimetrale

Usa l'animazione EdgeUIThemeTransition per far scorrere l'interfaccia utente basata su bordi di piccole dimensioni all'interno e all'esterno della visualizzazione. Ad esempio, usa queste animazioni quando visualizzi una barra dell'app personalizzata nella parte superiore o inferiore dello schermo o in una superficie dell'interfaccia utente per gli errori e gli avvisi nella parte superiore dello schermo.

Usa l'animazione PaneThemeTransition per visualizzare e nascondere un riquadro o un pannello. Si tratta di un'interfaccia utente basata su bordi di grandi dimensioni, ad esempio una tastiera personalizzata o un riquadro attività.

Modifiche all'elemento elenco

Usa l'animazione AddDeleteThemeTransition per aggiungere un comportamento animato quando aggiungi o elimina un elemento in un elenco esistente. Per aggiungere, la transizione riposizionerà prima gli elementi esistenti nell'elenco per creare spazio per i nuovi elementi e quindi aggiungere i nuovi elementi. Per l'eliminazione, la transizione rimuove gli elementi da un elenco e, se necessario, riposiziona gli elementi di elenco rimanenti dopo la rimozione degli elementi eliminati.

Esiste anche un ReorderThemeTransition separato da applicare se un elemento cambia posizione in un elenco. Questa operazione viene animata in modo diverso rispetto all'eliminazione di un elemento e all'aggiunta di un elemento in una nuova posizione con le animazioni di eliminazione/aggiunta associate.

Si noti che queste animazioni sono incluse nei modelli predefiniti di ListView e GridView, quindi non è necessario aggiungere manualmente queste animazioni se si usano già questi controlli.

Trascinare/rilasciare

Usa le animazioni di trascinamento (DragItemThemeAnimation, DragOverThemeAnimation) e l'animazione di rilascio (DropTargetItemThemeAnimation) per fornire feedback visivo quando l'utente trascina o rilascia un elemento.

Quando è attiva, le animazioni mostrano all'utente che l'elenco può essere riorganizzato intorno a un elemento eliminato. È utile per gli utenti sapere dove verrà inserito l'elemento in un elenco se viene eliminato nella posizione corrente. Le animazioni forniscono feedback visivo che un elemento trascinato può essere eliminato tra due altri elementi nell'elenco e che tali elementi verranno spostati all'esterno della strada.

Uso di animazioni con controlli personalizzati

La tabella seguente riepiloga i nostri consigli per l'animazione da usare quando crei una versione personalizzata di questi controlli Windows Runtime:

Esempi di animazione di transizione

Idealmente, la tua app usa le animazioni per migliorare l'interfaccia utente o per renderla più attraente senza fastidiosi gli utenti. Un modo per eseguire questa operazione consiste nell'applicare transizioni animate all'interfaccia utente in modo che quando qualcosa entra o lascia lo schermo o cambia in altro modo, l'animazione attira l'attenzione dell'utente alla modifica. Ad esempio, i pulsanti possono dissolversi rapidamente all'esterno e all'esterno della visualizzazione anziché semplicemente apparire e scomparire. È stata creata una serie di API che possono essere usate per creare transizioni di animazione consigliate o tipiche coerenti. L'esempio seguente mostra come applicare un'animazione a un pulsante in modo che venga visualizzata rapidamente.

<Button Content="Transitioning Button">
     <Button.Transitions>
         <TransitionCollection> 
             <EntranceThemeTransition/>
         </TransitionCollection>
     </Button.Transitions>
 </Button>

In questo codice si aggiunge l'oggetto EntranceThemeTransition all'insieme di transizioni del pulsante. Ora, quando il rendering del pulsante viene eseguito per la prima volta, scorre rapidamente nella visualizzazione anziché semplicemente apparire. Puoi impostare alcune proprietà sull'oggetto animazione per regolare la distanza delle diapositive e da quale direzione, ma è un'API semplice per uno scenario specifico, ovvero per fare un ingresso accattivante.

Puoi anche definire temi di animazione di transizione nelle risorse di stile della tua app, consentendoti di applicare l'effetto in modo uniforme. Questo esempio equivale a quello precedente, ma viene applicato solo usando uno Stile:

<UserControl.Resources>
     <Style x:Key="DefaultButtonStyle" TargetType="Button">
         <Setter Property="Transitions">
             <Setter.Value>
                 <TransitionCollection>
                     <EntranceThemeTransition/>
                 </TransitionCollection>
             </Setter.Value>
        </Setter>
    </Style>
</UserControl.Resources>
      
<StackPanel x:Name="LayoutRoot">
    <Button Style="{StaticResource DefaultButtonStyle}" Content="Transitioning Button"/>
</StackPanel>

Gli esempi precedenti applicano una transizione di tema a un singolo controllo, tuttavia, le transizioni di tema sono ancora più interessanti quando vengono applicate a un contenitore di oggetti. Quando si esegue questa operazione, tutti gli oggetti figlio del contenitore partecipano alla transizione. Nell'esempio seguente viene applicato un oggetto EntranceThemeTransition a una griglia di rettangoli.

<!-- If you set an EntranceThemeTransition animation on a panel, the
     children of the panel will automatically offset when they animate
     into view to create a visually appealing entrance. -->        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
            <EntranceThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- The sequence children appear depends on their order in 
         the panel's children, not necessarily on where they render
         on the screen. Be sure to arrange your child elements in
         the order you want them to transition into view. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>

I rettangoli figlio della griglia passano in visualizzazione uno dopo l'altro in modo visivamente piacevole anziché tutti in una sola volta, come nel caso in cui l'animazione sia stata applicata singolarmente ai rettangoli.

Ecco una dimostrazione di questa animazione:

Gli oggetti figlio di un contenitore possono anche scorrere nuovamente quando uno o più di questi elementi figlio cambiano posizione. Nell'esempio seguente viene applicato un oggetto RepositionThemeTransition a una griglia di rettangoli. Quando si rimuove uno dei rettangoli, tutti gli altri rettangoli scorrono nella nuova posizione.

<Button Content="Remove Rectangle" Click="RemoveButton_Click"/>
        
<ItemsControl Grid.Row="1" x:Name="rectangleItems">
    <ItemsControl.ItemContainerTransitions>
        <TransitionCollection>
                    
            <!-- Without this, there would be no animation when items 
                 are removed. -->
            <RepositionThemeTransition/>
        </TransitionCollection>
    </ItemsControl.ItemContainerTransitions>
    <ItemsControl.ItemsPanel>
        <ItemsPanelTemplate>
            <WrapGrid Height="400"/>
        </ItemsPanelTemplate>
    </ItemsControl.ItemsPanel>
            
    <!-- All these rectangles are just to demonstrate how the items
         in the grid re-flow into position when one of the child items
         are removed. -->
    <ItemsControl.Items>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
        <Rectangle Fill="Red" Width="100" Height="100" Margin="10"/>
    </ItemsControl.Items>
</ItemsControl>

private void RemoveButton_Click(object sender, RoutedEventArgs e)
{
    if (rectangleItems.Items.Count > 0)
    {    
        rectangleItems.Items.RemoveAt(0);
    }                         
}

// .h
private:
void RemoveButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e);

//.cpp
void BlankPage::RemoveButton_Click(Platform::Object^ sender, Windows::UI::Xaml::RoutedEventArgs^ e)
{
    if (rectangleItems->Items->Size > 0)
    {    
        rectangleItems->Items->RemoveAt(0);
    }
}

È possibile applicare più animazioni di transizione a un singolo oggetto o contenitore di oggetti. Ad esempio, se si vuole che l'elenco di rettangoli venga animato in visualizzazione e anche quando cambiano posizione, è possibile applicare RepositionThemeTransition e EntranceThemeTransition come segue:

...
<ItemsControl.ItemContainerTransitions>
    <TransitionCollection>
        <EntranceThemeTransition/>                    
        <RepositionThemeTransition/>
    </TransitionCollection>
</ItemsControl.ItemContainerTransitions>
...      

Esistono diversi effetti di transizione per creare animazioni sugli elementi dell'interfaccia utente man mano che vengono aggiunti, rimossi, riordinati e così via. I nomi di queste API contengono tutti "ThemeTransition":

Esempi di animazione del tema

Le animazioni di transizione sono semplici da applicare. Ma potresti voler avere un po 'più controllo sulla tempistica e sull'ordine degli effetti di animazione. È possibile usare le animazioni dei temi per abilitare un maggiore controllo mentre si usa ancora un tema coerente per il comportamento dell'animazione. Le animazioni del tema richiedono anche meno markup rispetto alle animazioni personalizzate. In questo caso si usa FadeOutThemeAnimation per rendere un rettangolo fuori visualizzazione.

<StackPanel>    
    <StackPanel.Resources>
        <Storyboard x:Name="myStoryboard">
            <FadeOutThemeAnimation TargetName="myRectangle" />
        </Storyboard>
    </StackPanel.Resources>
    <Rectangle PointerPressed="Rectangle_Tapped" x:Name="myRectangle"  
              Fill="Blue" Width="200" Height="300"/>
</StackPanel>

// When the user taps the rectangle, the animation begins.
private void Rectangle_Tapped(object sender, PointerRoutedEventArgs e)
{
    myStoryboard.Begin();
}

' When the user taps the rectangle, the animation begins.
Private Sub Rectangle_Tapped(sender As Object, e As PointerRoutedEventArgs)
    myStoryboard.Begin()
End Sub

//.h
void Rectangle_Tapped(Platform::Object^ sender, Windows::UI::Xaml::Input::PointerRoutedEventArgs^ e);

//.cpp
void BlankPage::Rectangle_Tapped(Object^ sender, PointerRoutedEventArgs^ e)
{
    myStoryboard->Begin();
}

A differenza delle animazioni di transizione, un'animazione del tema non ha un trigger predefinito (la transizione) che lo esegue automaticamente. Devi usare uno Storyboard per contenere un'animazione del tema quando la definisci in XAML. Puoi inoltre modificare il comportamento predefinito dell'animazione. Ad esempio, è possibile rallentare la dissolvenza aumentando il valore temporale Durata in FadeOutThemeAnimation.

Nota Ai fini della visualizzazione delle tecniche di animazione di base, usiamo il codice dell'app per avviare l'animazione chiamando i metodi di Storyboard. È possibile controllare l'esecuzione delle animazioni storyboard usando i metodi Begin, Stop, Pause e Resume Storyboard. Tuttavia, questo non è in genere il modo in cui includi animazioni di libreria nelle app. In genere si integrano le animazioni della libreria negli stili e nei modelli XAML applicati ai controlli o agli elementi. L'apprendimento dei modelli e degli stati di visualizzazione è un po' più coinvolto. Tuttavia, verrà illustrato come usare le animazioni di libreria negli stati di visualizzazione come parte dell'argomento Animazioni con storyboard per gli stati di visualizzazione.

Puoi applicare diverse altre animazioni del tema agli elementi dell'interfaccia utente per creare effetti di animazione. I nomi di queste API contengono tutti "ThemeAnimation":

Creare le proprie animazioni

Quando le animazioni del tema non sono sufficienti per le tue esigenze, puoi creare animazioni personalizzate. È possibile animare gli oggetti animando uno o più dei relativi valori di proprietà. Ad esempio, è possibile animare la larghezza di un rettangolo, l'angolo di un oggetto RotateTransform o il valore di colore di un pulsante. Definiamo questo tipo di animazione personalizzata un'animazione con storyboard, per distinguerla dalle animazioni della libreria già fornite da Windows Runtime come tipo di animazione preconfigurata. Per le animazioni con storyboard, usa un'animazione che può modificare i valori di un particolare tipo (ad esempio DoubleAnimation per animare un oggetto Double) e inserire tale animazione all'interno di uno Storyboard per controllarla.

Per essere animata, la proprietà che si sta animando deve essere una proprietà di dipendenza. Per altre informazioni sulle proprietà di dipendenza, vedere Panoramica delle proprietà di dipendenza. Per altre info sulla creazione di animazioni con storyboard personalizzate, incluse le modalità di destinazione e controllo, vedi Animazioni con storyboard.

L'area più grande della definizione dell'interfaccia utente dell'app in XAML in cui definirai animazioni con storyboard personalizzate è se definisci gli stati di visualizzazione per i controlli in XAML. Questa operazione verrà eseguita perché si sta creando una nuova classe di controllo o perché si sta ricreando un controllo esistente con stati di visualizzazione nel relativo modello di controllo. Per altre info, vedi Animazioni con storyboard per gli stati di visualizzazione.