Export (0) Print
Expand All
This topic has not yet been rated - Rate this topic

ThicknessAnimationUsingKeyFrames Class

Animates the value of a Thickness property along a set of KeyFrames.

Namespace:  System.Windows.Media.Animation
Assembly:  PresentationFramework (in PresentationFramework.dll)
XMLNS for XAML: http://schemas.microsoft.com/winfx/2006/xaml/presentation, http://schemas.microsoft.com/netfx/2007/xaml/presentation
[ContentPropertyAttribute("KeyFrames")]
public class ThicknessAnimationUsingKeyFrames : ThicknessAnimationBase, 
	IKeyFrameAnimation, IAddChild
<ThicknessAnimationUsingKeyFrames>
  KeyFrames
</ThicknessAnimationUsingKeyFrames>

The ThicknessAnimationUsingKeyFrames type exposes the following members.

  NameDescription
Public methodThicknessAnimationUsingKeyFramesInitializes a new instance of the ThicknessAnimationUsingKeyFrames class.
Top
  NameDescription
Public propertyAccelerationRatioGets or sets a value specifying the percentage of the timeline's Duration spent accelerating the passage of time from zero to its maximum rate. (Inherited from Timeline.)
Public propertyAutoReverseGets or sets a value that indicates whether the timeline plays in reverse after it completes a forward iteration. (Inherited from Timeline.)
Public propertyBeginTimeGets or sets the time at which this Timeline should begin. (Inherited from Timeline.)
Public propertyCanFreezeGets a value that indicates whether the object can be made unmodifiable. (Inherited from Freezable.)
Public propertyDecelerationRatioGets or sets a value specifying the percentage of the timeline's Duration spent decelerating the passage of time from its maximum rate to zero. (Inherited from Timeline.)
Public propertyDependencyObjectTypeGets the DependencyObjectType that wraps the CLR type of this instance.  (Inherited from DependencyObject.)
Public propertyDispatcherGets the Dispatcher this DispatcherObject is associated with. (Inherited from DispatcherObject.)
Public propertyDurationGets or sets the length of time for which this timeline plays, not counting repetitions. (Inherited from Timeline.)
Public propertyFillBehaviorGets or sets a value that specifies how the Timeline behaves after it reaches the end of its active period. (Inherited from Timeline.)
Public propertyHasAnimatedPropertiesGets a value that indicates whether one or more AnimationClock objects is associated with any of this object's dependency properties. (Inherited from Animatable.)
Public propertyIsAdditiveGets a value that specifies whether the animation's output value is added to the base value of the property being animated.
Public propertyIsCumulativeGets or sets a value that specifies whether the animation's value accumulates when it repeats.
Public propertyIsDestinationDefaultGets a value that indicates whether this animation uses the defaultDestinationValue parameter of the GetCurrentValue method as its destination value. (Inherited from AnimationTimeline.)
Public propertyIsFrozenGets a value that indicates whether the object is currently modifiable. (Inherited from Freezable.)
Public propertyIsSealedGets a value that indicates whether this instance is currently sealed (read-only). (Inherited from DependencyObject.)
Public propertyKeyFrames Gets or sets the collection of ThicknessKeyFrame objects that define the animation.
Public propertyName Gets or sets the name of this Timeline. (Inherited from Timeline.)
Public propertyRepeatBehaviorGets or sets the repeating behavior of this timeline. (Inherited from Timeline.)
Public propertySpeedRatioGets or sets the rate, relative to its parent, at which time progresses for this Timeline. (Inherited from Timeline.)
Public propertyTargetPropertyTypeGets the type of value this animation generates. (Inherited from ThicknessAnimationBase.)
Top
  NameDescription
Protected methodAddChildAdds a child ThicknessKeyFrame to this ThicknessAnimationUsingKeyFrames.
Protected methodAddTextAdds a text string as a child of this ThicknessAnimationUsingKeyFrames.
Protected methodAllocateClockCreates a Clock for this AnimationTimeline. (Inherited from AnimationTimeline.)
Public methodApplyAnimationClock(DependencyProperty, AnimationClock)Applies an AnimationClock to the specified DependencyProperty. If the property is already animated, the SnapshotAndReplace handoff behavior is used. (Inherited from Animatable.)
Public methodApplyAnimationClock(DependencyProperty, AnimationClock, HandoffBehavior)Applies an AnimationClock to the specified DependencyProperty. If the property is already animated, the specified HandoffBehavior is used. (Inherited from Animatable.)
Public methodBeginAnimation(DependencyProperty, AnimationTimeline)Applies an animation to the specified DependencyProperty. The animation is started when the next frame is rendered. If the specified property is already animated, the SnapshotAndReplace handoff behavior is used. (Inherited from Animatable.)
Public methodBeginAnimation(DependencyProperty, AnimationTimeline, HandoffBehavior)Applies an animation to the specified DependencyProperty. The animation is started when the next frame is rendered. If the specified property is already animated, the specified HandoffBehavior is used. (Inherited from Animatable.)
Public methodCheckAccessDetermines whether the calling thread has access to this DispatcherObject. (Inherited from DispatcherObject.)
Public methodClearValue(DependencyProperty)Clears the local value of a property. The property to be cleared is specified by a DependencyProperty identifier. (Inherited from DependencyObject.)
Public methodClearValue(DependencyPropertyKey)Clears the local value of a read-only property. The property to be cleared is specified by a DependencyPropertyKey. (Inherited from DependencyObject.)
Public methodCloneCreates a modifiable clone of this ThicknessAnimationUsingKeyFrames, making deep copies of this object's values. When copying dependency properties, this method copies resource references and data bindings (but they might no longer resolve) but not animations or their current values.
Protected methodCloneCoreMakes this instance a deep copy of the specified ThicknessAnimationUsingKeyFrames. When copying dependency properties, this method copies resource references and data bindings (but they might no longer resolve) but not animations or their current values. (Overrides Freezable.CloneCore(Freezable).)
Public methodCloneCurrentValueCreates a modifiable clone of this ThicknessAnimationUsingKeyFrames object, making deep copies of this object's current values. Resource references, data bindings, and animations are not copied, but their current values are.
Protected methodCloneCurrentValueCoreMakes this instance a modifiable deep copy of the specified ThicknessAnimationUsingKeyFrames using current property values. Resource references, data bindings, and animations are not copied, but their current values are. (Overrides Freezable.CloneCurrentValueCore(Freezable).)
Public methodCoerceValueCoerces the value of the specified dependency property. This is accomplished by invoking any CoerceValueCallback function specified in property metadata for the dependency property as it exists on the calling DependencyObject. (Inherited from DependencyObject.)
Public methodCreateClock()Creates a new AnimationClock from this AnimationTimeline. (Inherited from AnimationTimeline.)
Public methodCreateClock(Boolean)Creates a new Clock from this Timeline and specifies whether the new Clock is controllable. If this Timeline has children, a tree of clocks is created with this Timeline as the root. (Inherited from Timeline.)
Protected methodCreateInstanceInitializes a new instance of the Freezable class. (Inherited from Freezable.)
Protected methodCreateInstanceCoreCreates a new instance of ThicknessAnimationUsingKeyFrames. (Overrides Freezable.CreateInstanceCore().)
Public methodEqualsDetermines whether a provided DependencyObject is equivalent to the current DependencyObject. (Inherited from DependencyObject.)
Protected methodFinalizeAllows an object to try to free resources and perform other cleanup operations before it is reclaimed by garbage collection. (Inherited from Object.)
Public methodFreeze()Makes the current object unmodifiable and sets its IsFrozen property to true. (Inherited from Freezable.)
Protected methodFreezeCoreMakes this instance of ThicknessAnimationUsingKeyFrames object unmodifiable or determines whether it can be made unmodifiable.. (Overrides Timeline.FreezeCore(Boolean).)
Public methodGetAnimationBaseValueReturns the non-animated value of the specified DependencyProperty. (Inherited from Animatable.)
Public methodGetAsFrozenCreates a frozen copy of the Freezable, using base (non-animated) property values. Because the copy is frozen, any frozen sub-objects are copied by reference. (Inherited from Freezable.)
Protected methodGetAsFrozenCoreMakes this instance a clone of the specified ThicknessAnimationUsingKeyFrames object. (Overrides Timeline.GetAsFrozenCore(Freezable).)
Public methodGetCurrentValue(Object, Object, AnimationClock)Gets the current value of the animation. (Inherited from ThicknessAnimationBase.)
Public methodGetCurrentValue(Thickness, Thickness, AnimationClock)Gets the current value of the animation. (Inherited from ThicknessAnimationBase.)
Public methodGetCurrentValueAsFrozenCreates a frozen copy of the Freezable using current property values. Because the copy is frozen, any frozen sub-objects are copied by reference. (Inherited from Freezable.)
Protected methodGetCurrentValueAsFrozenCoreMakes this instance a frozen clone of the specified ThicknessAnimationUsingKeyFrames. Resource references, data bindings, and animations are not copied, but their current values are. (Overrides Timeline.GetCurrentValueAsFrozenCore(Freezable).)
Protected methodGetCurrentValueCore Calculates a value that represents the current value of the property being animated, as determined by this instance of ThicknessAnimationUsingKeyFrames. (Overrides ThicknessAnimationBase.GetCurrentValueCore(Thickness, Thickness, AnimationClock).)
Public methodGetHashCodeGets a hash code for this DependencyObject. (Inherited from DependencyObject.)
Public methodGetLocalValueEnumeratorCreates a specialized enumerator for determining which dependency properties have locally set values on this DependencyObject. (Inherited from DependencyObject.)
Protected methodGetNaturalDurationReturns the length of a single iteration of this Timeline. (Inherited from Timeline.)
Protected methodGetNaturalDurationCoreProvide a custom natural Duration when the Duration property is set to Automatic. (Overrides AnimationTimeline.GetNaturalDurationCore(Clock).)
Public methodGetTypeGets the Type of the current instance. (Inherited from Object.)
Public methodGetValueReturns the current effective value of a dependency property on this instance of a DependencyObject. (Inherited from DependencyObject.)
Public methodInvalidatePropertyRe-evaluates the effective value for the specified dependency property (Inherited from DependencyObject.)
Protected methodMemberwiseCloneCreates a shallow copy of the current Object. (Inherited from Object.)
Protected methodOnChangedCalled when the current ThicknessAnimationUsingKeyFrames object is modified. (Overrides Freezable.OnChanged().)
Protected methodOnFreezablePropertyChanged(DependencyObject, DependencyObject)Ensures that appropriate context pointers are established for a DependencyObjectType data member that has just been set. (Inherited from Freezable.)
Protected methodOnFreezablePropertyChanged(DependencyObject, DependencyObject, DependencyProperty)This member supports the Windows Presentation Foundation (WPF) infrastructure and is not intended to be used directly from your code. (Inherited from Freezable.)
Protected methodOnPropertyChangedOverrides the DependencyObject implementation of OnPropertyChanged to also invoke any Changed handlers in response to a changing dependency property of type Freezable. (Inherited from Freezable.)
Public methodReadLocalValueReturns the local value of a dependency property, if it exists. (Inherited from DependencyObject.)
Protected methodReadPreambleEnsures that the Freezable is being accessed from a valid thread. Inheritors of Freezable must call this method at the beginning of any API that reads data members that are not dependency properties. (Inherited from Freezable.)
Public methodSetCurrentValueSets the value of a dependency property without changing its value source. (Inherited from DependencyObject.)
Public methodSetValue(DependencyProperty, Object)Sets the local value of a dependency property, specified by its dependency property identifier. (Inherited from DependencyObject.)
Public methodSetValue(DependencyPropertyKey, Object)Sets the local value of a read-only dependency property, specified by the DependencyPropertyKey identifier of the dependency property. (Inherited from DependencyObject.)
Public methodShouldSerializeKeyFramesReturns true if the value of the KeyFrames property of this instance of ThicknessAnimationUsingKeyFrames should be value-serialized.
Protected methodShouldSerializePropertyReturns a value that indicates whether serialization processes should serialize the value for the provided dependency property. (Inherited from DependencyObject.)
Public methodToStringReturns a string that represents the current object. (Inherited from Object.)
Public methodVerifyAccessEnforces that the calling thread has access to this DispatcherObject. (Inherited from DispatcherObject.)
Protected methodWritePostscriptRaises the Changed event for the Freezable and invokes its OnChanged method. Classes that derive from Freezable should call this method at the end of any API that modifies class members that are not stored as dependency properties. (Inherited from Freezable.)
Protected methodWritePreambleVerifies that the Freezable is not frozen and that it is being accessed from a valid threading context. Freezable inheritors should call this method at the beginning of any API that writes to data members that are not dependency properties. (Inherited from Freezable.)
Top
  NameDescription
Public eventChangedOccurs when the Freezable or an object it contains is modified. (Inherited from Freezable.)
Public eventCompletedOccurs when this timeline has completely finished playing: it will no longer enter its active period. (Inherited from Timeline.)
Public eventCurrentGlobalSpeedInvalidatedOccurs when the rate at which time progresses for the timeline's clock changes. (Inherited from Timeline.)
Public eventCurrentStateInvalidatedOccurs when the CurrentState property of the timeline's Clock is updated. (Inherited from Timeline.)
Public eventCurrentTimeInvalidatedOccurs when the CurrentTime property of the timeline's Clock is updated. (Inherited from Timeline.)
Public eventRemoveRequestedOccurs when the clock created for this timeline or one of its parent timelines is removed. (Inherited from Timeline.)
Top
  NameDescription
Explicit interface implemetationPrivate methodIAddChild.AddChildAdds a child object.
Explicit interface implemetationPrivate methodIAddChild.AddTextAdds the text content of a node to the object.
Explicit interface implemetationPrivate propertyIKeyFrameAnimation.KeyFramesGets or sets an ordered collection P:System.Windows.Media.Animation.IKeyFrameAnimation.KeyFrames associated with this animation sequence.
Top

A key frame animation's target values are defined by its KeyFrames property, which contains a collection of ThicknessKeyFrame objects. Each ThicknessKeyFrame defines a segment of the animation with its own target Value and KeyTime. When the animation runs, it progresses from one key value to the next at the specified key times.

There are three types of ThicknessKeyFrame classes, one for each supported interpolation method: LinearThicknessKeyFrame, DiscreteThicknessKeyFrame, and SplineThicknessKeyFrame.

Unlike a ThicknessAnimation, a ThicknessAnimationUsingKeyFrames can have more than two of target values. You can also control the interpolation method of individual ThicknessKeyFrame segments.

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.

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

Community Additions

ADD
Show:
© 2014 Microsoft. All rights reserved.