Sfruttare le transizioni dell'Animation Library

Nell'articolo precedente, abbiamo già accennato al fatto che, per facilitare gli sviluppatori nell'utilizzo di animazioni ed evitare al contempo inconsistenze nella user experience di applicazioni diverse, Microsoft ha sviluppato una collezione di animazioni che possiamo utilizzare per le nostre app. Queste animazioni, incluse nel namespace Windows.UI.Xaml.Media.Animation, sono in linea con il classico "look and feel" di Windows 8, anche perché i nuovi controlli XAML introdotti da WinRT, come i controlli GridView, ListView e FlipView, utilizzano proprio questa libreria per le loro transizioni.

La seguente tabella elenca le transizioni incluse nell'Animation Library così come indicate in MSDN.

API	Nome	Descrizione
EntranceThemeTransition	Page transition	Animates the contents of a page into or out of view
ContentThemeTransition	Content transition	Animates one piece or set of content into or out of view
FadeInThemeAnimation FadeOutThemeAnimation	Fade in/out	Shows transient elements or controls
FadeInThemeAnimation FadeOutThemeAnimation	Crossfade	Refreshes a ontent area
PointerUpThemeAnimation PointerDownThemeAnimation	Pointer up/down	Gives visual feedback of a tap or click on a tile
RepositionThemeAnimation RepositionThemeTransition	Reposition	Moves an element into a new position
PopInThemeAnimation PopOutThemeAnimation PopupThemeTransition	Show/Hide popup	Displays contextual UI on top of the view
EdgeUIThemeTransition	Show/Hide edge UI	Slides edge-based UI into or out of view
PaneThemeTransition	Show/Hide panel	Slides large edge-based panels into or out of view
AddDeleteThemeTransition	Add/Delete from list	Adds or deletes an item from a list
DragItemThemeAnimation DropTargetItemThemeAnimation DragOverThemeAnimation	Start/End a drag or drag-between	Gives visual feedback during a drag-and-drop operation
SwipeHintThemeAnimation	Swipe hint	Hints that a tile supports the swipe interaction
SwipeBackThemeAnimation	Swipe select/deselect	Transitions a tile to a swipe-selected state

Gli effetti di "page transition", ad esempio, permettono di animare il contenuto di una pagina durante il passaggio da una pagina all'altra. La logica necessaria a realizzare questo effetto è incapsulata nella classe EntranceThemeTransition. Questa animazione può essere applicata anche a singoli oggetti o contenitori di oggetti; in quest'ultimo caso, gli elementi child verranno animati nello stesso ordine in cui essi sono disegnati a schermo, piuttosto che tutti insieme. Il prossimo snippet illustra questo punto.

<Page
    x:Class="Demo.Html.it.UsingAnimations.CS.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Demo.Html.it.UsingAnimations.CS"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <Grid.ChildrenTransitions>
            <TransitionCollection>
                <EntranceThemeTransition/>
            </TransitionCollection>
        </Grid.ChildrenTransitions>
        <Grid.RowDefinitions>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="*"/>
        </Grid.ColumnDefinitions>
        <Rectangle Fill="Red" Grid.Row="0" Grid.Column="0" Width="100" Height="100" Margin="2"/>
        <Rectangle Fill="Blue" Grid.Row="0" Grid.Column="1" Width="100" Height="100" Margin="2"/>
        <Rectangle Fill="Green" Grid.Row="0" Grid.Column="2" Width="100" Height="100" Margin="2"/>
    </Grid>
</Page>

Gli effetti di tipo "content transition" permettono invece di animare parti di contenuto all'interno di una pagina, ad esempio per mostrare del contenuto che non era ancora disponibile quando la pagina è stata caricata, oppure per aggiornare del contenuto che nel frattempo è cambiato. La classe responsabile per questo tipo di animazione è la classe ContentThemeTransition. Il prossimo snippet mostra un esempio del suo utilizzo:

<Page
    x:Class="Demo.Html.it.UsingAnimations.CS.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Demo.Html.it.UsingAnimations.CS"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <ContentControl x:Name="ContentSample" PointerPressed="ContentSample_PointerPressed">
            <ContentControl.ContentTransitions>
                <TransitionCollection>
                    <ContentThemeTransition />
                </TransitionCollection>
            </ContentControl.ContentTransitions>
            <TextBlock FontSize="22">Clicca qui per vedere l'effetto di content transition</TextBlock>
        </ContentControl>
    </Grid>
</Page>

La transizione verrà eseguita non appena il contenuto del controllo parent cambia. In questo esempio, il cambiamento è legato al click del mouse sul controllo ContentControl. Quando questo avviene, il corrispondente event handler crea un nuovo controllo TextBlock e lo imposta come contenuto del controllo parent, come mostrato nel codice che segue:

private void ContentSample_PointerPressed(object sender, PointerRoutedEventArgs e)
{
    var tb = new TextBlock();
    tb.FontSize = 22.0;
    tb.Text = "L'effetto di content transition è stato applicato.";
    ContentSample.Content = tb;
}

Un'altra transizione di applicazione generalizzata è l'effetto fade in/out, che permette di far apparire o sparire gradualmente un elemento o un controllo (ad esempio, il controllo ScrollBar utilizza questo effetto dopo che è trascorso un certo tempo senza input da parte dell'utente per nascondere la barra). Gli effetti di "fade in" e "fade out" sono incapsulati, rispettivamente, dalle classi FadeInThemeAnimation e FadeOutThemeAnimation. Il codice che segue applica l'effetto di fade in/out a un semplice controllo TextBlock:

<Page
    x:Class="Demo.Html.it.UsingAnimations.CS.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Demo.Html.it.UsingAnimations.CS"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <StackPanel>
            <StackPanel.Resources>
                <Storyboard x:Name="EnterStoryboard">
                    <FadeOutThemeAnimation Storyboard.TargetName="MyContent" />
                </Storyboard>
                <Storyboard x:Name="ExitStoryboard">
                    <FadeInThemeAnimation Storyboard.TargetName="MyContent" />
                </Storyboard>
            </StackPanel.Resources>
            <TextBlock x:Name="MyContent" FontSize="22" Text="Muovi il mouse qui sopra per l'effetto di fade in/out" PointerEntered="TextBlock_PointerEntered" PointerExited="TextBlock_PointerExited" />
        </StackPanel>
    </Grid>
</Page>

Non appena l'utente muove il mouse sopra il testo, il codice del corrispondente event handler applica l'effetto di fade out, mentre quando il mouse lascia la regione di schermo occupata dal controllo TextBlock, il secondo event handler esegue l'effetto di fade in.

Il codice per i due event handler è il seguente:

private void TextBlock_PointerEntered(object sender, PointerRoutedEventArgs e)
{
    EnterStoryboard.Begin();
}
private void TextBlock_PointerExited(object sender, PointerRoutedEventArgs e)
{
    ExitStoryboard.Begin();
}

Un'altra utile animazione è offerta dalla transizione "pointer up/down". Questo effetto dà all'utente un feedback quando questi clicca su un elemento di UI, come un pulsante o un tile, riducendo leggermente le dimensioni dell'elemento quando l'utente ci clicca sopra, e ripristinando le dimensioni originali quando l'utente rilascia il controllo. Le classi responsabili per queste animazioni sono PointerUpThemeAnimation e PointerDownThemeAnimation. Il seguente codice XAML mostra un esempio di questa transizione:

<Page
    x:Class="Demo.Html.it.UsingAnimations.CS.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Demo.Html.it.UsingAnimations.CS"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">
    <Grid Background="{StaticResource ApplicationPageBackgroundThemeBrush}">
        <VisualStateManager.VisualStateGroups>
            <VisualStateGroup x:Name="TapStates">
                <VisualState x:Name="Normal" />
                <VisualState x:Name="PointerDown">
                    <Storyboard>
                        <PointerDownThemeAnimation TargetName="MyCircle" />
                    </Storyboard>
                </VisualState>
                <VisualState x:Name="PointerUp">
                    <Storyboard>
                        <PointerUpThemeAnimation TargetName="MyCircle" />
                    </Storyboard>
                </VisualState>
            </VisualStateGroup>
        </VisualStateManager.VisualStateGroups>
        <Ellipse x:Name="MyCircle" Width="100" Height="100" Fill="Orange"/>
    </Grid>
</Page>

Quello che segue è il codice C# per i due event handler:

protected override void OnPointerPressed(PointerRoutedEventArgs e)
{
    this.CapturePointer(e.Pointer);
    VisualStateManager.GoToState(this, "PointerDown", true);
}
protected override void OnPointerReleased(PointerRoutedEventArgs e)
{
    VisualStateManager.GoToState(this, "PointerUp", true);
    this.ReleasePointerCapture(e.Pointer);
}

Le transizioni messe a disposizione dall'Animation Library di Microsoft dovrebbero poter coprire la maggior parte degli scenari. Ricordati infatti che è sempre preferibile usare una delle animazioni incluse nella libreria, perché assicurano la coerenza della user experience della tua app con il complessivo ecosistema di Windows 8.