Come: Controllare la temporizzazione dell'animazione Key-Frame

Questo esempio mostra come controllare la tempistica dei fotogrammi chiave all'interno di un'animazione a fotogrammi chiave. Analogamente ad altre animazioni, le animazioni con fotogrammi chiave hanno una proprietà Duration. Oltre a specificare la durata di un'animazione, devi specificare quale parte di tale durata è assegnata a ognuno dei relativi fotogrammi chiave. Per allocare il tempo, specificare un KeyTime per ogni fotogramma chiave nell'animazione.

Il KeyTime per ogni fotogramma chiave specifica quando termina un fotogramma chiave (non specifica il periodo di riproduzione di un fotogramma chiave). È possibile specificare un KeyTime come valore TimeSpan, come percentuale o come valore speciale Uniform o Paced.

Esempio

Nell'esempio seguente viene utilizzata una DoubleAnimationUsingKeyFrames per animare un rettangolo sullo schermo. I tempi chiave dei fotogrammi chiave vengono impostati 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.
'            

            ' Create the a rectangle.
            Dim aRectangle As 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.
            Dim translateTransform1 As New TranslateTransform()
            aRectangle.RenderTransform = translateTransform1

            ' Create a DoubleAnimationUsingKeyFrames
            ' to animate the transform.
            Dim transformAnimation As 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.
            AddHandler aRectangle.Loaded, Sub(sender As Object, e As RoutedEventArgs) 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>

L'illustrazione seguente mostra il momento in cui viene raggiunto il valore di ciascun fotogramma chiave.

L'esempio seguente mostra un'animazione identica, ad eccezione del fatto che i tempi chiave dei fotogrammi chiave vengono impostati con valori percentuali.

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

            ' Create the a rectangle.
            Dim aRectangle As 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.
            Dim translateTransform2 As New TranslateTransform()
            aRectangle.RenderTransform = translateTransform2

            ' Create a DoubleAnimationUsingKeyFrames
            ' to animate the transform.
            Dim transformAnimation As 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.
            AddHandler aRectangle.Loaded, Sub(sender As Object, e As RoutedEventArgs) 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>

La figura seguente mostra quando viene raggiunto il valore di ogni fotogramma chiave.

Nell'esempio seguente vengono usati i valori chiave di tempo 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.
'            

            ' Create the a rectangle.
            Dim aRectangle As 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.
            Dim translateTransform3 As New TranslateTransform()
            aRectangle.RenderTransform = translateTransform3

            ' Create a DoubleAnimationUsingKeyFrames
            ' to animate the transform.
            Dim transformAnimation As 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.
            AddHandler aRectangle.Loaded, Sub(sender As Object, e As RoutedEventArgs) 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>

La figura seguente mostra quando il valore di ogni fotogramma chiave viene raggiunto.

Nell'esempio finale vengono utilizzati valori di tempo chiave 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.
'            

            ' Create the a rectangle.
            Dim aRectangle As 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.
            Dim translateTransform4 As New TranslateTransform()
            aRectangle.RenderTransform = translateTransform4

            ' Create a DoubleAnimationUsingKeyFrames
            ' to animate the transform.
            Dim transformAnimation As 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.
            AddHandler aRectangle.Loaded, Sub(sender As Object, e As RoutedEventArgs) 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>

L'illustrazione seguente mostra quando si raggiunge il valore di ciascun fotogramma chiave.

Per semplicità, le versioni di codice di questo esempio usano animazioni locali, non storyboard, perché viene applicata solo una singola animazione a una singola proprietà, ma gli esempi possono essere modificati per usare invece gli storyboard. Per un esempio che illustra come dichiarare uno storyboard nel codice, vedere Animare una proprietà usando uno storyboard.

Per l'esempio completo, vedere esempio di animazione basata su fotogrammi chiave. Per ulteriori informazioni sulle animazioni con fotogrammi chiave, vedere la panoramica delle animazioni Key-Frame.

Vedere anche

• Panoramica delle animazioni Key-Frame
• Panoramica dell'animazione
• Argomenti su come fare