Alessandro Del Sole's Blog

{ A programming space about Microsoft® .NET® }
posts - 1908, comments - 2047, trackbacks - 352

My Links

News

Your host

This is me! Questo spazio è dedicato a Microsoft® .NET®, di cui sono molto appassionato :-)

Cookie e Privacy

Disabilita cookie ShinyStat

Microsoft MVP

My MVP Profile

Microsoft Certified Professional

Microsoft Specialist

Xamarin Certified Mobile Developer

Il mio libro su VB 2015!

Pre-ordina il mio libro su VB 2015 Pre-ordina il mio libro "Visual Basic 2015 Unleashed". Clicca sulla copertina per informazioni!

Il mio libro su WPF 4.5.1!

Clicca sulla copertina per informazioni! E' uscito il mio libro "Programmare con WPF 4.5.1". Clicca sulla copertina per informazioni!

These postings are provided 'AS IS' for entertainment purposes only with absolutely no warranty expressed or implied and confer no rights.
If you're not an Italian user, please visit my English blog

Le vostre visite

I'm a VB!

Guarda la mia intervista a Seattle

Follow me on Twitter!

Altri spazi

GitHub
I miei progetti open-source su GitHub

Article Categories

Archives

Post Categories

Image Galleries

Privacy Policy

WPF: Esempio di doppia animazione

Una delle caratteristiche peculiari di Windows Presentation Foundation è quella costituita dalle animazioni. Le animazioni sono di diverso tipo e possono riguardare i controlli, le figure geometriche e i colori.

In questo post vedremo due esempi di animazioni che si intrecciano tra loro. Vedremo, infatti, come animare un cerchio (riempito con un gradiente circolare) e come animare uno dei suoi colori mentre il cerchio stesso si muove.

Dopo aver aperto Visual Basic o Visual C# e creato un nuovo progetto WPF, attivate l'editor di codice XAML. Eliminate i tag <Grid></Grid> ed aggiungete un elemento Canvas, che meglio si presta allo scopo, poichè permette il cosiddetto posizionamento assoluto.

Il primo passaggio è quello di definire una figura geometrica. Disegnare un cerchio è un obiettivo che si raggiunge tramite l'elemento Ellipse. Il seguente snippet disegna un'ellisse, con sfondo a gradiente circolare di tre colori:

        <Ellipse x:Name="MyEllipse" Opacity="0.5" Height="100" Width="100">

            <Ellipse.Fill>

                <RadialGradientBrush>

                    <GradientStop Offset="0" Color="Yellow"/>

                    <GradientStop Offset="0.7" Color="Orange"/>

                    <GradientStop Offset="1" Color="Red"/>

                </RadialGradientBrush>

            </Ellipse.Fill>        

        </Ellipse>

Le dimensioni dell'ellisse sono specificate dagli attributi Width e Height, mentre l'attributo Opacity imposta la trasparenza.

La prima animazione che vogliamo aggiungere ci consentirà di variare il colore centrale dello sfondo a intervalli di tempo prefissati, in andata e in ritorno. Ciò significa che il colore arancione diventerà man mano di un altro colore (verde, ad esempio) per poi tornare al colore originario. Le animazioni vanno aggiunte ai Trigger dell'elemento cui si riferiscono (in questo caso Ellipse.Triggers). Vediamo l'esempio di codice, per poi commentarlo:

            <Ellipse.Triggers>

                <EventTrigger RoutedEvent="Ellipse.Loaded">

                    <EventTrigger.Actions>

                        <BeginStoryboard>

                            <Storyboard TargetProperty="Fill.GradientStops[1].Color">

                                <ColorAnimation From="Orange" To="Green" Duration="0:0:2"

                  AutoReverse="True" RepeatBehavior="Forever"/>

                            </Storyboard>

                        </BeginStoryboard>

                    </EventTrigger.Actions>

                </EventTrigger>

            </Ellipse.Triggers>

L'animazione deve essere avviata al verificarsi di un evento (per questo si utilizza l'EventTrigger), in particolare al caricamento dell'elemento desiderato (attributo RoutedEvent impostato su Loaded). L'evento Loaded, come molti sapranno, in WPF appartiene alla categoria degli eventi Routed. Se siete a digiuno di nozioni su eventi Routed e Trigger, potete leggere questo mio articolo introduttivo a WPF su VB T&T. L'inizio dell'animazione viene statuito dall'elemento Storyboard, il cui attributo TargetProperty indica quale sarà l'elemento (o una sua proprietà, come in questo caso) da animare. Nel nostro esempio andremo ad animare uno dei GradientStop che costituiscono il colore di sfondo e che appartiene ad un insieme. Utilizzando le parentesi quadre si può intervenire su un singolo elemento di un insieme. La ColorAnimation è un'animazione specifica per i colori; abbiamo specificato che si deve passare dall'arancio (From) al verde (To), che l'animazione durerà 2 secondi (Duration), che durerà all'infinito (RepeatBehavior) e che sarà in andata e in ritorno (AutoReverse).

Se volte prendere fiato e fermarvi per un momento, avviate l'applicazione per vedere quest'animazione in azione! :-)

La seconda animazione, invece, ci permetterà di vedere il nostro cerchio in movimento all'interno del contenitore Canvas. Per tale motivo, la nuova animazione sarà contenuta in un elemento Canvas.Triggers. Digitate il seguente codice:

        <Canvas.Triggers>

            <EventTrigger RoutedEvent="Canvas.Loaded">

                <EventTrigger.Actions>

                    <BeginStoryboard>

                        <Storyboard BeginTime="0" Duration="Forever">

                            <DoubleAnimation Storyboard.TargetName="MyEllipse" Storyboard.TargetProperty="(Canvas.Top)" From="0" To="200" AutoReverse="true" BeginTime="0:0:0" Duration="0:0:3" RepeatBehavior="Forever"/>

                            <DoubleAnimation Storyboard.TargetName="MyEllipse" Storyboard.TargetProperty="(Canvas.Left)" From="0" To="300" AutoReverse="true" BeginTime="0:0:0" Duration="0:0:2" RepeatBehavior="Forever"/>

                        </Storyboard>

                    </BeginStoryboard>

                </EventTrigger.Actions>

            </EventTrigger>

        </Canvas.Triggers>

In questo caso utilizziamo una DoubleAnimation. Come potete notare, tramite le proprietà From e To specifichiamo il punto di partenza e di arrivo dell'animazione all'interno del Canvas. Le altre proprietà dovrebbero esservi abbastanza chiare, poichè ne abbiamo dato cenno in precedenza.

Due elementi DoubleAnimation, in congiunzione tra loro, permetteranno al nostro cerchio di muoversi sia orizzontalmente che verticalmente, in contemporanea.

Dopo tanto sforzo, avviate l'applicazione. Quello che segue è un semplice screen-shot tratto durante l'esecuzione dell'animazione, ma sul vostro schermo sarà molto più bello vedere il tutto in movimento:

Se l'argomento vi piace, nel Capitolo 5 (Grafica in WPF) del mio nuovo libro si parla molto anche di animazioni.

Alessandro

Print | posted on giovedì 17 gennaio 2008 00:29 | Filed Under [ Windows Presentation Foundation ]

Powered by:
Powered By Subtext Powered By ASP.NET