mirror of
https://github.com/Stone-Red-Code/docs-desktop.git
synced 2026-09-05 16:06:10 +02:00
Andy De George
da363692ff
* Reset branch for WPF changes * Convert BMP to PNG; fix link-out-of-scope err * Add snippets for WPF... 6794 files!!!! * Add missing snippets * update file updated between migration * Fix paths to include * update breadcrumb and toc * fix index links * fix index links * fix index links * fix markdown
42 lines
4.0 KiB
Markdown
42 lines
4.0 KiB
Markdown
---
|
|
title: "How to: Animate a Double by Using Key Frames"
|
|
ms.date: "03/30/2017"
|
|
dev_langs:
|
|
- "csharp"
|
|
- "vb"
|
|
helpviewer_keywords:
|
|
- "Doubles [WPF], animating with key frames"
|
|
- "animation [WPF], Doubles with key frames"
|
|
- "key frames [WPF], animating Doubles with"
|
|
ms.assetid: 3a1a7dba-7694-4907-8a2f-3408baebfa82
|
|
---
|
|
# How to: Animate a Double by Using Key Frames
|
|
This example shows how to animate the value of a property that takes a <xref:System.Double> by using key frames.
|
|
|
|
## Example
|
|
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:
|
|
|
|
1. 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.
|
|
|
|
2. 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.
|
|
|
|
3. 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-csharp[keyframes_snip#AltDoubleAnimationUsingKeyFramesWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/keyframes_snip/CSharp/AltDoubleAnimationUsingKeyFramesExample.cs#altdoubleanimationusingkeyframeswholepage)]
|
|
[!code-vb[keyframes_snip#AltDoubleAnimationUsingKeyFramesWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/keyframes_snip/visualbasic/altdoubleanimationusingkeyframesexample.vb#altdoubleanimationusingkeyframeswholepage)]
|
|
[!code-xaml[keyframes_snip#AltDoubleAnimationUsingKeyFramesWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/keyframes_snip/XAML/AltDoubleAnimationUsingKeyFramesExample.xaml#altdoubleanimationusingkeyframeswholepage)]
|
|
|
|
For the complete sample, see [KeyFrame Animation Sample](https://github.com/microsoft/WPF-Samples/tree/master/Animation/KeyFrameAnimation).
|
|
|
|
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](how-to-animate-a-property-without-using-a-storyboard.md).
|
|
|
|
## See also
|
|
|
|
- <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-animations-overview.md)
|
|
- [Key-Frame How-to Topics](key-frame-animation-how-to-topics.md)
|