Condividi tramite


Cenni preliminari sull'animazione

Aggiornamento: novembre 2007

In Windows Presentation Foundation (WPF) è disponibile un insieme completo di funzionalità di grafica e layout che consentono di creare interfacce utente di forte impatto e documenti accattivanti. Con l'animazione è possibile migliorare ulteriormente l'aspetto e la facilità di utilizzo dell'interfaccia utente. Applicando semplicemente l'animazione a un colore di sfondo oppure utilizzando un oggetto Transform animato, è possibile creare notevoli effetti di transizione dello schermo o fornire utili segnali visivi.

In questo documento viene fornita un'introduzione all'animazione e al sistema di temporizzazione di WPF. Verrà descritta in particolare l'animazione di oggetti WPF tramite storyboard.

Nel presente argomento sono contenute le seguenti sezioni.

  • Introduzione alle animazioni
  • Sistema di animazione delle proprietà WPF
  • Esempio: applicare a un elemento una dissolvenza in entrata e in uscita
  • Tipi di animazione
  • Applicazione di un'animazione a una proprietà
  • Controllo interattivo di uno storyboard
  • Effetti del termine di un'animazione
  • Associazione dati e animazione delle animazioni
  • Altre modalità di animazione
  • Esempi di animazione
  • Argomenti correlati

Introduzione alle animazioni

L'animazione è un'illusione creata scorrendo rapidamente una serie di immagini, ognuna leggermente diversa dall'ultima. Il cervello percepisce il gruppo di immagini come un'unica scena che cambia. Nei film questa illusione viene creata utilizzando fotocamere che registrano numerose fotografie, ovvero fotogrammi, ogni secondo. Quando i fotogrammi vengono riprodotti con un proiettore, il pubblico vede un film.

L'animazione su computer è simile. Ad esempio, un programma che applica una dissolvenza in uscita al disegno di un rettangolo funziona in modo analogo al seguente.

  • Il programma crea un timer.

  • Il programma controlla il timer a intervalli predefiniti per rilevare quanto tempo è trascorso.

  • Ogni volta che controlla il timer, il programma calcola il valore di opacità per il rettangolo in base al tempo trascorso.

  • Il programma aggiorna quindi il rettangolo con il nuovo valore e lo ridisegna.

Prima di WPF, gli sviluppatori di Microsoft Windows dovevano creare e gestire i propri sistemi di temporizzazione o utilizzare speciali librerie personalizzate. In WPF è incluso un efficiente sistema di temporizzazione esposto tramite codice gestito e Extensible Application Markup Language (XAML) che è pienamente integrato nel framework di WPF. Con le funzionalità di WPF risulta facile applicare animazioni ai controlli e ad altri oggetti grafici.

In WPF tutte le attività di gestione del sistema di temporizzazione vengono svolte automaticamente e lo schermo viene aggiornato in modo efficiente. Sono disponibili classi di temporizzazione che consentono di concentrarsi sugli effetti che si desidera creare anziché sulle operazioni per ottenerli. In WPF è anche semplice creare animazioni esponendo le classi di base di animazione da cui le proprie classi possono ereditare, per produrre animazioni personalizzate. che sfruttano molti dei vantaggi prestazionali delle classi di animazione standard.

Sistema di animazione delle proprietà WPF

Dopo aver compreso alcuni importanti concetti sul sistema di temporizzazione, le animazioni di WPF potranno risultare più facili da utilizzare. Il fattore più importante da considerare è che in WPF gli oggetti vengono animati applicando l'animazione alle relative proprietà. Ad esempio, per ingrandire un elemento del framework, è necessario applicare l'animazione alle relative proprietà Width e Height. Per applicare un effetto di dissolvenza in uscita a un oggetto, è necessario animare la relativa proprietà Opacity.

Per includere funzionalità di animazione, una proprietà deve soddisfare i tre requisiti seguenti:

WPF contiene molti oggetti con proprietà che è possibile animare. I controlli come Button e TabControl nonché gli oggetti Panel e Shape ereditano da DependencyObject. La maggior parte delle proprietà di questi oggetti sono proprietà di dipendenza. 

È possibile utilizzare le animazioni quasi ovunque, ad esempio negli stili e nei modelli di controllo. Le animazioni non devono necessariamente essere visive. È possibile animare oggetti che non fanno parte dell'interfaccia utente, purché soddisfino i criteri descritti in questa sezione.

Esempio: applicare a un elemento una dissolvenza in entrata e in uscita

In questo esempio viene illustrato come utilizzare un'animazione di WPF per animare il valore di una proprietà di dipendenza. Viene utilizzato un oggetto DoubleAnimation, ossia un tipo di animazione che genera valori Double, per animare la proprietà Opacity di un oggetto Rectangle. Di conseguenza, all'oggetto Rectangle viene applicata una dissolvenza in entrata e in uscita.

Nella prima parte dell'esempio viene creato un elemento Rectangle, che viene visualizzato in un oggetto Page. Nei passaggi successivi viene illustrato come creare un'animazione e applicarla alla proprietà Opacity del rettangolo.

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Fading Rectangle Example">
  <StackPanel Margin="10">
    
    <Rectangle
      Name="MyRectangle"
      Width="100" 
      Height="100"
      Fill="Blue">
    </Rectangle> 
  </StackPanel>
</Page>

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace Microsoft.SDK.Animation
{
    public class RectangleOpacityFadeExample : Page
    {
        public RectangleOpacityFadeExample()
        {
            NameScope.SetNameScope(this, new NameScope());
            this.WindowTitle = "Fading Rectangle Example";
            StackPanel myPanel = new StackPanel();
            myPanel.Margin = new Thickness(10);
            
            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;
            myPanel.Children.Add(myRectangle);
            this.Content = myPanel; 
        }
    }
}

Parte 1: Creare un oggetto DoubleAnimation

Per applicare una dissolvenza in entrata e in uscita a un elemento, è possibile animare la relativa proprietà Opacity. Poiché la proprietà Opacity è di tipo Double, è necessaria un'animazione che produca valori double. Un oggetto DoubleAnimation è un'animazione di questo tipo. Un oggetto DoubleAnimation crea una transizione tra due valori double. Per specificare il valore iniziale, impostare la proprietà From. Per specificare il valore finale, impostare la proprietà To.

  1. Un valore di opacità pari a 1.0 rende completamente opaco l'oggetto, mentre un valore di opacità 0.0 lo rende completamente invisibile. Per ottenere la transizione dell'animazione da 1.0 a 0.0, impostare la proprietà From su 1.0 e la proprietà To su 0.0.

    ...
    <DoubleAnimation From="1.0" To="0.0"  />        
    ...
    

    [C#]

    DoubleAnimation myDoubleAnimation = new DoubleAnimation();
    myDoubleAnimation.From = 1.0;
    myDoubleAnimation.To = 0.0;
    
  2. In seguito, è necessario specificare una proprietà Duration. La proprietà Duration di un'animazione specifica quanto tempo è richiesto per passare dal valore iniziale al valore di destinazione. Nell'esempio seguente per l'animazione viene specificata una durata di cinque secondi.

    ...
    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />        
    ...
    
    myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
    
  3. Nel codice precedente è illustrata la transizione di un'animazione da 1.0 a 0.0. In questo modo l'elemento di destinazione diventa completamente invisibile da completamente opaco tramite dissolvenza. Per fare in modo che l'elemento torni a essere visibile dopo essere stato rimosso dalla visualizzazione, impostare la proprietà AutoReverse dell'animazione su true. Se si desidera che l'animazione si ripeta all'infinito, impostare la proprietà RepeatBehavior su Forever.

    ...
    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" AutoReverse="True" RepeatBehavior="Forever"/>        
    ...
    
    myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
    myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;
    

Parte 2: Creare uno storyboard

Per applicare un'animazione a un oggetto, creare un elemento Storyboard e utilizzare le proprietà connesseTargetName e TargetProperty per specificare l'oggetto e la proprietà da animare.

  1. Creare l'elemento Storyboard e aggiungere l'animazione al relativo elemento figlio.

    ...
    <Storyboard>
      <DoubleAnimation
        From="1.0" To="0.0" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
    ...
    

    Nel codice dichiarare Storyboard come membro della classe.

    public class RectangleOpacityFadeExample : Page
    { 
        private Storyboard myStoryboard;
    

    Inizializzare quindi l'elemento Storyboard e aggiungere l'animazione al relativo elemento figlio.

    myStoryboard = new Storyboard();
    myStoryboard.Children.Add(myDoubleAnimation);
    
  2. L'elemento Storyboard deve riconoscere dove applicare l'animazione. Utilizzare la proprietà associata Storyboard.TargetName per specificare l'oggetto da animare. Nel codice seguente all'oggetto DoubleAnimation viene assegnato il nome di destinazione MyRectangle, ossia il nome dell'oggetto da animare.

    ...
    <Storyboard>
      <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        From="1.0" To="0.0" Duration="0:0:1" 
        AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
    ...
    
    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
    

    Nota

    Quando si creano storyboard nel codice, è necessario eseguire due passaggi aggiuntivi: creare un ambito del nome e registrare il nome dell'oggetto da animare. Nel codice all'inizio della sezione con cui sono stati creati la pagina e il rettangolo è stato dichiarato anche un oggetto NameScope ed è stato registrato un nome per il rettangolo. Utilizzare il metodo SetNameScope per creare un oggetto NameScope, se non ne esiste già uno. Utilizzare il metodo RegisterName per registrare il nome dell'oggetto di destinazione con l'elemento per cui è stato creato un oggetto NameScope. In caso contrario, l'elemento Storyboard non è in grado di trovare l'oggetto per animarlo. Per un altro esempio, vedere Procedura: definire un ambito del nome.

  3. Utilizzare la proprietà associata TargetProperty per specificare la proprietà da animare. Nel codice seguente l'animazione è configurata per essere destinata alla proprietà Opacity di un oggetto Rectangle.

<BeginStoryboard>
  <Storyboard>
    <DoubleAnimation
      Storyboard.TargetName="MyRectangle" 
      Storyboard.TargetProperty="Opacity"
      From="1.0" To="0.0" Duration="0:0:5" 
      AutoReverse="True" RepeatBehavior="Forever" />
  </Storyboard>
</BeginStoryboard>
Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

Per ulteriori informazioni sulla sintassi della proprietà TargetProperty e per altri esempi, vedere Cenni preliminari sugli storyboard.

Parte3 (XAML): Associare lo storyboard a un trigger

Il modo più semplice per applicare e avviare un elemento Storyboard in XAML consiste nell'utilizzare un trigger di evento.

Creare un oggetto BeginStoryboard e associarvi lo storyboard. Un oggetto BeginStoryboard è un tipo di TriggerAction che applica e avvia un elemento Storyboard.

<BeginStoryboard>
  <Storyboard>
    <DoubleAnimation
      Storyboard.TargetName="MyRectangle" 
      Storyboard.TargetProperty="Opacity"
      From="1.0" To="0.0" Duration="0:0:5" 
      AutoReverse="True" RepeatBehavior="Forever" />
  </Storyboard>
</BeginStoryboard>

Creare un oggetto EventTrigger e aggiungere l'oggetto BeginStoryboard al relativo insieme Actions. Impostare la proprietà RoutedEvent dell'oggetto EventTrigger sull'evento indirizzato con cui si desidera avviare l'oggetto Storyboard. Per ulteriori informazioni sugli eventi indirizzati, vedere Cenni preliminari sugli eventi indirizzati.

<!-- Animates the rectangle's opacity. -->
<EventTrigger RoutedEvent="Rectangle.Loaded">
  <BeginStoryboard>
    <Storyboard>
      <DoubleAnimation
        Storyboard.TargetName="MyRectangle" 
        Storyboard.TargetProperty="Opacity"
        From="1.0" To="0.0" Duration="0:0:5" 
        AutoReverse="True" RepeatBehavior="Forever" />
    </Storyboard>
  </BeginStoryboard>
</EventTrigger>

Aggiungere l'oggetto EventTrigger all'insieme Triggers del rettangolo.

<Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>
    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0.0" Duration="0:0:5" 
            AutoReverse="True" RepeatBehavior="Forever" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>

Parte 3 (codice): Associare lo storyboard a un gestore eventi

Il modo più semplice per applicare e avviare un elemento Storyboard consiste nell'utilizzare un gestore eventi.

  1. Registrarsi per l'evento Loaded del rettangolo.

    [C#]

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);
    
  2. Dichiarare il gestore eventi. Nel gestore eventi utilizzare il metodo Begin per applicare lo storyboard.

    [C#]

    ...
    public void myRectangleLoaded(object sender, RoutedEventArgs e)
    {
        myStoryboard.Begin(this);
    }
    ...
    

Esempio completo

Nell'esempio seguente viene illustrato il codice completo per la creazione di un rettangolo al quale viene applicata una dissolvenza in entrata e in uscita.

<Page
  xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
  xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
  WindowTitle="Fading Rectangle Example">
  <StackPanel Margin="10">
    <Rectangle
      Name="MyRectangle"
      Width="100" 
      Height="100"
      Fill="Blue">
      <Rectangle.Triggers>
        <!-- Animates the rectangle's opacity. -->
        <EventTrigger RoutedEvent="Rectangle.Loaded">
          <BeginStoryboard>
            <Storyboard>
              <DoubleAnimation
                Storyboard.TargetName="MyRectangle" 
                Storyboard.TargetProperty="Opacity"
                From="1.0" To="0.0" Duration="0:0:5" 
                AutoReverse="True" RepeatBehavior="Forever" />
            </Storyboard>
          </BeginStoryboard>
        </EventTrigger>
      </Rectangle.Triggers>
    </Rectangle>
  </StackPanel>
</Page>
using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Shapes;
using System.Windows.Media;
using System.Windows.Media.Animation;

namespace SDKSample
{

    public class RectangleOpacityFadeExample : Page
    {
        private Storyboard myStoryboard;

        public RectangleOpacityFadeExample()
        {
            NameScope.SetNameScope(this, new NameScope());

            this.WindowTitle = "Fading Rectangle Example";
            StackPanel myPanel = new StackPanel();
            myPanel.Margin = new Thickness(10);

            Rectangle myRectangle = new Rectangle();
            myRectangle.Name = "myRectangle";
            this.RegisterName(myRectangle.Name, myRectangle);
            myRectangle.Width = 100;
            myRectangle.Height = 100;
            myRectangle.Fill = Brushes.Blue;

            DoubleAnimation myDoubleAnimation = new DoubleAnimation();
            myDoubleAnimation.From = 1.0;
            myDoubleAnimation.To = 0.0;
            myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));
            myDoubleAnimation.AutoReverse = true;
            myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

            myStoryboard = new Storyboard();
            myStoryboard.Children.Add(myDoubleAnimation);
            Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);
            Storyboard.SetTargetProperty(myDoubleAnimation, new PropertyPath(Rectangle.OpacityProperty));

            // Use the Loaded event to start the Storyboard.
            myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);  

            myPanel.Children.Add(myRectangle);
            this.Content = myPanel;
        }

        private void myRectangleLoaded(object sender, RoutedEventArgs e)
        {
            myStoryboard.Begin(this);
        }

    }
}

Tipi di animazione

Poiché le animazioni generano valori di proprietà, per i diversi tipi di proprietà esistono tipi di animazione diversi. Per animare una proprietà che accetta un oggetto Double, ad esempio la proprietà Width di un elemento, utilizzare un'animazione che produce valori Double. Per animare una proprietà che accetta un oggetto Point, utilizzare un'animazione che produce valori Point e così via. A causa del numero di tipi di proprietà diversi, nello spazio dei nomi System.Windows.Media.Animation esistono diverse classi di animazione. Fortunatamente, seguono una convenzione di denominazione rigorosa che ne facilita la differenziazione:

  • <<Tipo>Animation

    Nota come animazione "From/To/By" o "di base", viene applicata tra un valore iniziale e un valore di destinazione oppure tramite l'aggiunta di un valore di offset al valore iniziale.

    • Per specificare un valore iniziale, impostare la proprietà From dell'animazione.

    • Per specificare un valore finale, impostare la proprietà To dell'animazione.

    • Per specificare un valore di offset, impostare la proprietà By dell'animazione.

    Negli esempi di questo documento vengono utilizzate queste animazioni perché sono le più semplici. Per informazioni dettagliate sulle animazioni From/To/By, vedere Cenni preliminari sulle animazioni From/To/By.

  • <<Tipo>AnimationUsingKeyFrames

    Le animazioni basate su fotogrammi chiave sono più efficaci delle animazioni From/To/By, in quanto è possibile specificare un numero qualsiasi di valori di destinazione e controllarne il metodo di interpolazione. Alcuni tipi possono essere animati solo con le animazioni basate su fotogrammi chiave. Per informazioni dettagliate, vedere Cenni preliminari sulle animazioni con fotogrammi chiave.

  • <<Tipo>AnimationUsingPath

    Le animazioni basate su percorso consentono di utilizzare un percorso geometrico per produrre valori animati.

  • <<Tipo>AnimationBase

    Classe astratta che, quando viene implementata, anima un valore <Tipo>. Questa classe funge da classe di base per le classi <Tipo>Animation e <Tipo>AnimationUsingKeyFrames. È necessario gestire direttamente queste classi solo se si desidera creare animazioni personalizzate. In caso contrario, utilizzare una classe <Tipo>Animation o KeyFrame<Tipo>Animation.

Nella maggior parte dei casi è preferibile utilizzare le classi <Tipo>Animation, ad esempio DoubleAnimation e ColorAnimation.

Nella tabella seguente sono illustrati diversi tipi di animazione comuni e alcune proprietà con cui vengono utilizzati.

Tipo proprietà

Animazione (From/To/By) di base corrispondente

Animazione basata su fotogrammi chiave corrispondente

Animazione basata su percorso corrispondente

Esempio di utilizzo

Color

ColorAnimation

ColorAnimationUsingKeyFrames

Nessuna

Animazione della proprietà Color di un oggetto SolidColorBrush o GradientStop.

Double

DoubleAnimation

DoubleAnimationUsingKeyFrames

DoubleAnimationUsingPath

Animazione della proprietà Width di un oggetto DockPanel o della proprietà Height di un oggetto Button.

Point

PointAnimation

PointAnimationUsingKeyFrames

PointAnimationUsingPath

Animazione della posizione Center di un oggetto EllipseGeometry.

String

Nessuna

StringAnimationUsingKeyFrames

Nessuna

Animazione della proprietà Text di un oggetto TextBlock o della proprietà Content di un oggetto Button.

Animazioni e oggetti Timeline

Tutti i tipi di animazione ereditano dalla classe Timeline, pertanto sono tipi specializzati di oggetti Timeline. Un oggetto Timeline definisce un intervallo di tempo. È possibile specificare i comportamenti temporali di un oggetto Timeline: la proprietà Duration, quante volte è ripetuto e la velocità di avanzamento del tempo.

Poiché un'animazione è un oggetto Timeline, rappresenta anche un intervallo di tempo. Per un'animazione vengono inoltre calcolati i valori di output durante il relativo avanzamento nell'intervallo di tempo specificato, ovvero Duration. Con l'avanzamento, ossia la riproduzione, dell'animazione, viene aggiornata la proprietà associata.

Le tre proprietà temporali utilizzate più frequentemente sono Duration, AutoReversee RepeatBehavior.

Proprietà Duration

Come accennato in precedenza, un oggetto Timeline rappresenta un intervallo di tempo. La durata di tale intervallo è determinata dalla proprietà Duration, in genere specificata tramite un valore TimeSpan. Quando viene raggiunto il termine della durata di un oggetto Timeline, è stata completata un'iterazione.

Per determinare il valore corrente di un'animazione, viene utilizzata la proprietà Duration. Se non si specifica un valore Duration per un'animazione, viene utilizzato il valore predefinito di 1 secondo.

Nella sintassi seguente viene illustrata una versione semplificata della sintassi degli attributi Extensible Application Markup Language (XAML) per la proprietà Duration.

hours:minutes:seconds

Nella tabella seguente sono illustrate diverse impostazioni dell'oggetto Duration con i relativi valori risultanti.

Impostazione

Valore risultante

0:0:5.5

5,5 secondi

0:30:5.5

30 minuti e 5,5 secondi.

1:30:5.5

1 ora, 30 minuti e 5,5 secondi.

Per specificare un oggetto Duration nel codice, è possibile utilizzare il metodo FromSeconds per creare un oggetto TimeSpan, quindi dichiarare una nuova struttura Duration utilizzando tale oggetto TimeSpan.

Per ulteriori informazioni sui valori dell'oggetto Duration e per la sintassi Extensible Application Markup Language (XAML) completa, vedere la pagina relativa al tipo Duration.

AutoReverse

La proprietà AutoReverse specifica se un oggetto Timeline viene riprodotto in senso inverso quando raggiunge il termine di Duration. Se questa proprietà di animazione viene impostata su true, un'animazione viene riprodotta al contrario quando raggiunge il termine di Duration, ossia dal valore finale al valore iniziale. Per impostazione predefinita, questa proprietà è impostata su false.

RepeatBehavior

La proprietà RepeatBehavior specifica quante volte viene riprodotto un oggetto Timeline. Per impostazione predefinita, agli oggetti Timeline è associato il conteggio di iterazioni 1.0, il che significa che vengono riprodotti una sola volta e non vengono ripetuti.

Per ulteriori informazioni su queste e altre proprietà, vedere Cenni preliminari sui comportamenti temporali.

Applicazione di un'animazione a una proprietà

Nelle sezioni precedenti sono descritti i vari tipi di animazione e le relative proprietà temporali. In questa sezione viene illustrato come applicare l'animazione alla proprietà che si desidera animare. A tale scopo è ad esempio possibile utilizzare gli oggetti Storyboard. Un oggetto Storyboard è un oggetto Timeline contenitore che fornisce informazioni sulla destinazione per le animazioni che contiene.

Oggetti di destinazione e proprietà

La classe Storyboard fornisce le proprietà connesseTargetName e TargetProperty. Impostando queste proprietà su un'animazione, si indicano gli oggetti che si desidera animare. Tuttavia, affinché un oggetto possa diventare la destinazione di un'animazione, è in genere necessario assegnargli un nome.

La procedura di assegnazione di un nome è diversa a seconda che l'oggetto sia FrameworkElement o Freezable. La maggior parte dei controlli e dei pannelli sono elementi del framework, mentre gli oggetti più strettamente grafici, quali pennelli, trasformazioni e geometrie, sono bloccabili. Se non si è certi che un tipo sia FrameworkElement o Freezable, fare riferimento alla sezione Gerarchia di ereditarietà della pagina relativa al tipo.

  • Per impostare un oggetto FrameworkElement come destinazione di un'animazione, è necessario assegnargli un nome impostando la relativa proprietà Name. Nel codice è anche necessario utilizzare il metodo RegisterName per registrare il nome dell'elemento con la pagina cui appartiene.

  • Per impostare un oggetto Freezable come destinazione di un'animazione in XAML, utilizzare l'Attributo x:Name per assegnargli un nome. Nel codice è sufficiente utilizzare il metodo RegisterName per registrare l'oggetto con la pagina cui appartiene.

Nelle sezioni seguenti viene fornito un esempio di assegnazione del nome a un elemento in XAML e nel codice. Per informazioni più dettagliate sull'assegnazione dei nomi e l'impostazione di destinazioni, vedere Cenni preliminari sugli storyboard.

Applicazione e avvio di storyboard

Per avviare uno storyboard in XAML, associarlo a un oggetto EventTrigger. EventTrigger è un oggetto che descrive le azioni da eseguire quando si verifica un evento specificato. Una di tali azioni può essere BeginStoryboard, da utilizzare per avviare lo storyboard. Il concetto di trigger di evento è simile a quello dei gestori eventi, perché consentono di specificare la modalità con cui l'applicazione risponde a un determinato evento. A differenza dei gestori eventi, i trigger di evento possono essere descritti completamente in XAML. Non è richiesto altro codice.

Per avviare un oggetto Storyboard nel codice, è possibile utilizzare un oggetto EventTrigger oppure il metodo Begin della classe Storyboard.

Controllo interattivo di uno storyboard

Nell'esempio precedente è stato illustrato come avviare un oggetto Storyboard quando si verifica un evento. È inoltre possibile controllare in modo interattivo un oggetto Storyboard dopo l'avvio: è possibile sospendere, riprendere, arrestare, ricercare e rimuovere l'oggetto Storyboard, nonché spostarlo al periodo di riempimento. Per ulteriori informazioni e un esempio in cui viene illustrato come controllare in modo interattivo un oggetto Storyboard, vedere Cenni preliminari sugli storyboard.

Effetti del termine di un'animazione

La proprietà FillBehavior specifica il comportamento di un oggetto Timeline quando termina. Per impostazione predefinita, un oggetto Timeline avvia Filling quando termina. Un'animazione nello stato Filling mantiene il proprio valore di output finale.

L'oggetto DoubleAnimation nell'esempio precedente non termina perché la relativa proprietà RepeatBehavior è impostata su Forever. Nell'esempio seguente viene animato un rettangolo utilizzando un'animazione simile. A differenza dell'esempio precedente, le proprietà RepeatBehavior e AutoReverse di questa animazione rimangono impostate sui valori predefiniti. Pertanto, l'animazione avanza da 1 a 0 in un intervallo di cinque secondi e quindi si arresta.

<Rectangle
  Name="MyRectangle"
  Width="100" 
  Height="100"
  Fill="Blue">
  <Rectangle.Triggers>

    <!-- Animates the rectangle's opacity. -->
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation
            Storyboard.TargetName="MyRectangle" 
            Storyboard.TargetProperty="Opacity"
            From="1.0" To="0" Duration="0:0:5" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>
DoubleAnimation myDoubleAnimation = new DoubleAnimation();
myDoubleAnimation.From = 1.0;
myDoubleAnimation.To = 0.0;
myDoubleAnimation.Duration = new Duration(TimeSpan.FromSeconds(5));

Poiché la FillBehavior non è stata modificata rispetto al valore predefinito, che è HoldEnd, l'animazione mantiene il valore finale 0 quando termina. Pertanto, la proprietà Opacity del rettangolo rimane impostata su 0 al termine dell'animazione. Se la proprietà Opacity del rettangolo viene impostata su un altro valore, il codice non produce effetti evidenti, perché l'animazione continua a influire sulla proprietà Opacity.

Per ottenere nuovamente il controllo di una proprietà animata nel codice, è possibile utilizzare il metodo BeginAnimation e specificare null per il parametro AnimationTimeline. Per ulteriori informazioni e un esempio, vedere Procedura: impostare una proprietà dopo averla animata con uno storyboard.

Si noti che, sebbene l'impostazione del valore di una proprietà con un'animazione nello stato Active o Filling non produce effetti evidenti, il valore della proprietà in realtà cambia. Per ulteriori informazioni, vedere Cenni preliminari sull'animazione e sul sistema di temporizzazione.

Associazione dati e animazione delle animazioni

La maggior parte delle proprietà di animazione può essere associata a dati o animata. È ad esempio possibile animare la proprietà Duration di un oggetto DoubleAnimation. Tuttavia, a causa della modalità di funzionamento del sistema di temporizzazione, le animazioni associate a dati o animate non presentano lo stesso comportamento di altri oggetti associati a dati o animati. Per comprendere questo comportamento, può essere utile capire che cosa significa applicare un'animazione a una proprietà.

Fare riferimento all'esempio della sezione precedente in cui è illustrato come animare la proprietà Opacity di un rettangolo. Quando il rettangolo nell'esempio precedente viene caricato, il relativo trigger di evento applica l'oggetto Storyboard. Il sistema di temporizzazione crea una copia dell'oggetto Storyboard e della relativa animazione. Queste copie vengono bloccate (ossia, rese di sola lettura) e utilizzate per creare gli oggetti Clock. Questi orologi animano effettivamente le proprietà di destinazione.

Il sistema di temporizzazione crea un orologio per l'oggetto DoubleAnimation e lo applica all'oggetto e alla proprietà specificati dalle proprietà TargetName e TargetProperty dell'oggetto DoubleAnimation. In questo caso, il sistema di temporizzazione applica l'orologio alla proprietà Opacity dell'oggetto denominato "MyRectangle".

Anche se viene creato un orologio anche per l'oggetto Storyboard, tale orologio non viene applicato ad alcuna proprietà, in quanto viene creato solo per controllare il proprio orologio figlio, ossia quello creato per l'oggetto DoubleAnimation.

Affinché un'animazione rifletta le modifiche di associazione dati o di animazione, è necessario rigenerare il relativo orologio. Gli orologi non vengono rigenerati automaticamente. Per aggiornare l'animazione in base alle modifiche, riapplicare il relativo storyboard utilizzando un oggetto BeginStoryboard o il metodo Begin. Quando si utilizza uno di questi metodi, l'animazione viene riavviata. Nel codice è possibile utilizzare il metodo Seek per spostare nuovamente lo storyboard nella posizione precedente.

Per un esempio di animazione associata a dati, vedere Esempio di animazione con spline chiave. Per ulteriori informazioni sul funzionamento delle animazioni e del sistema di temporizzazione, vedere Cenni preliminari sull'animazione e sul sistema di temporizzazione.

Altre modalità di animazione

Negli esempi di questo documento viene illustrato come applicare animazioni tramite storyboard. Quando si utilizza codice, è possibile eseguire questa operazione in diversi altri modi. Per ulteriori informazioni, vedere Cenni preliminari sulle tecniche di animazione delle proprietà.

Esempi di animazione

Gli esempi seguenti consentono di iniziare ad aggiungere animazione alle applicazioni.

Vedere anche

Concetti

Cenni preliminari sulle animazioni From/To/By

Cenni preliminari sulle animazioni con fotogrammi chiave

Cenni preliminari sugli storyboard

Cenni preliminari sui comportamenti temporali

Cenni preliminari sull'animazione e sul sistema di temporizzazione

Cenni preliminari sugli eventi di tempo

Guida introduttiva a Windows Presentation Foundation

Riferimenti

Timeline

Storyboard