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
41 lines
3.0 KiB
Markdown
41 lines
3.0 KiB
Markdown
---
|
|
title: "How to: Animate an Object by Using Key Frames"
|
|
ms.date: "03/30/2017"
|
|
helpviewer_keywords:
|
|
- "animation [WPF], objects with key frames"
|
|
- "key frames [WPF], animating objects with"
|
|
ms.assetid: b1f15ba9-cac7-4cea-8699-5c6b55c05c5e
|
|
---
|
|
# How to: Animate an Object by Using Key Frames
|
|
This example shows how to animate an object, which in this example is the <xref:System.Windows.Controls.Page.Background%2A> property of a <xref:System.Windows.Controls.Page> control, by using key frames.
|
|
|
|
## Example
|
|
The following example uses the <xref:System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames> class to animate color changes for the <xref:System.Windows.Controls.Page.Background%2A> property of a <xref:System.Windows.Controls.Page> control. The example animation changes to a different background brush at regular intervals. This animation uses the <xref:System.Windows.Media.Animation.DiscreteObjectKeyFrame> class to create three different key frames. The animation uses key frames in the following manner:
|
|
|
|
1. At the end of the first second, animates an instance of the <xref:System.Windows.Media.LinearGradientBrush> class. This section of the example applies a linear gradient to the background color so that the color transitions from yellow to orange to red.
|
|
|
|
2. At the end of the next second, animates an instance of the <xref:System.Windows.Media.RadialGradientBrush> class. This section of the example applies a radial gradient to the background color so that the color transitions from white to blue to black.
|
|
|
|
3. At the end of the third second, animates an instance of the <xref:System.Windows.Media.DrawingBrush> class. This section of the example applies a checkerboard pattern to the background.
|
|
|
|
4. The animation begins again and repeats indefinitely.
|
|
|
|
> [!NOTE]
|
|
> <xref:System.Windows.Media.Animation.DiscreteObjectKeyFrame> is the only type of key frame that you can use with the <xref:System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames> class. Key frames like <xref:System.Windows.Media.Animation.DiscreteObjectKeyFrame> create sudden changes in values, that is, the color changes in this example occur suddenly.
|
|
|
|
[!code-xaml[keyframes_snip#ObjectAnimationUsingKeyFramesWholePage](~/samples/snippets/xaml/VS_Snippets_Wpf/keyframes_snip/XAML/ObjectAnimationUsingKeyFramesExample.xaml#objectanimationusingkeyframeswholepage)]
|
|
|
|
For the complete sample, see [KeyFrame Animation Sample](https://github.com/microsoft/WPF-Samples/tree/master/Animation/KeyFrameAnimation).
|
|
|
|
## See also
|
|
|
|
- <xref:System.Windows.Media.Animation.ObjectAnimationUsingKeyFrames>
|
|
- <xref:System.Windows.Controls.Page.Background%2A>
|
|
- <xref:System.Windows.Controls.Page>
|
|
- <xref:System.Windows.Media.Animation.DiscreteObjectKeyFrame>
|
|
- <xref:System.Windows.Media.LinearGradientBrush>
|
|
- <xref:System.Windows.Media.RadialGradientBrush>
|
|
- <xref:System.Windows.Media.DrawingBrush>
|
|
- [Key-Frame Animations Overview](key-frame-animations-overview.md)
|
|
- [Key-Frame How-to Topics](key-frame-animation-how-to-topics.md)
|