mirror of
https://github.com/Stone-Red-Code/docs-desktop.git
synced 2026-09-05 07:56:11 +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
38 lines
3.2 KiB
Markdown
38 lines
3.2 KiB
Markdown
---
|
|
title: "How to: Animate a Rectangle Geometry by Using Key Frames"
|
|
ms.date: "03/30/2017"
|
|
dev_langs:
|
|
- "csharp"
|
|
- "vb"
|
|
helpviewer_keywords:
|
|
- "key frames [WPF], animating RectangleGeometry objects with"
|
|
- "RectangleGeometry objects [WPF], animating with key frames"
|
|
- "animation [WPF], RectangleGeometry objects with key frames"
|
|
ms.assetid: a8b45ceb-0e32-4ba1-928f-df6d30db17c6
|
|
---
|
|
# How to: Animate a Rectangle Geometry by Using Key Frames
|
|
This example shows how to animate the <xref:System.Windows.Media.RectangleGeometry.Rect%2A> property of a <xref:System.Windows.Media.RectangleGeometry> by using key frames.
|
|
|
|
## Example
|
|
The following example uses the <xref:System.Windows.Media.Animation.RectAnimationUsingKeyFrames> class to animate the <xref:System.Windows.Media.RectangleGeometry.Rect%2A> property of a <xref:System.Windows.Media.RectangleGeometry>. This animation uses three key frames in the following manner:
|
|
|
|
1. During the first two seconds, uses an instance of the <xref:System.Windows.Media.Animation.LinearRectKeyFrame> class to animate a gradual change in the position, width, and height of a rectangle. Linear key frames like <xref:System.Windows.Media.Animation.LinearRectKeyFrame> create a smooth linear transition between values.
|
|
|
|
2. During the end of the next half second, uses an instance of the <xref:System.Windows.Media.Animation.DiscreteRectKeyFrame> class to suddenly decrease the height of the rectangle. Discrete key frames like <xref:System.Windows.Media.Animation.DiscreteRectKeyFrame> create sudden changes between values, that is, the decrease in height occurs quickly and is not subtle.
|
|
|
|
3. During the final two seconds, uses an instance of the <xref:System.Windows.Media.Animation.SplineRectKeyFrame> class to change the rectangle back to its original size and position. Spline key frames like <xref:System.Windows.Media.Animation.SplineRectKeyFrame> create a variable transition between values according to the values of the <xref:System.Windows.Media.Animation.SplineRectKeyFrame.KeySpline%2A> property. In this example, the change begins slowly and speeds up exponentially toward the end of the time segment.
|
|
|
|
[!code-csharp[keyframes_snip#RectAnimationUsingKeyFramesWholePage](~/samples/snippets/csharp/VS_Snippets_Wpf/keyframes_snip/CSharp/RectAnimationUsingKeyFramesExample.cs#rectanimationusingkeyframeswholepage)]
|
|
[!code-vb[keyframes_snip#RectAnimationUsingKeyFramesWholePage](~/samples/snippets/visualbasic/VS_Snippets_Wpf/keyframes_snip/visualbasic/rectanimationusingkeyframesexample.vb#rectanimationusingkeyframeswholepage)]
|
|
[!code-xaml[keyframes_snip#RectAnimationUsingKeyFramesWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/keyframes_snip/XAML/RectAnimationUsingKeyFramesExample.xaml#rectanimationusingkeyframeswholepage)]
|
|
|
|
For the complete sample, see [KeyFrame Animation Sample](https://github.com/microsoft/WPF-Samples/tree/master/Animation/KeyFrameAnimation).
|
|
|
|
## See also
|
|
|
|
- <xref:System.Windows.Media.RectangleGeometry>
|
|
- <xref:System.Windows.Media.RectangleGeometry.Rect%2A>
|
|
- <xref:System.Windows.Media.Animation.RectAnimationUsingKeyFrames>
|
|
- [Key-Frame Animations Overview](key-frame-animations-overview.md)
|
|
- [Key-Frame How-to Topics](key-frame-animation-how-to-topics.md)
|