This topic has not yet been rated - Rate this topic

KeyTime Structure

During the relative course of an animation, a KeyTime instance specifies the precise timing when a particular key frame should take place.

Namespace:  System.Windows.Media.Animation
Assembly:  PresentationCore (in PresentationCore.dll)
XMLNS for XAML: http://schemas.microsoft.com/winfx/2006/xaml/presentation, http://schemas.microsoft.com/netfx/2007/xaml/presentation
[TypeConverterAttribute(typeof(KeyTimeConverter))]
public struct KeyTime : IEquatable<KeyTime>
<object property="[days.]hours:minutes:seconds[.fractionalSeconds]"/>- or -<object property="[days.]hours:minutes"/>- or -<object property="pctValue%"/>- or -<object property="Uniform"/>- or -<object property="Paced"/>

XAML Values

days

An integer value greater than or equal to 0 that specifies the number of days spanned by this KeyTime. For more information, see the TimeSpan property.

hours

An integer value between 0 and 23 that specifies the number of hours spanned by this KeyTime. For more information, see the TimeSpan property.

minutes

An integer value between 0 and 59 that specifies the number of minutes spanned by this KeyTime. For more information, see the TimeSpan property.

seconds

A floating-point value between 0 and 59 that specifies the number of seconds spanned by this KeyTime. For more information, see the TimeSpan property.

fractionalSeconds

An integer value consisting of 1 to 7 digits that specifies fractional seconds. For more information, see the TimeSpan property.

pctValue

A floating-point value between 0 and 100, inclusive, that specifies this KeyTime as a percentage of the animation's total duration. This should be followed by the literal character %.For more information, see the Percent property.

The KeyTime type exposes the following members.

  NameDescription
Public propertyStatic memberPacedGets the Paced value which creates timing behavior resulting in an animation that interpolates at a constant rate.
Public propertyPercentGets the time when the key frame ends expressed as a percentage of the total duration of the animation.
Public propertyTimeSpanGets the time when the key frame ends expressed as a time relative to the beginning of the animation.
Public propertyTypeGets the Type value this instance represents.
Public propertyStatic memberUniformGets the Uniform value which divides the allotted time of the animation evenly between key frames.
Top
  NameDescription
Public methodEquals(KeyTime)Indicates whether this instance is equal to the specified KeyTime.
Public methodEquals(Object)Indicates whether this instance equals the specified object. (Overrides ValueType.Equals(Object).)
Public methodStatic memberEquals(KeyTime, KeyTime)Indicates whether the two specified KeyTime structures are equal.
Public methodStatic memberFromPercentCreates a new KeyTime instance, with the KeyTimeType property initialized to the value of the specified parameter.
Public methodStatic memberFromTimeSpanCreates a new KeyTime instance, with the KeyTimeType property initialized to the value of the specified parameter.
Public methodGetHashCodeReturns an integer hash code representing this instance. (Overrides ValueType.GetHashCode().)
Public methodGetTypeGets the Type of the current instance. (Inherited from Object.)
Public methodToStringReturns a string representing this KeyTime instance. (Overrides ValueType.ToString().)
Top
  NameDescription
Public operatorStatic memberEqualityOverloaded operator that compares two KeyTime structures for equality.
Public operatorStatic memberImplicit(TimeSpan to KeyTime)Overloaded operator that implicitly converts a TimeSpan to a KeyTime.
Public operatorStatic memberInequalityOverloaded operator that compares two KeyTime structures for inequality.
Top

Each key frame's KeyTime specifies when that key frame ends. It does not specify how long the key time plays. The amount of time a key frame plays is determined by when the key frame ends, when the previous key frame ended, and the animation's duration. See Key-Frame Animations Overview for more information.

A KeyTime may be expressed in several different formats, including a numeric time value, as a percentage, or as one of the special sentinel values Uniform or Paced.

This example shows how to control the timing of key frames within a key-frame animation. Like other animations, key-frame animations have a Duration property. In addition to specifying the duration of an animation, you need to specify what part of that duration is allotted to each of its key frames. To allot the time, you specify a KeyTime for each key frame in the animation.

The KeyTime for each key frame specifies when a key frame ends (it does not specify the length of time a key frame plays). You can specify a KeyTime as a TimeSpan value, as a percentage, or as the Uniform or Paced special value.

The following example uses a DoubleAnimationUsingKeyFrames to animate a rectangle across the screen. The key frames' key times are set with TimeSpan values.

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

The following illustration shows when the value of each key frame is reached.

Key values are reached at 3, 4, and 10 seconds

The next example shows an animation that is identical, except that the key frames' key times are set with percentage values.

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

The following illustration shows when the value of each key frame is reached.

Key values are reached at 3, 4, and 10 seconds

The next example uses Uniform key time values.

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

The following illustration shows when the value of each key frame is reached.

Key values are reached at 3.3,6.6, and 9.9 seconds

The final example uses Paced key time values.

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

The following illustration shows when the value of each key frame is reached.

Key values are reached at 0, 5, and 10 seconds

For simplicity, the code versions of this example use local animations, not storyboards, because only a single animation is being applied to a single property, but the examples may be modified to use storyboards instead. For an example showing how to declare a storyboard in code, see How to: Animate a Property by Using a Storyboard.

For the complete sample, see KeyFrame Animation Sample. For more information about key frame animations, see the Key-Frame Animations Overview.

More Code

How to: Animate Color by Using Key FramesThis example shows how to animate the Color of a SolidColorBrush by using key frames.
How to: Animate the Thickness of a Border by Using Key FramesThis example shows how to animate the BorderThickness property of a Border.

.NET Framework

Supported in: 4.5.1, 4.5, 4, 3.5, 3.0

.NET Framework Client Profile

Supported in: 4, 3.5 SP1

Windows Phone 8.1, Windows Phone 8, Windows 8.1, Windows Server 2012 R2, Windows 8, Windows Server 2012, Windows 7, Windows Vista SP2, Windows Server 2008 (Server Core Role not supported), Windows Server 2008 R2 (Server Core Role supported with SP1 or later; Itanium not supported)

The .NET Framework does not support all versions of every platform. For a list of the supported versions, see .NET Framework System Requirements.

Any public static (Shared in Visual Basic) members of this type are thread safe. Any instance members are not guaranteed to be thread safe.
Did you find this helpful?
(1500 characters remaining)
Thank you for your feedback
Show:
© 2014 Microsoft. All rights reserved.