关键帧动画

PathGeometry：路径几何对象，ArcSegment类 ：表示两点之间的一条椭圆弧，Size代表圆弧的X,Y轴半径，例子中Size="55,20"表示X半径为55，Y轴半径为20的椭圆。SweepDirection获取或设置一个值，该值指定是以 Clockwise[指定按顺时针（正角）方向绘制圆弧。] 方向还是以 Counterclockwise [指定按逆时针（负角）方向绘制圆弧。]方向绘制弧，使用 PathGeometry 创建形状，RepeatBehavior="Forever"：设置RepeatBehavior为永久重复，DrawImage是GDI+的Graphics类显示图像的核心方法，Geometry对象并不能作为图像独立呈现出来，因此需要呈现方式：这里是在GeometryDrawing中呈现可以作为GeometryDrawing.Geometry的参数呈现为Drawing对象，获取或设置用于绘制此 GeometryDrawing 的 Pen，Pen:用于绘制此 GeometryDrawing 的笔。 例子效果就是图标会沿着所你作出的图，根据路线沿着路线的路径跑。

 <Window.Resources>

        <PathGeometry x:Key="path">

            <PathFigure IsClosed="True">

                <ArcSegment Point="2,800" Size="15,10" SweepDirection="Clockwise"/>

                <ArcSegment Point="500,400" Size="5,5"/>

                <ArcSegment Point="400,200" Size="2,5"/>

                <ArcSegment Point="100,100" Size="9,10"/>

                <ArcSegment Point="100,100" Size="1,5"/>

            </PathFigure>

        </PathGeometry>

    </Window.Resources>

    <Window.Triggers>

        <EventTrigger RoutedEvent="Window.Loaded">

            <EventTrigger.Actions>

                <BeginStoryboard>

                    <Storyboard> 

                        <DoubleAnimationUsingPath Storyboard.TargetName="image" 

                                              Storyboard.TargetProperty="(Canvas.Left)" 

                                              PathGeometry="{StaticResource path}"

                                              Duration="0:0:0.1" RepeatBehavior="Forever" Source="X"/>

<DoubleAnimationUsingPath Storyboard.TargetName="image"

                                               Storyboard.TargetProperty="(Canvas.Top)" 

                                              PathGeometry="{StaticResource path}"

                                              Duration="0:0:0.1" RepeatBehavior="Forever" Source="Y"/>

                        

                    </Storyboard>

                </BeginStoryboard>

            </EventTrigger.Actions>

        </EventTrigger>

    </Window.Triggers>

    <Canvas>

        <Path Stroke="Purple" StrokeThickness="1" Data="{StaticResource path}" Canvas.Top="10" Canvas.Left="20"/>

        <Image Name="image" RenderTransformOrigin="-1.042,0.875">

            <Image.Source>

                <DrawingImage>

                    <DrawingImage.Drawing>

                        <GeometryDrawing Brush="Red">

                            <GeometryDrawing.Geometry>

                                <GeometryGroup>

                                    <EllipseGeometry Center="10,10" RadiusX="9" RadiusY="4"/>

                                    <EllipseGeometry Center="10,10" RadiusX="4" RadiusY="9"/>

                                    <EllipseGeometry Center="10,10" RadiusX="5" RadiusY="5"/>

                                </GeometryGroup>

                            </GeometryDrawing.Geometry>

                            <GeometryDrawing.Pen>

                                <Pen Thickness="5" Brush="Red"/>

                            </GeometryDrawing.Pen>

                        </GeometryDrawing>

                    </DrawingImage.Drawing>

                </DrawingImage>

            </Image.Source>

        </Image>

 </Canvas>原图：效果图：