LinearDoubleKeyFrame示例

< StackPanel Loaded = " Start_Animation "  Background = " Red "  x:Name = " stackPanel " >
             < StackPanel.Resources >
                 < Storyboard x:Name = " colorStoryboard " >
                     < DoubleAnimationUsingKeyFrames Storyboard.TargetName = " rectangle "  Storyboard.TargetProperty = " X "
Duration = " 0:0:10 "  FillBehavior = " Stop " >
                         < LinearDoubleKeyFrame Value = " 0 "  KeyTime = " 0:0:0 " />
                         < LinearDoubleKeyFrame Value = " 350 "  KeyTime = " 0:0:2 " />
                         < LinearDoubleKeyFrame Value = " 50 "  KeyTime = " 0:0:7 " />
                         < LinearDoubleKeyFrame Value = " 200 "  KeyTime = " 0:0:8 " />
                     </ DoubleAnimationUsingKeyFrames >
                 </ Storyboard >
             </ StackPanel.Resources >
             < Rectangle Fill = " Blue "  Width = " 50 "  Height = " 50 " >
                 < Rectangle.RenderTransform >
                     < TranslateTransform x:Name = " rectangle "  X = " 0 "  Y = " 0 " />
                 </ Rectangle.RenderTransform >
             </ Rectangle >
</ StackPanel >

The first key frame immediately sets the animation's output value to 0.

The second key frame animates from 0 to 350. It starts after the first key frame ends (at time = 0 seconds) and plays for 2 seconds, ending at time = 0:0:2.

The third key frame animates from 350 to 50. It starts when the second key frame ends (at time = 2 seconds) and plays for 5 seconds, ending at time = 0:0:7.

The fourth key frame animates from 50 to 200. It starts when the third key frame ends (at time = 7 seconds) and plays for 1 second, ending at time = 0:0:8.

Because the Duration property of the animation was set to 10 seconds, the animation holds its final value for two seconds before ending at time = 0:0:10. Because the FillBehavior property is set to Stop, when the time ends the rectangle will return to its original location.