Cenni preliminari sui comportamenti temporali

Articolo
08/11/2011

In questo argomento vengono descritti i comportamenti temporali delle animazioni e di altri oggetti Timeline.

Prerequisiti

Per comprendere questo argomento, è necessario conoscere le funzionalità di base dell'animazione. Per ulteriori informazioni, vedere Cenni preliminari sull'animazione.

Tipi di sequenza temporale

Un oggetto Timeline rappresenta un intervallo di tempo. Fornisce proprietà che consentono di specificare la lunghezza dell'intervallo, il momento di inizio, il numero di ripetizioni, la velocità di avanzamento dell'intervallo e così via.

Le classi che ereditano dalla classe della sequenza temporale offrono funzionalità aggiuntive, ad esempio la riproduzione di animazioni e contenuti multimediali. In WPF sono disponibili forniti i seguenti tipi di oggetto Timeline.

Tipo di sequenza temporale	Descrizione
AnimationTimeline	Classe base astratta per oggetti Timeline che generano valori di output per l'animazione delle proprietà.
MediaTimeline	Genera output da un file multimediale.
ParallelTimeline	Tipo di TimelineGroup che raggruppa e controlla oggetti Timeline figlio.
Storyboard	Tipo di ParallelTimeline che fornisce informazioni di destinazione per gli oggetti Timeline che contiene.
Timeline	Classe base astratta che definisce i comportamenti temporali.
TimelineGroup	Classe astratta per oggetti Timeline che possono contenere altri oggetti Timeline.

Proprietà che controllano la lunghezza di una sequenza temporale

Un oggetto Timeline rappresenta un intervallo di tempo. La lunghezza di una sequenza temporale può essere descritta in modi diversi. Nella tabella riportata di seguito vengono definiti vari termini per la descrizione della lunghezza di una sequenza temporale.

Termine	Descrizione	Proprietà
Durata semplice	Periodo di tempo impiegato da una sequenza temporale per compiere una sola iterazione in avanti.	Duration
Una ripetizione	Periodo di tempo impiegato da una sequenza temporale per essere riprodotta una volta e, se la proprietà AutoReverse è true, per essere riprodotta una volta in senso inverso.	Duration, AutoReverse
Periodo attivo	Periodo di tempo impiegato da una sequenza temporale per completare tutte le ripetizioni specificate dalla relativa proprietà RepeatBehavior.	Duration, AutoReverse, RepeatBehavior

Proprietà Duration

Come riportato in precedenza, una sequenza temporale rappresenta un intervallo di tempo. La lunghezza di tale intervallo è determinata dalla proprietà Duration della sequenza temporale. Quando una sequenza temporale raggiunge la fine della propria durata, la riproduzione viene interrotta. Se la sequenza temporale ha sequenze temporali figlie, anche la loro riproduzione viene interrotta. Nel caso di un'animazione, la proprietà Duration specifica il tempo impiegato dall'animazione per la transizione dal valore iniziale a quello finale. In alcuni casi, la durata di una sequenza temporale è detta durata semplice, per distinguere tra la durata di una singola iterazione e il periodo di tempo totale impiegato dalla riproduzione dell'animazione, incluse le ripetizioni. È possibile specificare una durata utilizzando un valore temporale finito o il valore speciale Automatic o Forever. La durata di un'animazione deve restituire un valore TimeSpan, in modo da poter eseguire la transizione tra valori.

Nell'esempio riportato di seguito viene illustrato un oggetto DoubleAnimation con una proprietà Duration di cinque secondi.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5"  />

Le sequenze temporali del contenitore, ad esempio Storyboard e ParallelTimeline, hanno una durata predefinita di Automatic, che implica che tali sequenze temporali terminano automaticamente quando viene interrotta la riproduzione dell'ultima sequenza figlio. Nell'esempio riportato di seguito viene illustrato un oggetto Storyboard la cui proprietà Duration restituisce cinque secondi, il periodo di tempo richiesto per il completamento di tutti gli oggetti DoubleAnimation figlio.

<Storyboard >

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5"  />

  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  />

</Storyboard>

L'impostazione della proprietà Duration di una sequenza temporale contenitore su un valore TimeSpan consente di imporre una riproduzione più lunga o più breve rispetto a quella degli oggetti Timeline figlio. Se si imposta Duration su un valore inferiore alla lunghezza degli oggetti Timeline figlio della sequenza temporale contenitore, la riproduzione degli oggetti Timeline figlio viene interrotta al termine della sequenza temporale contenitore. Nell'esempio riportato di seguito viene impostata su tre secondi la proprietà Duration dell'oggetto Storyboard degli esempi precedenti. Di conseguenza, l'avanzamento del primo oggetto DoubleAnimation viene interrotto dopo tre secondi, quando è stata eseguita l'animazione della larghezza del rettangolo di destinazione per un valore pari a 60.

<Storyboard Duration="0:0:3">

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5"  />

  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  />

</Storyboard>

Proprietà RepeatBehavior

La proprietà RepeatBehavior di un oggetto Timeline determina il numero di ripetizioni della durata semplice di una sequenza temporale. Utilizzando la proprietà RepeatBehavior, è possibile specificare il numero di volte in cui la sequenza temporale viene riprodotta (proprietà Count di iterazione) oppure il periodo di tempo totale di esecuzione (proprietà Duration di ripetizione). In entrambi i casi, l'animazione viene eseguita dall'inizio alla fine per il numero di volte necessario per completare il conteggio o la durata richiesta. Per impostazione predefinita, le sequenze temporali presentano un conteggio di iterazioni pari a 1.0, il che significa che vengono riprodotte una sola volta senza ripetizioni.

Nell'esempio riportato di seguito viene utilizzata la proprietà RepeatBehavior per riprodurre due volte la durata semplice di un oggetto DoubleAnimation specificando un conteggio di iterazioni.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2x" />

Nell'esempio successivo viene utilizzata la proprietà RepeatBehavior per riprodurre l'oggetto DoubleAnimation per metà della relativa durata semplice.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="0.5x" />

L'impostazione della proprietà RepeatBehavior di un oggetto Timeline su Forever determina la ripetizione di Timeline finché non viene interrotto in modo interattivo o da parte del sistema di temporizzazione. Nell'esempio riportato di seguito viene utilizzata la proprietà RepeatBehavior per riprodurre DoubleAnimation in modo illimitato.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="Forever" />

Per un altro esempio, vedere Procedura: ripetere un'animazione.

Proprietà AutoReverse

La proprietà AutoReverse specifica se un oggetto Timeline verrà riprodotto in senso inverso alla fine di ogni iterazione in avanti. Nell'esempio riportato di seguito la proprietà AutoReverse di un oggetto DoubleAnimation viene impostata su true; di conseguenza l'oggetto viene animato da zero a 100 e, successivamente, da 100 a zero. La riproduzione ha una durata totale di 10 secondi.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  AutoReverse="True" />

Quando si utilizza un valore Count per specificare la proprietà RepeatBehavior di un oggetto Timeline e la proprietà AutoReverse di Timeline è true, una sola ripetizione è costituita da un'iterazione in avanti seguita da un'iterazione in senso inverso. Nell'esempio riportato di seguito la proprietà RepeatBehavior dell'oggetto DoubleAnimation dell'esempio precedente viene impostata su una proprietà Count pari a due. Di conseguenza, l'oggetto DoubleAnimation viene riprodotto per 20 secondi: in avanti per cinque secondi, in senso inverso per cinque secondi, nuovamente in avanti per cinque secondi, quindi in senso inverso per cinque secondi.

<DoubleAnimation 
  Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
  From="0" To="100" Duration="0:0:5" 
  RepeatBehavior="2" 
  AutoReverse="True" />

Se una sequenza temporale contenitore ha oggetti Timeline figlio, questi vengono invertiti in corrispondenza dell'inversione della sequenza temporale contenitore. Per ulteriori esempi, vedere Procedura: specificare se una sequenza temporale viene automaticamente invertita o meno.

Proprietà BeginTime

La proprietà BeginTime consente di specificare il momento di avvio di una sequenza temporale. Il momento di avvio di una sequenza temporale è relativo alla sequenza temporale padre. Un momento di avvio pari a zero secondi indica che la sequenza temporale viene avviata all'avvio della sequenza padre. Qualsiasi altro valore crea un offset tra il momento di avvio della riproduzione della sequenza temporale padre e quello della sequenza temporale figlio. Ad esempio, un momento di avvio di due secondi indica che la riproduzione della sequenza temporale viene avviata quando la sequenza temporale padre ha raggiunto un valore di due secondi. Per impostazione predefinita, il momento di avvio di tutte le sequenze temporali è pari a zero secondi. È inoltre possibile impostare il momento di avvio di una sequenza temporale su null, per impedire l'avvio della sequenza temporale. In WPF, specificare null tramite l'Estensione del markup x:Null.

Si noti che il momento di avvio non viene applicato a ogni ripetizione di una sequenza temporale a causa dell'impostazione di RepeatBehavior. Se si crea un'animazione con una proprietà BeginTime pari a 10 secondi e un oggetto RepeatBehavior di Forever, si ha un ritardo di 10 secondi prima della prima riproduzione dell'animazione, ma non a ogni successiva ripetizione. Tuttavia, se la sequenza temporale padre dell'animazione venisse riavviata o ripetuta, verrebbe applicato il ritardo di 10 secondi.

La proprietà BeginTime è utile per scaglionare le sequenze temporali. Nell'esempio riportato di seguito viene creato un oggetto Storyboard che ha due oggetti DoubleAnimation figlio. La proprietà Duration della prima animazione è pari a cinque secondi, mentre la proprietà Duration della seconda è pari a tre secondi. Nell'esempio la proprietà BeginTime del secondo oggetto DoubleAnimation viene impostata su cinque secondi, per consentire l'avvio della riproduzione alla fine di quella del primo oggetto DoubleAnimation.

<Storyboard>

  <DoubleAnimation 
    Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:5" 
    BeginTime="0:0:0" />


  <DoubleAnimation 
    Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
    From="0" To="100" Duration="0:0:3"  
    BeginTime="0:0:5" />

</Storyboard>

Proprietà FillBehavior

Quando un oggetto Timeline raggiunge la fine della durata attiva totale, la proprietà FillBehavior specifica se tale oggetto viene interrotto o se mantiene l'ultimo valore. Un'animazione con una proprietà FillBehavior pari a HoldEnd mantiene il valore di output, ovvero la proprietà animata conserva l'ultimo valore dell'animazione. Con un valore pari a Stop viene interrotto l'effetto dell'animazione sulla proprietà di destinazione al termine della riproduzione.

Nell'esempio riportato di seguito viene creato un oggetto Storyboard con due oggetti DoubleAnimation figlio. Entrambi gli oggetti DoubleAnimation animano la proprietà Width di un oggetto Rectangle da 0 a 100. Gli elementi Rectangle hanno valori Width non animati pari a 500 pixel indipendenti dal dispositivo.

La proprietà FillBehavior del primo oggetto DoubleAnimation viene impostata su HoldEnd, ovvero sul valore predefinito. Di conseguenza, la larghezza del rettangolo mantiene il valore di 100 al termine della riproduzione di DoubleAnimation.
La proprietà FillBehavior del secondo oggetto DoubleAnimation viene impostata su Stop. Di conseguenza, la proprietà Width del secondo oggetto Rectangle ritorna a 500 al termine della riproduzione di DoubleAnimation.

<Rectangle Name="MyRectangle" 
 Width="500" Height="100"
 Opacity="1" Fill="Red">
</Rectangle>

<Rectangle Name="MyOtherRectangle" 
 Width="500" Height="100"
 Opacity="1" Fill="Orange">
</Rectangle>

<Button Content="Start FillBehavior Example">
  <Button.Triggers>
    <EventTrigger RoutedEvent="Button.Click">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimation 
            Storyboard.TargetName="MyRectangle" Storyboard.TargetProperty="Width"
            From="0" To="100" Duration="0:0:5" 
            FillBehavior="HoldEnd" />
          <DoubleAnimation 
            Storyboard.TargetName="MyOtherRectangle" Storyboard.TargetProperty="Width"
            From="0" To="100" Duration="0:0:5"  
            FillBehavior="Stop" />
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Button.Triggers>
</Button>

Proprietà che controllano la velocità di una sequenza temporale

La classe Timeline fornisce tre proprietà per la specifica della velocità:

SpeedRatio: specifica la velocità, relativa alla sequenza padre, alla quale avanza il tempo per un oggetto Timeline. I valori superiori a uno aumentano la velocità di Timeline e dei relativi oggetti Timeline figlio, mentre i valori compresi tra zero e uno la rallentano. Un valore pari a uno indica che Timeline avanza alla stessa velocità della sequenza padre. L'impostazione di SpeedRatio per una sequenza temporale contenitore ha effetto anche su tutti i relativi oggetti Timeline figlio.
AccelerationRatio: specifica la percentuale di Duration impiegata da una sequenza temporale per l'accelerazione. Per un esempio, vedere Procedura: accelerare o decelerare un'animazione.
DecelerationRatio: specifica la percentuale di Duration impiegata da una sequenza temporale per la decelerazione. Per un esempio, vedere Procedura: accelerare o decelerare un'animazione.