Condividi tramite

Cenni preliminari sull'animazione

  • Articolo

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

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à IAnimatable. 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 se soddisfano 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. Nei passaggi successivi viene illustrato come creare un'animazione e applicarla alla proprietà Opacity del rettangolo.

Nell'esempio seguente viene illustrato come creare un elemento Rectangle in un oggetto StackPanel in XAML.

<StackPanel Margin="10">
    <Rectangle
        Name="MyRectangle"
        Width="100" 
        Height="100"
        Fill="Blue">
    </Rectangle>
</StackPanel>

Nell'esempio seguente viene illustrato come creare un elemento Rectangle in un oggetto StackPanel nel codice.

Dim myPanel As StackPanel = New StackPanel
myPanel.Margin = New Thickness(10)

Dim myRectangle As Rectangle = New Rectangle
myRectangle.Name = "myRectangle"
Me.RegisterName(myRectangle.Name, myRectangle)
myRectangle.Width = 100
myRectangle.Height = 100
myRectangle.Fill = Brushes.Blue

myPanel.Children.Add(myRectangle)
Me.Content = myPanel

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. Nell'esempio seguente viene illustrato come creare un oggetto DoubleAnimation in XAML.

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

    Nell'esempio seguente viene illustrato come creare un oggetto DoubleAnimation nel codice.

    Dim myDoubleAnimation As DoubleAnimation = New DoubleAnimation()
myDoubleAnimation.From = 1.0
myDoubleAnimation.To = 0.0

    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 viene illustrato come impostare Duration su cinque secondi in XAML.

    <DoubleAnimation From="1.0" To="0.0" Duration="0:0:5" />

    Nell'esempio seguente viene illustrato come impostare Duration su cinque secondi nel codice.

    myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(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. Nell'esempio seguente viene illustrato come impostare le proprietà AutoReverse e RepeatBehavior in XAML.

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

    Nell'esempio seguente viene illustrato come impostare le proprietà AutoReverse e RepeatBehavior nel codice.

    myDoubleAnimation.AutoReverse = True
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever

    myDoubleAnimation.AutoReverse = true;
myDoubleAnimation.RepeatBehavior = RepeatBehavior.Forever;

Parte 2: Creare uno storyboard

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

  1. Creare l'elemento Storyboard e aggiungere l'animazione al relativo elemento figlio. Nell'esempio seguente viene illustrato come creare Storyboard in XAML.

    Per creare Storyboard nel codice, dichiarare una variabile Storyboard a livello di classe.

    Class MainWindow

    Private myStoryboard As Storyboard

    public partial class MainWindow : Window
{
    private Storyboard myStoryboard;

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

    myStoryboard = New Storyboard()
myStoryboard.Children.Add(myDoubleAnimation)

    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. Nell'esempio seguente viene illustrato come impostare il nome di destinazione di DoubleAnimation su MyRectangle in XAML.

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

    Nell'esempio seguente viene illustrato come impostare il nome di destinazione di DoubleAnimation su MyRectangle nel codice.

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name)

    Storyboard.SetTargetName(myDoubleAnimation, myRectangle.Name);

  3. Utilizzare la proprietà associata TargetProperty per specificare la proprietà da animare. Nell'esempio seguente viene illustrato come configurare l'animazione per essere destinata alla proprietà Opacity di Rectangle in XAML.

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

    Nell'esempio seguente viene illustrato come configurare l'animazione per essere destinata alla proprietà Opacity di Rectangle nel codice.

    Storyboard.SetTargetProperty(myDoubleAnimation, New PropertyPath(Rectangle.OpacityProperty))

    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. In questa sezione viene illustrato come associare Storyboard a un trigger in XAML.

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

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

  3. 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. In questa sezione viene illustrato come associare Storyboard a un gestore dell'evento nel codice.

  1. Registrarsi per l'evento Loaded del rettangolo.

    AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

    myRectangle.Loaded += new RoutedEventHandler(myRectangleLoaded);

  2. Dichiarare il gestore eventi. Nel gestore eventi utilizzare il metodo Begin per applicare lo storyboard.

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
    myStoryboard.Begin(Me)
End Sub

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

Esempio completo

Nell'esempio seguente viene illustrato come creare un rettangolo a cui viene applicata una dissolvenza in entrata e in uscita in XAML.

<Window x:Class="WpfApplication1.MainWindow"
        xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
        Title="MainWindow" Height="350" Width="525">
    <Grid>
        <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>
    </Grid>
</Window>

Nell'esempio seguente viene illustrato come creare un rettangolo a cui viene applicata una dissolvenza in entrata e in uscita nel codice.

Imports System.Windows.Media.Animation

Class MainWindow

    Private myStoryboard As Storyboard

    Public Sub New()
        InitializeComponent()

        Dim myPanel As New StackPanel()
        myPanel.Margin = New Thickness(10)

        Dim myRectangle As New Rectangle()
        myRectangle.Name = "myRectangle"
        Me.RegisterName(myRectangle.Name, myRectangle)
        myRectangle.Width = 100
        myRectangle.Height = 100
        myRectangle.Fill = Brushes.Blue

        Dim myDoubleAnimation As 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.
        AddHandler myRectangle.Loaded, AddressOf myRectangleLoaded

        myPanel.Children.Add(myRectangle)
        Me.Content = myPanel
    End Sub

    Private Sub myRectangleLoaded(ByVal sender As Object, ByVal e As RoutedEventArgs)
        myStoryboard.Begin(Me)
    End Sub

End Class

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

namespace WpfApplication1
{
    public partial class MainWindow : Window
    {
        private Storyboard myStoryboard;

        public MainWindow()
        {
            InitializeComponent();

            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

Nessuno

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

Nessuno

StringAnimationUsingKeyFrames

Nessuno

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.

ore:minuti:secondi

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 di Duration e per la sintassi Extensible Application Markup Language (XAML) completa, vedere la struttura di 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à connesse TargetName 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 documentazione di riferimento.

  • 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'Direttiva 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>

            Dim myDoubleAnimation As New DoubleAnimation()
            myDoubleAnimation.From = 1.0
            myDoubleAnimation.To = 0.0
            myDoubleAnimation.Duration = New Duration(TimeSpan.FromSeconds(5))

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 con dati associati, 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.

Argomenti correlati

Titolo

Descrizione

Cenni preliminari sull'animazione e sul sistema di temporizzazione

Viene illustrato in che modo il sistema di temporizzazione utilizza le classi Timeline e Clock che consentono di creare animazioni.

Suggerimenti sulle animazioni

Vengono elencati suggerimenti utili per la risoluzione di problemi relativi alle animazioni, ad esempio problemi di prestazioni.

Cenni preliminari sulle animazioni personalizzate

Viene descritto come estendere il sistema dell'animazione con fotogrammi chiave, classi di animazione o callback per fotogramma.

Cenni preliminari sulle animazioni From/To/By

Viene descritto come creare un'animazione con una transizione tra due valori.

Cenni preliminari sulle animazioni con fotogrammi chiave

Viene descritto come creare un'animazione con più valori di destinazione, inclusa la possibilità di controllare il metodo di interpolazione.

Funzioni di interpolazione

Viene spiegato come applicare formule matematiche alle animazioni per ottenere un comportamento realistico, ad esempio un effetto di rimbalzo.

Panoramica sulle animazioni percorso

Viene descritto come spostare o ruotare un oggetto lungo un percorso complesso.

Cenni preliminari sulle tecniche di animazione delle proprietà

Vengono descritte le animazioni di proprietà in cui si utilizzano storyboard, animazioni locali, orologi e animazioni per fotogramma.

Cenni preliminari sugli storyboard

Viene descritto come utilizzare gli storyboard con più sequenze temporali per creare animazioni complesse.

Cenni preliminari sui comportamenti temporali

Vengono descritti i tipi e le proprietà Timeline utilizzati nelle animazioni.

Cenni preliminari sugli eventi di tempo

Vengono descritti gli eventi disponibili negli oggetti Timeline e Clock per l'esecuzione di codice in determinati punti della sequenza temporale, ad esempio inizio, pausa, ripresa, salto o interruzione.

Procedure relative all'animazione e al sistema di temporizzazione

Contiene esempi di codice per utilizzare animazioni e sequenze temporali in un'applicazione.

Procedure relative a oggetti Clock

Contiene esempi di codice per utilizzare l'oggetto Clock in un'applicazione.

Procedure relative alle animazioni con fotogrammi chiave

Contiene esempi di codice per l'utilizzo di animazioni con fotogrammi chiave in un'applicazione.

Procedure relative all'animazione percorso

Contiene esempi di codice per l'utilizzo di animazioni percorso in un'applicazione.

Riferimento

Timeline

Storyboard

BeginStoryboard

Clock

Cronologia delle modifiche

Data

Cronologia

Motivo

Ottobre 2010

Aggiunta di frammenti mancanti di Visual Basic.

Commenti e suggerimenti dei clienti.