Questa documentazione è stata archiviata e non viene gestita.

Classe SizeAnimationUsingKeyFrames

Aggiornamento: novembre 2007

Aggiunge un'animazione al valore di una proprietà Size in un set di KeyFrames.

Spazio dei nomi:  System.Windows.Media.Animation
Assembly:  PresentationCore (in PresentationCore.dll)
XMLNS per XAML: http://schemas.microsoft.com/winfx/xaml/presentation

[ContentPropertyAttribute("KeyFrames")]
public class SizeAnimationUsingKeyFrames : SizeAnimationBase, 
	IKeyFrameAnimation, IAddChild
/** @attribute ContentPropertyAttribute("KeyFrames") */
public class SizeAnimationUsingKeyFrames extends SizeAnimationBase implements IKeyFrameAnimation, 
	IAddChild
public class SizeAnimationUsingKeyFrames extends SizeAnimationBase implements IKeyFrameAnimation, IAddChild
<SizeAnimationUsingKeyFrames>
  KeyFrames
</SizeAnimationUsingKeyFrames>

I valori di destinazione di un'animazione del fotogramma chiave sono definiti dalla relativa proprietà KeyFrames, che contiene un insieme di oggetti SizeKeyFrame. Ciascun oggetto SizeKeyFrame definisce un segmento dell'animazione con il proprio oggetto Value e KeyTime di destinazione. Quando l'animazione è in esecuzione, avanza da un valore chiave al successivo in base alle chiavi temporali specificate.

Sono disponibili tre tipi di classi SizeKeyFrame, una per ogni metodo di interpolazione supportato: LinearSizeKeyFrame, DiscreteSizeKeyFrame e SplineSizeKeyFrame.

A differenza di SizeAnimation, SizeAnimationUsingKeyFrames può disporre di più di due valori di destinazione. È anche possibile controllare il metodo di interpolazione di singoli segmenti di SizeKeyFrame.

In questo esempio viene illustrato come controllare la durata dei fotogrammi chiave all'interno di un'animazione con fotogrammi chiave. Analogamente alle altre animazioni, le animazioni con fotogrammi chiave includono una proprietà Duration. Oltre a specificare la durata di un'animazione, è necessario specificare quale parte della durata è assegnata a ognuno dei relativi fotogrammi chiave. Per assegnare il tempo, specificare un oggetto KeyTime per ogni fotogramma chiave nell'animazione.

L'oggetto KeyTime specifica quando termina ogni fotogramma chiave (non specifica la durata di riproduzione di un fotogramma chiave). È possibile specificare un oggetto KeyTime come valore TimeSpan, espresso in percentuale, o come valore speciale Uniform o Paced.

Nell'esempio seguente viene utilizzato un oggetto DoubleAnimationUsingKeyFrames per animare un rettangolo attraverso lo schermo. Le chiavi temporali dei fotogrammi chiave vengono impostate con i valori TimeSpan.

/*
   This Rectangle is animated with KeyTimes using TimeSpan Values. 
   It moves horizontally to 100 in the first 3 seconds, 100 to 300 in 
   the next second, and 300 to 500 in the last 6 seconds.
*/

// Create the a rectangle.
Rectangle aRectangle = new Rectangle();
aRectangle.Fill = Brushes.Blue;
aRectangle.Stroke = Brushes.Black;
aRectangle.StrokeThickness = 5;
aRectangle.Width = 50;
aRectangle.Height = 50;

// Create a transform to move the rectangle
// across the screen.
TranslateTransform translateTransform1 = 
    new TranslateTransform();
aRectangle.RenderTransform = translateTransform1;

// Create a DoubleAnimationUsingKeyFrames
// to animate the transform.
DoubleAnimationUsingKeyFrames transformAnimation = 
    new DoubleAnimationUsingKeyFrames();
transformAnimation.Duration = TimeSpan.FromSeconds(10);

// Animate to 100 at 3 seconds.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(100, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(3))));

// Animate to 300 at 4 seconds.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(300, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(4))));

// Animate to 500 at 10 seconds.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(500, KeyTime.FromTimeSpan(TimeSpan.FromSeconds(10))));

// Start the animation when the rectangle is loaded.
aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
{
    translateTransform1.BeginAnimation(TranslateTransform.XProperty, transformAnimation);
};



<!-- This Rectangle is animated with KeyTimes using TimeSpan Values. 
     It moves horizontally to 100 in the first 3 seconds, 100 to 300 in 
     the next second, and 300 to 500 in the last 6 seconds. -->
<Rectangle Fill="Blue" Stroke="Black" StrokeThickness="5"
  Width="50" Height="50">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform1" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform1" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10">

            <!-- These KeyTime properties are specified as TimeSpan values 
                 which are in the form of "hours:minutes:seconds". -->
            <LinearDoubleKeyFrame Value="100" KeyTime="0:0:3" />
            <LinearDoubleKeyFrame Value="300" KeyTime="0:0:4" />
            <LinearDoubleKeyFrame Value="500" KeyTime="0:0:10" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>


Nell'immagine seguente è illustrato il momento in cui viene raggiunto il valore di ogni fotogramma chiave.

I valori dei fotogrammi chiave vengono raggiunti a 3, 4 e 10 secondi

Nell'esempio successivo è illustrata un'animazione identica, tranne per il fatto che le chiavi temporali dei fotogrammi chiave vengono impostate con valori in percentuale.

/*
  This rectangle moves horizontally to 100 in the first 3 seconds, 
  100 to 300 in  the next second, and 300 to 500 in the last 6 seconds.
*/

// Create the a rectangle.
Rectangle aRectangle = new Rectangle();
aRectangle.Fill = Brushes.Purple;
aRectangle.Stroke = Brushes.Black;
aRectangle.StrokeThickness = 5;
aRectangle.Width = 50;
aRectangle.Height = 50;

// Create a transform to move the rectangle
// across the screen.
TranslateTransform translateTransform2 =
    new TranslateTransform();
aRectangle.RenderTransform = translateTransform2;

// Create a DoubleAnimationUsingKeyFrames
// to animate the transform.
DoubleAnimationUsingKeyFrames transformAnimation =
    new DoubleAnimationUsingKeyFrames();
transformAnimation.Duration = TimeSpan.FromSeconds(10);

// Animate to 100 at 30% of the animation's duration.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(100, KeyTime.FromPercent(0.3)));

// Animate to 300 at 40% of the animation's duration.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(300, KeyTime.FromPercent(0.4)));

// Animate to 500 at 100% of the animation's duration.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(500, KeyTime.FromPercent(1.0)));

// Start the animation when the rectangle is loaded.
aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
{
    translateTransform2.BeginAnimation(TranslateTransform.XProperty, transformAnimation);
};


<!-- This rectangle moves horizontally to 100 in the first 3 seconds, 
     100 to 300 in  the next second, and 300 to 500 in the last 6 seconds.-->
<Rectangle Fill="Purple" Stroke="Black" StrokeThickness="5"
  Width="50" Height="50">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform2" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform2" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10">

            <!-- KeyTime properties are expressed as Percentages. -->
            <LinearDoubleKeyFrame Value="100" KeyTime="30%" />
            <LinearDoubleKeyFrame Value="300" KeyTime="40%" />
            <LinearDoubleKeyFrame Value="500" KeyTime="100%" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>


Nell'immagine seguente è illustrato il momento in cui viene raggiunto il valore di ogni fotogramma chiave.

I valori dei fotogrammi chiave vengono raggiunti a 3, 4 e 10 secondi

Nell'esempio successivo vengono utilizzati i valori delle chiavi temporali Uniform.

/*
   This rectangle is animated with KeyTimes using Uniform values. 
   Goes to 100 in the first 3.3 seconds, 100 to
   300 in the next 3.3 seconds, 300 to 500 in the last 3.3 seconds.
*/

// Create the a rectangle.
Rectangle aRectangle = new Rectangle();
aRectangle.Fill = Brushes.Red;
aRectangle.Stroke = Brushes.Black;
aRectangle.StrokeThickness = 5;
aRectangle.Width = 50;
aRectangle.Height = 50;

// Create a transform to move the rectangle
// across the screen.
TranslateTransform translateTransform3 =
    new TranslateTransform();
aRectangle.RenderTransform = translateTransform3;

// Create a DoubleAnimationUsingKeyFrames
// to animate the transform.
DoubleAnimationUsingKeyFrames transformAnimation =
    new DoubleAnimationUsingKeyFrames();
transformAnimation.Duration = TimeSpan.FromSeconds(10);

/*
   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).
 */

// Animate to 100.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(100, KeyTime.Uniform));

// Animate to 300.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(300, KeyTime.Uniform));

// Animate to 500.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(500, KeyTime.Uniform));

// Start the animation when the rectangle is loaded.
aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
{
    translateTransform3.BeginAnimation(TranslateTransform.XProperty, transformAnimation);
};



<!-- This rectangle is animated with KeyTimes using Uniform values. 
     Goes to 100 in the first 3.3 seconds, 100 to
     300 in the next 3.3 seconds, 300 to 500 in the last 3.3 seconds. -->
<Rectangle Fill="Red" Stroke="Black" StrokeThickness="5"
  Width="50" Height="50">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform3" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform3" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10">

            <!--   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="300" KeyTime="Uniform" />
            <LinearDoubleKeyFrame Value="500" KeyTime="Uniform" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>


Nell'immagine seguente è illustrato il momento in cui viene raggiunto il valore di ogni fotogramma chiave.

I valori dei fotogrammi chiave vengono raggiunti a 3.3, 6.6 e 9.9 secondi

Nell'esempio finale vengono utilizzati i valori delle chiavi temporali Paced.

/*
   This rectangle is animated with KeyTimes using Paced Values. 
   The 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.
*/

// Create the a rectangle.
Rectangle aRectangle = new Rectangle();
aRectangle.Fill = Brushes.Orange;
aRectangle.Stroke = Brushes.Black;
aRectangle.StrokeThickness = 5;
aRectangle.Width = 50;
aRectangle.Height = 50;

// Create a transform to move the rectangle
// across the screen.
TranslateTransform translateTransform4 =
    new TranslateTransform();
aRectangle.RenderTransform = translateTransform4;

// Create a DoubleAnimationUsingKeyFrames
// to animate the transform.
DoubleAnimationUsingKeyFrames transformAnimation =
    new DoubleAnimationUsingKeyFrames();
transformAnimation.Duration = TimeSpan.FromSeconds(10);

/*
   Use Paced values 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.
 */

// Animate to 100.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(100, KeyTime.Paced));

// Animate to 300.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(300, KeyTime.Paced));

// Animate to 500.
transformAnimation.KeyFrames.Add(
    new LinearDoubleKeyFrame(500, KeyTime.Paced));

// Start the animation when the rectangle is loaded.
aRectangle.Loaded += delegate(object sender, RoutedEventArgs e)
{
    translateTransform4.BeginAnimation(TranslateTransform.XProperty, transformAnimation);
};



<!-- This rectangle is animated with KeyTimes using Paced Values. 
     The 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 Fill="Orange" Stroke="Black" StrokeThickness="5"
  Width="50" Height="50">
  <Rectangle.RenderTransform>
    <TranslateTransform x:Name="TranslateTransform4" />
  </Rectangle.RenderTransform>
  <Rectangle.Triggers>
    <EventTrigger RoutedEvent="Rectangle.Loaded">
      <BeginStoryboard>
        <Storyboard>
          <DoubleAnimationUsingKeyFrames 
            Storyboard.TargetName="TranslateTransform4" 
            Storyboard.TargetProperty="X"
            Duration="0:0:10">

            <!-- Use Paced values 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="300" KeyTime="Paced" />
            <LinearDoubleKeyFrame Value="500" KeyTime="Paced" />
          </DoubleAnimationUsingKeyFrames>
        </Storyboard>
      </BeginStoryboard>
    </EventTrigger>
  </Rectangle.Triggers>
</Rectangle>


Nell'immagine seguente è illustrato il momento in cui viene raggiunto il valore di ogni fotogramma chiave.

I valori dei fotogrammi chiave vengono raggiunti a 0, 5 e 10 secondi

Per semplicità, nelle versioni di codice di questo esempio vengono utilizzate animazioni locali, non storyboard, perché viene applicata una singola animazione a una singola proprietà, ma gli esempi potrebbero essere modificati per l'utilizzo di storyboard. Per un esempio in cui viene illustrato come dichiarare uno storyboard nel codice, vedere Procedura: animare una proprietà utilizzando uno storyboard.

Per l'esempio completo, vedere Esempio di animazione con fotogrammi chiave. Per ulteriori informazioni sulle animazioni con fotogrammi chiave, vedere Cenni preliminari sulle animazioni con fotogrammi chiave.

Qualsiasi membro static (Shared in Visual Basic) pubblico di questo tipo è thread-safe. I membri di istanza non sono garantiti come thread-safe.

Windows Vista

.NET Framework e .NET Compact Framework non supportano tutte le versioni di ciascuna piattaforma. Per un elenco delle versioni supportate, vedere Requisiti di sistema di .NET Framework.

.NET Framework

Supportato in: 3.5, 3.0
Mostra: