title | description | ms.date | dev_langs | helpviewer_keywords | ms.assetid | |||||
---|---|---|---|---|---|---|---|---|---|---|
How to: Animate a Double by Using Key Frames |
Learn how to use the DoubleAnimationUsingKeyFrames class to animate the value of a property that takes a Double by using key frames. |
03/30/2017 |
|
|
3a1a7dba-7694-4907-8a2f-3408baebfa82 |
This example shows how to animate the value of a property that takes a xref:System.Double by using key frames.
The following example moves a rectangle across a screen. The example uses the xref:System.Windows.Media.Animation.DoubleAnimationUsingKeyFrames class to animate the xref:System.Windows.Media.TranslateTransform.X%2A property of a xref:System.Windows.Media.TranslateTransform applied to a xref:System.Windows.Shapes.Rectangle. This animation, which repeats indefinitely, uses three key frames in the following manner:
-
During the first three seconds, uses an instance of the xref:System.Windows.Media.Animation.LinearDoubleKeyFrame class to move the rectangle along a path at a steady rate from its starting position to the 500 position. Linear key frames like xref:System.Windows.Media.Animation.LinearDoubleKeyFrame create a smooth linear transition between values.
-
At the end of the fourth second, uses an instance of the xref:System.Windows.Media.Animation.DiscreteDoubleKeyFrame class to suddenly move the rectangle to the next position. Discrete key frames like xref:System.Windows.Media.Animation.DiscreteDoubleKeyFrame create sudden jumps between values. In this example, the rectangle is at the starting position and then suddenly appears at the 500 position.
-
In the final two seconds, uses an instance of the xref:System.Windows.Media.Animation.SplineDoubleKeyFrame class to move the rectangle back to its starting position. Spline key frames like xref:System.Windows.Media.Animation.SplineDoubleKeyFrame create a variable transition between values according to the value of the xref:System.Windows.Media.Animation.SplineDoubleKeyFrame.KeySpline%2A property. In this example, the rectangle begins by moving slowly and then speeds up exponentially toward the end of the time segment.
[!code-csharpkeyframes_snip#AltDoubleAnimationUsingKeyFramesWholePage] [!code-vbkeyframes_snip#AltDoubleAnimationUsingKeyFramesWholePage] [!code-xamlkeyframes_snip#AltDoubleAnimationUsingKeyFramesWholePage]
For the complete sample, see KeyFrame Animation Sample.
For consistency with other animation examples, the code versions of this example use a xref:System.Windows.Media.Animation.Storyboard object to apply the xref:System.Windows.Media.Animation.DoubleAnimationUsingKeyFrames. Alternatively, when applying a single animation in code, it is simpler to use the xref:System.Windows.Media.Animation.Animatable.BeginAnimation%2A method instead of using a xref:System.Windows.Media.Animation.Storyboard. For an example, see Animate a Property Without Using a Storyboard.
- xref:System.Windows.Media.Animation.DoubleAnimationUsingKeyFrames
- xref:System.Windows.Shapes.Rectangle
- xref:System.Windows.Media.Animation.LinearDoubleKeyFrame
- xref:System.Windows.Media.Animation.DiscreteDoubleKeyFrame
- xref:System.Windows.Media.Animation.SplineDoubleKeyFrame
- Key-Frame Animations Overview
- Key-Frame How-to Topics