Cenni preliminari sui comportamenti temporali

Articolo
10/18/2023

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

Prerequisiti

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

Tipi di sequenza temporale

Un Timeline oggetto rappresenta un segmento di tempo. Offre proprietà che consentono di specificare la lunghezza di tale 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 file multimediali. WPF fornisce i tipi seguenti Timeline .

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

Proprietà che controllano la lunghezza di una sequenza temporale

Un Timeline oggetto rappresenta un segmento di tempo e la lunghezza di una sequenza temporale può essere descritta in modi diversi. La tabella seguente definisce vari termini per descrivere la lunghezza di una sequenza temporale.

Termine	Descrizione	Proprietà
Durata semplice	Periodo di tempo impiegato da una sequenza temporale per compiere una singola iterazione in avanti.	Duration
Una ripetizione	Il tempo necessario per la riproduzione di una sequenza temporale in avanti una sola volta e, se la proprietà è true, riprodurre all'indietro AutoReverse una volta.	Duration, AutoReverse
Periodo attivo	Il tempo necessario per completare tutte le ripetizioni specificate dalla relativa RepeatBehavior proprietà richiede una sequenza temporale.	Duration, AutoReverse, RepeatBehavior

Proprietà Duration

Come accennato in precedenza, una sequenza temporale rappresenta un intervallo di tempo. La lunghezza del segmento è determinata dall'oggetto della sequenza temporale.Duration Quando una sequenza temporale raggiunge la fine della propria durata, la riproduzione viene interrotta. Se la sequenza temporale dispone di sequenze temporali figlio, anche la loro riproduzione viene interrotta. Nel caso di un'animazione, specifica Duration per quanto tempo l'animazione richiede per passare dal valore iniziale al valore finale. A volte 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 usando un valore temporale finito o i valori Automatic speciali o Forever. La durata di un'animazione deve essere risolta in un TimeSpan valore, in modo che possa passare da un valore all'altro.

Nell'esempio seguente viene illustrato un DoubleAnimation oggetto con un Duration valore di cinque secondi.

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

Le sequenze temporali dei contenitori, ad esempio Storyboard e ParallelTimeline, hanno una durata predefinita di Automatic, il che significa che terminano automaticamente quando l'ultimo figlio smette di giocare. Nell'esempio seguente viene illustrato un oggetto Storyboard il cui Duration valore viene risolto in cinque secondi, il tempo necessario per il completamento di tutti gli oggetti figlio DoubleAnimation .

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

Impostando la Duration sequenza temporale di un contenitore su un TimeSpan valore, è possibile forzare la riproduzione più lunga o più breve rispetto ai relativi oggetti figlio Timeline . Se si imposta su Duration un valore inferiore alla lunghezza degli oggetti figlio della sequenza temporale del contenitore, gli oggetti figlio Timeline Timeline smette di giocare quando la sequenza temporale del contenitore viene eseguita. Nell'esempio seguente l'oggetto Duration dell'oggetto Storyboard degli esempi precedenti viene impostato su tre secondi. Di conseguenza, il primo DoubleAnimation interrompe l'avanzamento dopo tre secondi, quando ha animato la larghezza del rettangolo di destinazione 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 RepeatBehavior proprietà di un Timeline controlla il numero di volte in cui ripete la durata semplice. Usando la RepeatBehavior proprietà , è possibile specificare quante volte viene riprodotta la sequenza temporale (un'iterazione Count) o il periodo totale di tempo che deve essere riprodotto (una ripetizione Duration). 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 richiesti. 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 seguente viene utilizzata la RepeatBehavior proprietà per eseguire un DoubleAnimation gioco per due volte la durata semplice specificando un conteggio di iterazioni.

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

Nell'esempio seguente viene utilizzata la RepeatBehavior proprietà per rendere la DoubleAnimation riproduzione per metà della durata semplice.

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

Se si imposta la RepeatBehavior proprietà di un Timeline oggetto su Forever, la Timeline ripetizione viene ripetuta fino a quando non viene arrestata in modo interattivo o dal sistema di temporizzazione. Nell'esempio seguente viene utilizzata la RepeatBehavior proprietà per rendere la DoubleAnimation riproduzione illimitata.

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

Per un altro esempio, vedere Ripetere un'animazione.

Proprietà AutoReverse

La AutoReverse proprietà specifica se un oggetto Timeline verrà riprodotto all'indietro alla fine di ogni iterazione avanti. Nell'esempio seguente viene impostata la AutoReverse proprietà di un DoubleAnimation oggetto su true. Di conseguenza, viene animata da zero a 100 e quindi 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 usa un Count valore per specificare l'oggetto RepeatBehavior di e Timeline la AutoReverse proprietà di , Timelinetrueuna singola ripetizione è costituita da un'iterazione avanti seguita da un'iterazione all'indietro. Nell'esempio seguente l'oggetto RepeatBehavior DoubleAnimation dell'esempio precedente viene impostato su un Count valore pari a due. Di conseguenza, viene DoubleAnimation riprodotto per 20 secondi: avanti per cinque secondi, indietro per cinque secondi, avanti per 5 secondi e quindi indietro 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 del contenitore include oggetti figlio Timeline , invertono quando viene eseguita la sequenza temporale del contenitore. Per altri esempi, vedere Specificare se una sequenza temporale viene automaticamente invertita o meno.

Proprietà BeginTime

La BeginTime proprietà consente di specificare all'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. Un momento di avvio di due secondi indica ad esempio 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. È anche possibile impostare il momento di avvio di una sequenza temporale su null per impedire l'avvio della sequenza temporale. In WPF si specifica null usando l'estensione di markup x:Null.

Si noti che l'ora di inizio non viene applicata ogni volta che una sequenza temporale viene ripetuta a causa dell'impostazione RepeatBehavior . Se si dovesse creare un'animazione con un BeginTime di 10 secondi e una RepeatBehavior di , ci sarebbe un ritardo di Forever10 secondi prima che l'animazione venga riprodotta per la prima volta, ma non per ogni ripetizione successiva. Se la sequenza temporale padre dell'animazione tuttavia venisse riavviata o ripetuta, verrebbe applicato il ritardo di 10 secondi.

La BeginTime proprietà è utile per sfalsare le sequenze temporali. Nell'esempio seguente viene creato un oggetto Storyboard con due oggetti figlio DoubleAnimation . La prima animazione ha un Duration valore di cinque secondi e la seconda ha un Duration valore di 3 secondi. Nell'esempio viene impostato il BeginTime valore del secondo DoubleAnimation su 5 secondi, in modo che inizi a giocare dopo la prima DoubleAnimation fine.

<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 FillBehavior proprietà specifica se si arresta o mantiene l'ultimo valore. Un'animazione con un FillBehavior valore di HoldEnd output "contiene" il valore di output: la proprietà animata mantiene l'ultimo valore dell'animazione. Un valore di Stop determina l'interruzione dell'animazione che influisce sulla relativa proprietà di destinazione al termine.

Nell'esempio seguente viene creato un oggetto Storyboard con due oggetti figlio DoubleAnimation . Entrambi DoubleAnimation gli oggetti animano l'oggetto Width di un oggetto Rectangle da 0 a 100. Gli Rectangle elementi hanno valori non animati Width di 500 [pixel indipendenti dal dispositivo].

La FillBehavior proprietà del primo DoubleAnimation è impostata su HoldEnd, il valore predefinito. Di conseguenza, la larghezza del rettangolo rimane a 100 dopo la DoubleAnimation fine.
La FillBehavior proprietà del secondo DoubleAnimation è impostata su Stop. Di conseguenza, il Width del secondo Rectangle torna a 500 dopo la DoubleAnimation fine.

<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 Timeline classe fornisce tre proprietà per specificarne la velocità:

SpeedRatio : specifica tale frequenza, rispetto al relativo padre, in cui l'ora avanza per un oggetto Timeline. I valori maggiori di uno aumentano la velocità dell'oggetto e i Timeline relativi oggetti figlio Timeline ; i valori compresi tra zero e uno lo rallentano. Un valore pari a uno indica che Timeline progredisce alla stessa velocità dell'elemento padre. L'impostazione SpeedRatio di una sequenza temporale del contenitore influisce anche su tutti gli oggetti figlio Timeline .
AccelerationRatio : specifica la percentuale di Duration sequenza temporale impiegato per accelerare. Per un esempio, vedere Procedura: Accelerare o decelerare un'animazione.
DecelerationRatio - Specifica la percentuale di Duration sequenza temporale impiegato per la decelerazione. Per un esempio, vedere Procedura: Accelerare o decelerare un'animazione.