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.