Cenni preliminari sulle animazioni con fotogrammi chiave
In questo argomento vengono introdotte le animazioni con fotogrammi chiave. Le animazioni con fotogrammi chiave consentono di utilizzare più di due valori di destinazione e di controllare il metodo di interpolazione dell'animazione.
Di seguito sono elencate le diverse sezioni di questo argomento.
Prerequisiti
Utilizzo delle animazioni con fotogrammi chiave
Argomenti correlati
Prerequisiti
Per comprendere questi cenni preliminari è necessario avere acquisito familiarità con i concetti di animazione e sequenza temporale di Windows Presentation Foundation (WPF). Per un'introduzione alle animazioni, vedere Cenni preliminari sull'animazione. Consente inoltre di acquisire familiarità con le animazioni From/To/By. Per ulteriori informazioni, vedere Cenni preliminari sulle animazioni From/To/By.
Definizione di animazione con fotogrammi chiave
Analogamente a un'animazione From/To/By, un'animazione con fotogrammi chiave anima il valore di una proprietà di destinazione. Crea una transizione tra i relativi valori di destinazione sulla proprietà Duration. Tuttavia, se un'animazione From/To/by crea una transizione tra due valori, una singola animazione con fotogrammi chiave può creare transizioni tra qualsiasi numero di valori di destinazione. A differenza di un'animazione From/To/By, un'animazione con fotogrammi chiave non presenta alcuna proprietà From, To e By con la quale impostare i relativi valori di destinazione. I valori di destinazione di un'animazione con fotogrammi chiave vengono descritti utilizzando oggetti fotogrammi chiave (da qui il termine "animazione con fotogrammi chiave"). Per specificare i valori di destinazione dell'animazione, vengono creati oggetti fotogrammi chiave da aggiungere all'insieme KeyFrames dell'animazione. Quando viene eseguita l'animazione, viene creata una transizione tra i fotogrammi specificati.
Oltre a supportare più valori di destinazione, alcuni metodi basati su fotogrammi chiave supportano più metodi di interpolazione. Il metodo di interpolazione di un'animazione definisce la modalità di transizione da un valore a quello successivo. Esistono tre tipi di interpolazione: discreta, linearee spline.
Per eseguire un'animazione con fotogrammi chiave, è necessario completare i passaggi riportati di seguito.
Dichiarare l'animazione e specificare la relativa proprietà Duration, come se si trattasse di un'animazione From/To/By.
Per ogni valore di destinazione, creare un fotogramma chiave del tipo appropriato, impostarne il valore e l'oggetto KeyTime, quindi aggiungerlo all'insieme KeyFrames dell'animazione.
Associare l'animazione a una proprietà, come se si trattasse di un'animazione From/To/By. Per ulteriori informazioni sull'applicazione di un'animazione a una proprietà utilizzando uno storyboard, vedere Cenni preliminari sugli storyboard.
Nell'esempio riportato di seguito viene utilizzato un oggetto DoubleAnimationUsingKeyFrames per animare un elemento Rectangle in quattro diverse posizioni.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.KeyFrameAnimations.KeyFramesIntroduction"
WindowTitle="KeyFrame Animations">
<Border Width="400" BorderBrush="Black">
<Rectangle Fill="Blue"
Width="50" Height="50"
HorizontalAlignment="Left">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from 0 to 350, then 50,
then 200 over 10 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:10">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Border>
</Page>
Analogamente a un'animazione From/To/By, è possibile applicare un'animazione con fotogrammi chiave a una proprietà tramite uno Storyboard nel markup e nel codice oppure tramite il metodo BeginAnimation nel codice. È inoltre possibile utilizzare un'animazione con fotogrammi chiave per creare un oggetto AnimationClock e applicarlo a una o più proprietà. Per ulteriori informazioni sui diversi metodi per l'applicazione di animazioni, vedere Cenni preliminari sulle tecniche di animazione delle proprietà.
Tipi di animazione con fotogrammi chiave
Poiché le animazioni generano valori di proprietà, sono disponibili tipi di animazione diversi per tipi di proprietà diversi. Per animare una proprietà che accetta un valore Double, ad esempio la proprietà Width di un elemento, si utilizza un'animazione che produce valori Double. Per animare una proprietà che accetta un valore Point, si utilizza un'animazione che produce valori Point e così via.
Le classi di animazione con fotogrammi chiave appartengono allo spazio dei nomi System.Windows.Media.Animation e seguono la convenzione di denominazione indicata di seguito:
*<Tipo>*AnimationUsingKeyFrames
Dove <Tipo> è il tipo di valore animato dalla classe.
In WPF vengono fornite le classi di animazione con fotogrammi chiave riportate di seguito.
Tipo proprietà |
Classe di animazione From/To/By corrispondente |
Metodi di interpolazione supportati |
|---|---|---|
Discreta |
||
Discreta, lineare, spline |
||
Discreta, lineare, spline |
||
Discreta, lineare, spline |
||
Discreta, lineare, spline |
||
Discreta, lineare, spline |
||
Discreta, lineare, spline |
||
Discreta, lineare, spline |
||
Discreta |
||
Discreta |
||
Discreta, lineare, spline |
||
Discreta, lineare, spline |
||
Discreta, lineare, spline |
||
Discreta, lineare, spline |
||
Discreta, lineare, spline |
||
Discreta |
||
Discreta, lineare, spline |
||
Discreta, lineare, spline |
||
Discreta, lineare, spline |
||
Discreta, lineare, spline |
Valori di destinazione (fotogrammi chiave) e chiavi temporali
Proprio come esistono tipi diversi di animazioni con fotogrammi chiave per animare tipi di proprietà diversi, esistono anche tipi diversi di fotogramma chiave: uno per ogni tipo di valore animato e metodo di interpolazione supportato. I tipi di fotogrammi chiave seguono la convenzione di denominazione indicata di seguito:
*<Metodo di interpolazione><Tipo>*KeyFrame
Dove <Metodo di interpolazione> è il metodo di interpolazione utilizzato dal fotogramma chiave e <Tipo> è il tipo di valore animato dalla classe. Un'animazione con fotogrammi chiave che supporta tutti e tre i metodi di interpolazione fornisce tre tipi di fotogramma chiave utilizzabili. È ad esempio possibile utilizzare tre tipi di fotogramma chiave con un DoubleAnimationUsingKeyFrames: DiscreteDoubleKeyFrame, LinearDoubleKeyFramee SplineDoubleKeyFrame. (I metodi di interpolazione sono descritti in dettaglio in una sezione successiva.)
Lo scopo principale di un fotogramma chiave consiste nello specificare una proprietà KeyTime e una proprietà Value. Ogni tipo di fotogramma chiave fornisce queste due proprietà.
La proprietà Value specifica il valore di destinazione per quel fotogramma chiave.
La proprietà KeyTime specifica quando viene raggiunta la proprietà Value di un fotogramma chiave (all'interno della proprietà Durationdell'animazione).
Al suo avvio, un'animazione con fotogrammi chiave scorre i relativi fotogrammi chiave nell'ordine definito dalle proprietà KeyTime.
Se all'ora 0 non è presente alcun fotogramma chiave, viene creata una transizione tra il valore corrente della proprietà di destinazione e la proprietà Value del primo fotogramma chiave. In caso contrario, il valore di output dell'animazione diventa il valore del primo fotogramma chiave.
Viene creata una transizione tra la proprietà Value del primo e del secondo fotogramma chiave tramite il metodo di interpolazione specificato dal secondo fotogramma chiave. La transizione ha inizio in corrispondenza della proprietà KeyTime del primo fotogramma chiave e termina al raggiungimento della proprietà KeyTime del secondo fotogramma chiave.
L'animazione continua con la creazione di transizioni tra ogni fotogramma chiave successivo e quello precedente.
Viene infine creata una transizione al valore del fotogramma chiave con la chiave temporale più elevata uguale o inferiore alla proprietà Duration dell'animazione.
Se la proprietà Duration dell'animazione è Automatic oppure la relativa proprietà Duration è uguale all'ora dell'ultimo fotogramma chiave, l'animazione viene terminata. In caso contrario, se la proprietà Duration dell'animazione è maggiore della chiave temporale dell'ultimo fotogramma chiave, l'animazione mantiene il valore del fotogramma chiave finché non raggiunge la fine di Duration. Come tutte le animazioni, un'animazione con fotogrammi chiave utilizza la proprietà FillBehavior per determinare se mantiene il valore finale fino alla fine del periodo attivo. Per ulteriori informazioni, vedere Cenni preliminari sui comportamenti temporali.
Nell'esempio di codice riportato di seguito viene utilizzato l'oggetto DoubleAnimationUsingKeyFrames definito nel precedente esempio per illustrare il funzionamento delle proprietà Value e KeyTime.
Il primo fotogramma chiave imposta immediatamente il valore di output dell'animazione su 0.
Il secondo fotogramma chiave aggiunge un'animazione da 0 a 350. Viene avviato dopo la fine del primo fotogramma chiave (0 secondi), viene riprodotto per 2 secondi e quindi viene terminato alle 0:0:2.
Il terzo fotogramma chiave aggiunge un'animazione da 350 a 50. Viene avviato dopo la fine del secondo fotogramma chiave (2 secondi), viene riprodotto per 5 secondi e quindi viene terminato alle 0:0:7.
Il quarto fotogramma chiave aggiunge un'animazione da 50 a 200. Viene avviato dopo la fine del terzo fotogramma chiave (7 secondi), viene riprodotto per 1 secondo e quindi viene terminato alle 0:0:8.
Poiché la proprietà Duration dell'animazione era stata impostata su 10 secondi, l'animazione mantiene il suo valore finale per due secondi prima di terminare alle 0:0:10.
<Page xmlns="https://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="https://schemas.microsoft.com/winfx/2006/xaml"
x:Class="Microsoft.Samples.KeyFrameAnimations.KeyFramesIntroduction"
WindowTitle="KeyFrame Animations">
<Border Width="400" BorderBrush="Black">
<Rectangle Fill="Blue"
Width="50" Height="50"
HorizontalAlignment="Left">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="MyAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.MouseLeftButtonDown">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from 0 to 350, then 50,
then 200 over 10 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="MyAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:10">
<LinearDoubleKeyFrame Value="0" KeyTime="0:0:0" />
<LinearDoubleKeyFrame Value="350" KeyTime="0:0:2" />
<LinearDoubleKeyFrame Value="50" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
</Border>
</Page>
Metodi di interpolazione
Nelle sezioni precedenti si è affermato che alcune animazioni con fotogrammi chiave supportano più metodi di interpolazione. L'interpolazione di un'animazione descrive la modalità di transizione di un'animazione tra valori per tutta la sua durata. Selezionando il tipo di fotogramma chiave da utilizzare con l'animazione, è possibile definire il metodo di interpolazione per quel segmento di fotogrammi chiave. Sono disponibili tre tipi di metodi di interpolazione: lineare, discreta e spline.
Interpolazione lineare
Con l'interpolazione lineare, l'animazione avanza a una velocità costante della durata del segmento. Ad esempio, se un segmento di fotogramma chiave esegue una transizione da 0 a 10 per 5 secondi, verranno restituiti i seguenti valori alle ore specificate:
Ora |
Valore di output |
|---|---|
0 |
0 |
1 |
2 |
2 |
4 |
3 |
6 |
4 |
8 |
4.25 |
8.5 |
4.5 |
9 |
5 |
10 |
Interpolazione discreta
Con l'interpolazione discreta, la funzione di animazione passa da un valore a quello successivo senza interpolazione. Se un segmento di fotogramma chiave esegue una transizione da 0 a 10 per 5 secondi, verranno restituiti i seguenti valori alle ore specificate:
Ora |
Valore di output |
|---|---|
0 |
0 |
1 |
0 |
2 |
0 |
3 |
0 |
4 |
0 |
4.25 |
0 |
4.5 |
0 |
5 |
10 |
Si noti come l'animazione non modifichi il suo valore di output fino alla fine della durata del segmento.
L'interpolazione spline è più complessa. Verrà descritta nella sezione successiva.
Interpolazione spline
L'interpolazione spline può essere utilizzata per realizzare effetti più realistici in termini di tempo. Perché le animazioni vengono spesso utilizzate per simulare effetti riscontrabili nel mondo reale, gli sviluppatori devono poter controllare in modo accurato l'accelerazione e la decelerazione degli oggetti e modificare con precisione i segmenti temporali. I fotogrammi chiave spline consentono di utilizzare l'interpolazione spline per le animazioni. Con altri fotogrammi chiave, si specificano le proprietà Value e KeyTime. Con un fotogramma chiave spline, si specifica anche la proprietà KeySpline. Nell'esempio riportato di seguito viene illustrato un singolo fotogramma chiave spline per un oggetto DoubleAnimationUsingKeyFrames. Si noti la proprietà KeySpline: è ciò che rende diverso un fotogramma chiave spline da altri tipi di fotogrammi chiave.
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
Una curva di Bezier cubica è definita da un punto iniziale, da un punto finale e da due punti di controllo. La proprietà KeySpline di un fotogramma chiave spline definisce i due punti di controllo di una curva di Bezier che si estende da (0,0) a (1,1). Il primo punto di controllo determina il fattore di curvatura della prima parte della curva di Bezier, mentre il secondo punto di controllo stabilisce il fattore di curvatura della seconda parte. La curva risultante descrive la velocità di modifica di quel fotogramma chiave spline. Più stretta è la curva, più elevata sarà la velocità con la quale il fotogramma chiave modifica i suoi valori. Man mano che la curva diventa più larga, la velocità di modifica dei valori diminuisce.
È possibile utilizzare l'oggetto KeySpline per simulare traiettorie fisiche come una cascata d'acqua o un rimbalzo di pallone oppure applicare altri effetti di "uscita o entrata a scorrimento" per dare movimento alle animazioni. Per effetti che richiedono l'interazione dell'utente come dissolvenze sullo sfondo o riassociazione del pulsante di controllo, è possibile applicare l'interpolazione spline per aumentare o diminuire in modo specifico la velocità di modifica di un'animazione.
Nell'esempio riportato di seguito viene specificato un oggetto KeySpline di 0,1 1,0 che crea la seguente curva di Bézier.
Spline chiave con punti di controllo (0,0, 1,0) e (1,0, 0,0)
.png "Curva di Bézier")
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
Questo fotogramma chiave si anima rapidamente all'avvio, rallenta e quindi riaccelera prima della fine.
Nell'esempio riportato di seguito viene specificato un oggetto KeySpline di 0,5,0,25 0,75,1,0 che crea la seguente curva di Bézier.
Spline chiave con punti di controllo (0,25, 0,5) e (0,75, 1,0)
.png "Curva di Bézier")
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />
Poiché la curvatura del curva di Bézier cambia in modo irrilevante, questo fotogramma chiave si anima a una velocità quasi costante e rallenta leggermente verso la fine.
Nell'esempio riportato di seguito viene utilizzato un oggetto DoubleAnimationUsingKeyFrames per animare la posizione del rettangolo. Poiché DoubleAnimationUsingKeyFrames utilizza gli oggetti SplineDoubleKeyFrame, la transizione tra ogni valore di fotogramma chiave utilizza l'interpolazione spline.
<!-- This rectangle is animated using a key frame animation
with splined interpolation. -->
<Rectangle
Width="50"
Height="50"
Fill="Purple">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="SplineAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from its base value (0) to 500, then 200,
then 350 over 15 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="SplineAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:15"
RepeatBehavior="Forever">
<SplineDoubleKeyFrame Value="500" KeyTime="0:0:7" KeySpline="0.0,1.0 1.0,0.0" />
<SplineDoubleKeyFrame Value="200" KeyTime="0:0:10" KeySpline="0.0,0.0 1.0,0.0" />
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15" KeySpline="0.25,0.5 0.75,1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Poiché l'interpolazione spline può risultare di difficile comprensione, fare delle prove con le diverse impostazioni. L'esempio di animazione con spline chiave consente di modificare i valori della spline chiave e di osservarne gli effetti su un'animazione.
Utilizzo combinato dei metodi di interpolazione
È possibile utilizzare i fotogrammi chiave con tipi di interpolazione diversi in un'animazione con singolo fotogramma chiave. Quando si susseguono animazioni con due fotogrammi chiave con interpolazioni diverse, il metodo di interpolazione del secondo fotogramma chiave viene utilizzato per creare la transizione dal primo valore al secondo.
Nell'esempio riportato di seguito, viene creato un DoubleAnimationUsingKeyFrames che utilizza l'interpolazione lineare, spline e discreta.
<!-- This rectangle is animated using a key frame animation
with a combination of interpolation methods. -->
<Rectangle
Width="50"
Height="50"
Fill="Orange">
<Rectangle.RenderTransform>
<TranslateTransform
x:Name="ComboAnimatedTranslateTransform"
X="0" Y="0" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<!-- Animate the TranslateTransform's X property
from its base value (0) to 500, then 200,
then 350 over 15 seconds. -->
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="ComboAnimatedTranslateTransform"
Storyboard.TargetProperty="X"
Duration="0:0:15"
RepeatBehavior="Forever">
<DiscreteDoubleKeyFrame Value="500" KeyTime="0:0:7" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:10" />
<SplineDoubleKeyFrame Value="350" KeyTime="0:0:15"
KeySpline="0.25,0.5 0.75,1" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Ulteriori informazioni sulla durata e sulle chiavi temporali
Analogamente ad altre animazioni, le animazioni con fotogrammi chiave includono una proprietà Duration. Oltre a specificare la proprietà Duration dell'animazione, è necessario specificare quale porzione di quella durata assegnare a ciascun fotogramma chiave. A tale scopo, descrivere una proprietà KeyTime per ognuno dei fotogrammi chiave dell'animazione. La proprietà KeyTime di ciascun fotogramma chiave specifica la fine di quel fotogramma.
La proprietà KeyTime non consente di specificare la durata di riproduzione della chiave temporale. La durata di riproduzione di un fotogramma chiave è determinata dalla fine del fotogramma chiave, da quella del fotogramma precedente e dalla duranta dell'animazione. Le chiavi temporali possono essere specificate come valore temporale, come percentuale o come il valore speciale Uniform o Paced.
Nell'elenco riportato di seguito vengono descritti modi diversi di specificare le chiavi temporali.
Valori TimeSpan
È possibile utilizzare i valori TimeSpan per specificare un valore KeyTime. Il valore deve essere maggiore o uguale a 0 e inferiore o uguale alla durata dell'animazione. Nell'esempio riportato di seguito viene illustrata un'animazione con una durata di 10 secondi e quattro fotogrammi chiave le cui chiavi temporali sono specificate come valori temporali.
Il primo fotogramma chiave viene animato dal valore di base a 100 per i primi 3 secondi e viene terminato alle 0:0:03.
Il secondo fotogramma chiave aggiunge un'animazione da 100 a 200. Viene avviato dopo la fine del primo fotogramma chiave (3 secondi), viene riprodotto per 5 secondi e quindi viene terminato alle 0:0:8.
Il terzo fotogramma chiave aggiunge un'animazione da 200 a 500. Viene avviato dopo la fine del secondo fotogramma chiave (8 secondi), viene riprodotto per 1 secondo e quindi viene terminato alle 0:0:9.
Il quarto fotogramma chiave aggiunge un'animazione da 500 a 600. Viene avviato dopo la fine del terzo fotogramma chiave (9 secondi), viene riprodotto per 1 secondo e quindi viene terminato alle 0:0:10.
<!-- This rectangle is animated with KeyTimes using TimeSpan values.
Goes to 100 in the first 3 seconds, 100 to 200 in
the next 5 seconds, 300 to 500 in the next second,
and 500 to 600 in the final second. -->
<Rectangle Width="50" Height="50" Fill="Blue">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform01" X="10" Y="30" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform01"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed as TimeSpan values
which are in the form of "hours:minutes:seconds". -->
<LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
<LinearDoubleKeyFrame Value="200" KeyTime="0:0:8" />
<LinearDoubleKeyFrame Value="500" KeyTime="0:0:9" />
<LinearDoubleKeyFrame Value="600" KeyTime="0:0:10" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Valori percentuali
Un valore percentuale specifica che il fotogramma chiave viene terminato trascorso un determinato valore percentuale della proprietà Duration dell'animazione. In XAML è possibile specificare la percentuale come un numero seguito dal simbolo %. Nel codice, si utilizza il metodo FromPercent e lo si passa all'oggetto Double che indica la percentuale. Il valore deve essere maggiore o uguale a 0 e minore o uguale a 100 percento. Nell'esempio riportato di seguito viene illustrata un'animazione con una durata di 10 secondi e quattro fotogrammi chiave le cui chiavi temporali sono specificate come percentuali.
Il primo fotogramma chiave viene animato dal valore di base a 100 per i primi 3 secondi e viene terminato alle 0:0:3.
Il secondo fotogramma chiave aggiunge un'animazione da 100 a 200. Viene avviato dopo la fine del primo fotogramma chiave (3 secondi), viene riprodotto per 5 secondi e quindi viene terminato alle 0:0:8 (0,8 * 10 = 8).
Il terzo fotogramma chiave aggiunge un'animazione da 200 a 500. Viene avviato dopo la fine del secondo fotogramma chiave (8 secondi), viene riprodotto per 1 secondo e quindi viene terminato alle 0:0:9 (0,9 * 10 = 9).
Il quarto fotogramma chiave aggiunge un'animazione da 500 a 600. Viene avviato dopo la fine del terzo fotogramma chiave (9 secondi), viene riprodotto per 1 secondo e quindi viene terminato alle 0:0:10 (1 * 10 = 10).
<!-- Identical animation behavior to the previous rectangle
but using percentage values for KeyTimes rather then TimeSpan. -->
<Rectangle Height="50" Width="50" Fill="Purple">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform02" X="10" Y="110" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform02"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed as Percentages. -->
<LinearDoubleKeyFrame Value="100" KeyTime="30%" />
<LinearDoubleKeyFrame Value="200" KeyTime="80%" />
<LinearDoubleKeyFrame Value="500" KeyTime="90%" />
<LinearDoubleKeyFrame Value="600" KeyTime="100%" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Valore speciale, Uniform
Utilizzare la proprietà Uniform quando si desidera che ogni fotogramma chiave assuma la stessa quantità di tempo.
Una chiave temporale Uniform divide equamente il tempo disponibile per il numero di fotogrammi chiave per determinare la fine di ogni fotogramma chiave. Nell'esempio riportato di seguito viene illustrata un'animazione con una durata di 10 secondi e quattro fotogrammi chiave le cui chiavi temporali sono specificate come Uniform.
Il primo fotogramma chiave viene animato dal valore di base a 100 per i primi 2,5 secondi e viene terminato alle 0:0:2,5.
Il secondo fotogramma chiave aggiunge un'animazione da 100 a 200. Viene avviato dopo la fine del primo fotogramma chiave (2,5 secondi), viene riprodotto per circa 2,5 secondi e quindi viene terminato alle 0:0:5.
Il terzo fotogramma chiave aggiunge un'animazione da 200 a 500. Viene avviato dopo la fine del secondo fotogramma chiave (5 secondi), viene riprodotto per 2.5 secondi e quindi viene terminato alle 0:0:7.5.
Il quarto fotogramma chiave aggiunge un'animazione da 500 a 600. Viene avviato dopo la fine del secondo fotogramma chiave (7,5 secondi), viene riprodotto per 2,5 secondi e quindi viene terminato alle 0:0:1.
<!-- This rectangle is animated with KeyTimes using Uniform values. -->
<Rectangle Height="50" Width="50" Fill="Red">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform03" X="10" Y="190" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform03"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed with values of Uniform.
When a key time is set to "Uniform" the total allotted
time of the animation is divided evenly between key frames.
In this example, the total duration of the animation is
ten seconds and there are four key frames each of which
are set to "Uniform", therefore, the duration of each key frame
is 3.3 seconds (10/3). -->
<LinearDoubleKeyFrame Value="100" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="200" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="500" KeyTime="Uniform" />
<LinearDoubleKeyFrame Value="600" KeyTime="Uniform" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Valore speciale, Paced
Utilizzare la proprietà Paced se si desidera che l'animazione presenti una velocità costante.
Una chiave temporale Paced assegna il tempo disponibile secondo la lunghezza di ogni fotogramma chiave per determinare la durata di ogni fotogramma. In questo modo, la velocità dell'animazione rimarrà costante. Nell'esempio riportato di seguito viene illustrata un'animazione con una durata di 10 secondi e tre fotogrammi chiave le cui chiavi temporali sono specificate come Paced.
<!-- Using Paced Values. Rectangle moves between key frames at
uniform rate except for first key frame
because using a Paced value on the first KeyFrame in a
collection of frames gives a time of zero. -->
<Rectangle Height="50" Width="50" Fill="Orange">
<Rectangle.RenderTransform>
<TranslateTransform x:Name="TranslateTransform04" X="10" Y="270" />
</Rectangle.RenderTransform>
<Rectangle.Triggers>
<EventTrigger RoutedEvent="Rectangle.Loaded">
<BeginStoryboard>
<Storyboard>
<DoubleAnimationUsingKeyFrames
Storyboard.TargetName="TranslateTransform04"
Storyboard.TargetProperty="X"
Duration="0:0:10"
RepeatBehavior="Forever">
<!-- KeyTime properties are expressed with values of Paced.
Paced values are used when a constant rate is desired.
The time allocated to a key frame with a KeyTime of "Paced"
is determined by the time allocated to the other key
frames of the animation. This time is calculated to
attempt to give a "paced" or "constant velocity"
for the animation. -->
<LinearDoubleKeyFrame Value="100" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="200" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="500" KeyTime="Paced" />
<LinearDoubleKeyFrame Value="600" KeyTime="Paced" />
</DoubleAnimationUsingKeyFrames>
</Storyboard>
</BeginStoryboard>
</EventTrigger>
</Rectangle.Triggers>
</Rectangle>
Si noti che, se la chiave temporale dell'ultimo fotogramma chiave è Paced o Uniform, la chiave temporale risolta sarà impostata su 100 percento. Se il primo fotogramma chiave di un'animazione a più fotogrammi presenta il valore speciale Paced, la relativa chiave temporale risolta sarà impostata su 0. Se l'insieme di fotogrammi chiave contiene solo un singolo fotogramma chiave con valore speciale Paced, la relativa chiave temporale risolta sarà impostata su 100 percento.
Fotogrammi chiave diversi in una singola animazione con fotogrammi chiave possono utilizzare tipi di chiave temporale diversi.
Utilizzo combinato di chiavi temporali, fotogrammi chiave non in ordine
È possibile utilizzare fotogrammi chiave con tipi di KeyTime diversi nella stessa animazione. Non è necessario, ma consigliato, aggiungere i fotogrammi chiave nell'ordine nel quale devono essere riprodotti. L'animazione e il sistema di temporizzazione sono in grado di risolvere i fotogrammi chiave non in ordine. I fotogrammi chiave con chiavi temporali non valide vengono ignorati.
Nell'elenco riportato di seguito viene illustrata la procedura con la quale vengono risolte le chiavi temporali per i fotogrammi chiave di un'animazione con fotogrammi chiave.
Determinare il tempo di interpolazione totale dell'animazione, il tempo totale necessario all'animazione con fotogrammi chiave per compiere un'iterazione in avanti.
Se la proprietà Duration dell'animazione non è impostata su Automatic o Forever, il tempo di interpolazione totale è il valore della proprietà Duration dell'animazione.
In caso contrario, il tempo di interpolazione totale è il valore TimeSpanKeyTime più elevato specificato tra i relativi fotogrammi chiave, se ne esiste uno.
In caso contrario, il tempo di interpolazione totale è pari a 1 secondo.
Utilizzare il valore del tempo di interpolazione totale per risolvere i valori KeyTime Percent.
Risolvere l'ultimo fotogramma chiave, se non è stato risolto nei passaggi precedenti. Se il valore KeyTime dell'ultimo fotogramma chiave è impostato su Uniform o Paced, il relativo tempo risolto sarà uguale al tempo di interpolazione totale.
Se il valore KeyTime del primo fotogramma chiave è Paced e questa animazione ha più di un fotogramma chiave, risolvere il relativo valore KeyTime su zero; se è presente un solo fotogramma chiave e il relativo valore KeyTime è Paced, viene risolto al tempo di interpolazione totale, come descritto nel passaggio precedente.
Risolvere i valori Uniform KeyTime rimanenti: a ognuno viene assegnato una porzione uguale del tempo disponibile. Durante questo processo, i valori PacedKeyTime non risolti vengono temporaneamente considerati come valori UniformKeyTime e ottengono un tempo risolto temporaneo.
Risolvere i valori KeyTime dei fotogrammi chiave con chiavi temporali non specificate utilizzando i fotogrammi chiave dichiarati più adiacenti che presentano valori KeyTime risolti.
Risolvere i valori Paced KeyTime rimanenti. Paced KeyTime utilizzano i valori KeyTime dei fotogrammi chiave adiacenti per determinare i relativi tempi risolti. Lo scopo è quello di garantire che la velocità dell'animazione sia costante in prossimità del tempo risolto del fotogramma chiave.
Ordinare i fotogrammi chiave in base al tempo risolto (chiave primaria) e all'ordine di dichiarazione (chiave secondaria), ovvero utilizzare un ordinamento stabile in base ai valori KeyTime risolti del fototogramma chiave.
Vedere anche
Riferimenti
Concetti
Cenni preliminari sull'animazione
Cenni preliminari sugli storyboard
Cenni preliminari sui comportamenti temporali
Altre risorse
Esempio di animazione con spline chiave