Expand Minimize

KeyTimeType Enumeration

Represents the different types that may represent a KeyTime instance.

Namespace:  System.Windows.Media.Animation
Assembly:  PresentationCore (in PresentationCore.dll)

public enum class KeyTimeType
<object property="enumerationMemberName" .../>

Member nameDescription
UniformSpecifies that the allotted total time for an animation sequence is divided evenly amongst each of the key frames.
PercentSpecifies that each KeyTime value is expressed as a percentage of the total time allotted for a given animation sequence.
TimeSpanSpecifies that each KeyTime is expressed as a TimeSpan value relative to the BeginTime of an animation sequence.
PacedSpecifies that adjacent KeyFrames are each allotted a slice of time proportional to their length, respectively. The overall goal is to produce a length value that keeps the pace of the animation sequence constant.

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.

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.

No code example is currently available or this language may not be supported.

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

No code example is currently available or this language may not be supported.

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

No code example is currently available or this language may not be supported.

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

No code example is currently available or this language may not be supported.

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

.NET Framework

Supported in: 4, 3.5, 3.0

.NET Framework Client Profile

Supported in: 4, 3.5 SP1

Windows 7, Windows Vista SP1 or later, Windows XP SP3, Windows Server 2008 (Server Core not supported), Windows Server 2008 R2 (Server Core supported with SP1 or later), Windows Server 2003 SP2

The .NET Framework does not support all versions of every platform. For a list of the supported versions, see .NET Framework System Requirements.
Was this page helpful?
(1500 characters remaining)
Thank you for your feedback

Community Additions

ADD
Show:
© 2014 Microsoft