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
5.3 KiB
title, ms.date, dev_langs, helpviewer_keywords, ms.assetid
| title | ms.date | dev_langs | helpviewer_keywords | ms.assetid | ||||
|---|---|---|---|---|---|---|---|---|
| How to: Control Key-Frame Animation Timing | 03/30/2017 |
|
|
b059216f-7d4b-4ca8-a019-bc287ee7bf16 |
How to: Control Key-Frame Animation Timing
This example shows how to control the timing of key frames within a key-frame animation. Like other animations, key-frame animations have a xref:System.Windows.Media.Animation.Timeline.Duration%2A 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 xref:System.Windows.Media.Animation.KeyTime for each key frame in the animation.
The xref:System.Windows.Media.Animation.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 xref:System.Windows.Media.Animation.KeyTime as a xref:System.TimeSpan value, as a percentage, or as the xref:System.Windows.Media.Animation.KeyTime.Uniform%2A or xref:System.Windows.Media.Animation.KeyTime.Paced%2A special value.
Example
The following example uses a xref:System.Windows.Media.Animation.DoubleAnimationUsingKeyFrames to animate a rectangle across the screen. The key frames' key times are set with xref:System.TimeSpan values.
[!code-csharpkeyframes_snip#KeyTimesTimeSpanExample] [!code-vbkeyframes_snip#KeyTimesTimeSpanExample] [!code-xamlkeyframes_snip#KeyTimesTimeSpanExample]
The following illustration shows when the value of each key frame is reached.
The next example shows an animation that is identical, except that the key frames' key times are set with percentage values.
[!code-csharpkeyframes_snip#KeyTimesPercentageExample] [!code-vbkeyframes_snip#KeyTimesPercentageExample] [!code-xamlkeyframes_snip#KeyTimesPercentageExample]
The following illustration shows when the value of each key frame is reached.
The next example uses xref:System.Windows.Media.Animation.KeyTime.Uniform%2A key time values.
[!code-csharpkeyframes_snip#KeyTimesUniformExample] [!code-vbkeyframes_snip#KeyTimesUniformExample] [!code-xamlkeyframes_snip#KeyTimesUniformExample]
The following illustration shows when the value of each key frame is reached.
The final example uses xref:System.Windows.Media.Animation.KeyTime.Paced%2A key time values.
[!code-csharpkeyframes_snip#KeyTimesPacedExample] [!code-vbkeyframes_snip#KeyTimesPacedExample] [!code-xamlkeyframes_snip#KeyTimesPacedExample]
The following illustration shows when the value of each key frame is reached.
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 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.