Windows Dev Center

Linguaggio: HTML | XAML

Guida introduttiva: Animazione dell'interfaccia utente con le animazioni della libreria (XAML)

Applies to Windows and Windows Phone

Le animazioni in Windows Runtime possono migliorare la tua app aggiungendo movimento e interattività. Usando le animazioni della libreria della animazioni di Windows Runtime puoi integrarne l'aspetto nella tua app.

Nota  Per scaricare un esempio che illustra molti dei concetti presentati in questo argomento, vedi il documento relativo all'esempio di animazioni preconfigurate XAML.

Roadmap: che relazione c'è tra questo argomento e gli altri? Vedi:

Effetti di transizione

Un'app principalmente utilizza le animazioni per migliorare l'interfaccia utente o per renderla più accattivante ed evitare di annoiare gli utenti. A questo scopo, l'applicazione di effetti di transizione all'interfaccia utente è uno dei metodi più usati per attrarre l'attenzione dell'utente quando ad esempio un elemento compare o scompare dallo schermo o quando hanno luogo altri cambiamenti. Ai pulsanti potrebbe ad esempio essere applicato un effetto di dissolvenza rapida invece di farli semplicemente comparire e scomparire. Abbiamo creato alcune API da usare per creare transizioni di animazione consigliate o tipiche, che sono coerenti. L'esempio seguente illustra come applicare un'animazione a un pulsante per farlo scorrere rapidamente in una vista.


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

Nel codice è stato aggiunto l'oggetto EntranceThemeTransition alla raccolta degli effetti di transizione del pulsante. Ora, quando il rendering viene eseguito per la prima volta, il pulsante entra scorrendo rapidamente nella vista invece di comparire dal nulla. Puoi impostare qualche proprietà dell'oggetto animazione per definire quanto e in che direzione deve scorrere, ma rimane un'API piuttosto semplice destinata a uno scenario specifico, e cioè per attirare l'attenzione sulla comparsa del pulsante.

Puoi anche definire effetti di transizione di tema nelle risorse di stile dell'app, per permettere l'applicazione uniforme di effetti. Questo esempio è uguale al precedente, ma viene applicato mediante uno Style:


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

Negli esempi precedenti viene applicata una transizione di tema a un singolo controllo, ma le transizioni di tema sono ancora più interessanti se applicate a un contenitore di oggetti. In tal caso, tutti gli oggetti figlio del contenitore partecipano alla transizione. Nell'esempio seguente una EntranceThemeTransition viene applicata a una Grid 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 figli dell'elemento Grid compaiono nella vista uno dopo l'altro con un effetto di transizione visivamente gradevole invece che tutti in una volta, come sarebbe avvenuto applicando l'animazione ai singoli rettangoli.

Ecco un video che illustra questa animazione:

|

È inoltre possibile far scorrere gli oggetti figlio di un oggetto contenitore nella vista quando uno o più oggetti figlio cambiano posizione. Nell'esempio seguente, un oggetto RepositionThemeTransition è applicato a una griglia di rettangoli. Rimuovendo uno dei rettangoli, tutti gli altri rifluiranno nelle rispettive nuove posizioni.


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

Questo video illustra l'animazione che viene eseguita per i rettangoli da rimuovere:

|

È possibile applicare più effetti di transizione a un singolo oggetto o contenitore di oggetti. Ad esempio, se vuoi che l'elenco di rettangoli venga visualizzato tramite un'animazione e che venga visualizzata un'animazione per il cambio di posizione, potrai applicare la RepositionThemeTransition e EntranceThemeTransition, come mostrato di seguito:



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

Sono disponibili molti effetti di transizione, per creare animazioni negli elementi UI durante l'aggiunta, la rimozione, il riordinamento e così via. Tutti i nomi di queste API contengono "ThemeTransition":

APIDescrizione
AddDeleteThemeTransition Implementa il comportamento dell'effetto di transizione per l'aggiunta o l'eliminazione di oggetti figlio o contenuti di un controllo. Un controllo in genere è un contenitore di elementi.
ContentThemeTransition Implementa il comportamento dell'effetto di transizione per la modifica del contenuto di un controllo. Puoi applicarla insieme a AddDeleteThemeTransition.
EdgeUIThemeTransition Implementa il comportamento dell'effetto di transizione per una transizione dell'interfaccia utente basata su bordi (di piccole dimensioni).
EntranceThemeTransition Implementa il comportamento dell'effetto di transizione per la prima visualizzazione di un controllo.
PaneThemeTransition Implementa il comportamento dell'effetto di transizione per una transizione dell'interfaccia utente basata su riquadri (interfaccia utente basata su bordi di grandi dimensioni).
PopupThemeTransition Implementa il comportamento dell'effetto di transizione che si applica ai componenti di controlli a comparsa (ad esempio interfaccia utente di tipo descrizione comando su un oggetto) quando vengono visualizzati.
ReorderThemeTransition Implementa il comportamento dell'effetto di transizione per la modifica dell'ordine degli elementi in un controllo Listview. Ciò accade in genere a seguito di un'operazione di trascinamento della selezione. Differenti controlli e temi possono avere differenti caratteristiche per le animazioni.
RepositionThemeTransition Implementa il comportamento dell'effetto di transizione per la modifica della posizione di un controllo.

 

Animazioni di tema

Gli effetti di transizione sono semplici da applicare. È tuttavia preferibile avere un maggiore controllo sulla temporizzazione e sull'ordine degli effetti di animazione. Puoi utilizzare le animazioni di tema per consentire un maggiore controllo sul comportamento dell'animazione e avere comunque un tema coerente con Windows. Le animazioni di tema richiedono anche meno markup rispetto alle animazioni personalizzate. In questo esempio si utilizza FadeOutThemeAnimation per applicare un effetto di dissolvenza a un rettangolo.


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

A differenza delle animazioni di transizione, un'animazione di tema non include un trigger incorporato (la transizione), che la esegue automaticamente. Devi usare una classe Storyboard per contenere un'animazione del tema che viene definita in XAML. Puoi inoltre modificare il comportamento predefinito dell'animazione. Ad esempio, puoi rallentare la dissolvenza, aumentando il valore di tempo Duration in FadeOutThemeAnimation.

Nota  Per una dimostrazione delle tecniche di base dell'animazione, usiamo il codice dell'app per avviare l'animazione chiamando metodi di Storyboard. Puoi controllare il modo in cui le animazioni Storyboard vengono eseguite usando i metodi Begin, Stop, Pause e Resume Storyboard. Non è in questo modo comunque che in genere si includono animazioni della libreria nelle app. Di solito, dovrai invece integrare le animazioni della libreria negli stili e nei modelli XAML applicati ai controlli o agli elementi. I concetti relativi ai modelli e agli stati di visualizzazione sono leggermente più complessi. L'uso delle animazioni della libreria negli stati di visualizzazione viene trattato tuttavia nell'argomento Animazioni con storyboard per stati di visualizzazione.

Puoi applicare svariati altri temi di animazioni agli elementi dell'interfaccia utente per creare effetti di animazione. Tutti i nomi di queste API contengono "ThemeAnimation":

APIDescrizione
DragItemThemeAnimation Rappresenta l'animazione preconfigurata che viene applicata agli elementi che vengono trascinati.
DragOverThemeAnimation Rappresenta l'animazione preconfigurata che viene applicata agli elementi al di sotto di un elemento che viene trascinato.
DropTargetItemThemeAnimation Animazione preconfigurata applicabile al trascinamento di elementi di destinazione.
FadeInThemeAnimation Animazione preconfigurata dell'opacità applicabile alla prima visualizzazione dei controlli.
FadeOutThemeAnimation Animazione preconfigurata dell'opacità applicabile quando i controlli vengono rimossi dall'interfaccia utente o nascosti.
PointerDownThemeAnimation Animazione preconfigurata applicabile quando l'utente tocca o fa clic su un elemento.
PointerUpThemeAnimation Animazione preconfigurata per l'azione utente eseguita dopo che un utente tocca una voce o un elemento e l'azione viene rilasciata.
PopInThemeAnimation Animazione preconfigurata applicabile alla comparsa di elementi popup nei controlli. Questa animazione combina effetti di opacità e traslazione.
PopOutThemeAnimation Animazione preconfigurata applicabile alla chiusura o rimozione di elementi popup nei controlli. Questa animazione combina effetti di opacità e traslazione.
RepositionThemeAnimation Animazione preconfigurata applicabile quando un oggetto viene riposizionato.
SplitCloseThemeAnimation Animazione preconfigurata che nasconde una UI di destinazione usando un'animazione in due parti.
SplitOpenThemeAnimation Animazione preconfigurata che evidenzia gli elementi dell'interfaccia utente di destinazione con un'animazione in due parti.
SwipeBackThemeAnimation Animazione preconfigurata applicabile ai controlli quando un elemento torna allo slot di layout dopo un'interazione di scorrimento rapido.
SwipeHintThemeAnimation Animazione preconfigurata che indica che uno scorrimento rapido è ora possibile.

 

Animazioni predefinite per controlli

I controlli di Windows Runtime includono alcune animazioni predefinite, come parte della logica di controllo e dei modelli XAML predefiniti. Ti consigliamo di esaminare le informazioni disponibili su questi controlli, in modo da poterli usare per le animazioni nell'interfaccia utente.

Segue un elenco di alcuni controlli con animazioni incorporate:

Nota  Questo elenco non è completo. Per altre informazioni, vedi gli argomenti relativi alle animazioni in questa stessa area o gli argomenti relativi agli stili e ai modelli per controlli specifici.

Creazione di animazioni personalizzate

Se le animazioni di tema non sono sufficienti per le proprie esigenze, è possibile creare animazioni personalizzate. Puoi animare gli oggetti animando uno o più valori delle rispettive proprietà. Ad esempio, puoi animare la larghezza di un rettangolo, l'angolo di un oggetto RotateTransform o il valore del colore di un pulsante. Definiamo questo tipo di animazione personalizzata con il termine di animazione con storyboard per distinguerla dalle animazioni della libreria, già fornite da Windows Runtime come tipo di animazione preconfigurata. Per le animazioni con storyboard, viene usata un'animazione che può cambiare i valori di un tipo specifico (ad esempio DoubleAnimation per animare una proprietà Double) e posizionare tale animazione in una classe Storyboard per controllarla.

Per poter essere animata, una proprietà deve essere una proprietà di dipendenza. Per altre info sulle proprietà di dipendenza, vedi Panoramica delle proprietà di dipendenza. Per altre informazioni sulla creazione di animazioni con storyboard personalizzate, incluso il modo in cui farvi riferimento e controllarle, vedi Animazioni con storyboard.

L'area più estesa di definizione dell'interfaccia utente delle app in XAML in cui vengono definite animazioni con storyboard personalizzate è rappresentata dalla definizione di stati di visualizzazione per i controlli in XAML. In genere questa operazione viene effettuata perché vuoi creare una nuova classe di controlli o ridefinire i modelli di un controllo esistente con stati di visualizzazione nel modello del controllo. Per altre informazioni, vedi Animazioni con storyboard per stati di visualizzazione. Queste animazioni non sono in genere transizioni nel tempo, ma vengono eseguite istantaneamente e rappresentano più che altro una tecnica per la definizione di un insieme di modifiche di proprietà per uno stato. Non applicano necessariamente un comportamento animato visivamente a un'interfaccia utente, anche se potrai osservare come gli stati di visualizzazione dei controlli includano spesso le animazioni della libreria. In questo caso le animazioni del tema applicano un cambiamento nel tempo, anche se in genere di breve durata.

Argomenti correlati

Roadmap per la creazione di app in C# o VB
Sintassi proprietà-percorso
Panoramica delle proprietà di dipendenza
Animazioni con storyboard
Animazioni nello storyboard per stati di visualizzazione
Animazioni con frame chiave e semplificazione di animazioni di funzione
Storyboard
Storyboard.TargetProperty

 

 

Mostra:
© 2015 Microsoft