关键帧动画

<Page x:Class="关键帧动画.MainWindow"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        WindowTitle="关键帧动画">
    <Canvas>
        <Ellipse Fill="Magenta" Width="50" Height="50" Canvas.Left="10" Canvas.Top="20">
            <Ellipse.RenderTransform>
                <TranslateTransform x:Name="tt" X="0" Y="0"/>
            </Ellipse.RenderTransform>
        </Ellipse>
        <Rectangle Width="50" Height="50" Fill="Blue" Opacity="0.68" Canvas.Left="35" Canvas.Top="20" Name="MyRect"/>
        <Button Name="buttonCircleBegin" Canvas.Left="50" Canvas.Top="90">圆开始运动</Button>
        <Button Name="buttonCircleStop" Canvas.Left="130" Canvas.Top="90">圆停止运动</Button>
        <Button Name="buttonRectBegin" Canvas.Left="208" Canvas.Top="90">正方形开始运动</Button>
        <Button Name="buttonRectStop" Canvas.Left="310" Canvas.Top="90">正方形停止运动</Button>
        <Canvas.Triggers>
            <EventTrigger RoutedEvent="Button.Click" SourceName="buttonCircleBegin">
                <BeginStoryboard Name="bsb1">
                    <Storyboard>
                        <!--动画过程先按给定值，给定的时间走一遍，结束后再反向走一遍-->
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="tt"
                                                       Storyboard.TargetProperty="X" Duration="0:0:10"
                                                       AutoReverse="True" RepeatBehavior="Forever">
                            <LinearDoubleKeyFrame Value="0" KeyTime="0:0:0"/>
                            <LinearDoubleKeyFrame Value="386" KeyTime="0:0:2"/>
                            <LinearDoubleKeyFrame Value="50" KeyTime="0:0:5"/>
                            <LinearDoubleKeyFrame Value="200" KeyTime="0:0:8"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="Button.Click" SourceName="buttonCircleStop">
                <StopStoryboard BeginStoryboardName="bsb1"/>
            </EventTrigger>
            <EventTrigger RoutedEvent="Button.Click" SourceName="buttonRectBegin">
                <BeginStoryboard Name="bsb2">
                    <Storyboard>
                        <DoubleAnimation Storyboard.TargetName="MyRect" Storyboard.TargetProperty="(Canvas.Left)"
                                         From="100" To="360" Duration="0:0:10" AutoReverse="true" RepeatBehavior="Forever"/>
                        <DoubleAnimationUsingKeyFrames Storyboard.TargetName="MyRect" Storyboard.TargetProperty="(Canvas.Top)"
                                                       Duration="0:0:10" AutoReverse="True" RepeatBehavior="Forever">
                            <LinearDoubleKeyFrame Value="22" KeyTime="0:0:0"/>
                            <LinearDoubleKeyFrame Value="120" KeyTime="0:0:2"/>
                            <LinearDoubleKeyFrame Value="22" KeyTime="0:0:6"/>
                            <LinearDoubleKeyFrame Value="120" KeyTime="0:0:8"/>
                        </DoubleAnimationUsingKeyFrames>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger>
            <EventTrigger RoutedEvent="Button.Click" SourceName="buttonRectStop">
                <StopStoryboard BeginStoryboardName="bsb2"/>
            </EventTrigger>
        </Canvas.Triggers>
    </Canvas>
</Page>