关键帧动画

如果需要创建具体多个分段的动画和不规则移动的动画，这个时候可以使用关键帧动画。关键帧动画是由许多个较短的段构成的动画，每段表示动画的初始值、最终值或中间值。当运行动画时，它平滑的从一个值移动到另一个值。关键帧对象基本上多有Value属性和keyTimes属性。和其他普通动画不同Value属性的数据类型，在LinearPointKeyFrame类中 是Point类型，在DoubleKeyFrame类中是doubles类型。那么制作一个关键帧动画的方法如下：

<Window x:Class="属性样式.动画.关键帧动画"

        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"

        xmlns:d="http://schemas.microsoft.com/expression/blend/2008"

        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"

        xmlns:local="clr-namespace:属性样式.动画"

        mc:Ignorable="d"

        Title="关键帧动画" Height="300" Width="300">

    <!--窗口资源-->

    <Window.Resources>

        <!--PathGeometry:路径几何对象-->

        <PathGeometry x:Key="path">

            <!--PathFigure路径图-->

            <PathFigure IsClosed="True">

  <!--ArcSegment类:表示两点之间的一条椭圆弧。Size代表圆弧的X,Y轴半径，例子Size="55,20"表示X半径为55，Y轴半径为20的椭圆。SweepDirection获取或设置一个值，该值指定是以Clockwise[指定按顺时针（正角）方向绘制圆弧。] 方向还是以 Counterclockwise [指定按逆时针（负角）方向绘制圆-->

                <ArcSegment Point="50,300" Size="5,10" SweepDirection="Clockwise"/>

                <ArcSegment Point="100,250" Size="5,10"/>

                <ArcSegment Point="120,200" Size="5,10"/>

                <ArcSegment Point="140,150" Size="5,10"/>

                <ArcSegment Point="160,100" Size="5,10"/>

                <ArcSegment Point="180,50" Size="5,10"/>

                <ArcSegment Point="200,0" Size="5,10"/>

                <ArcSegment Point="180,10" Size="5,5"/>

                <ArcSegment Point="160,10" Size="5,10"/>

                <ArcSegment Point="140,60" Size="5,10"/>

                <ArcSegment Point="120,80" Size="5,10"/>

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

                <ArcSegment Point="80,120" Size="5,10"/>

                <ArcSegment Point="60,140" Size="5,10"/>

                <ArcSegment Point="40,160" Size="5,10"/>

                <ArcSegment Point="20,180" Size="5,10"/>

                <ArcSegment Point="10,200" Size="5,10"/>

                <ArcSegment Point="0,220" Size="5,10"/>

                <ArcSegment Point="20,240" Size="5,10"/>

                <ArcSegment Point="50,260" Size="5,10"/>

                <ArcSegment Point="70,300" Size="5,10"/>

                <ArcSegment Point="250,230" Size="5,10"/>

            </PathFigure>

        </PathGeometry>

    </Window.Resources>

    <!--窗口触发器-->

    <Window.Triggers>

        <EventTrigger RoutedEvent="Window.Loaded">

            <EventTrigger.Actions>

                <BeginStoryboard>

                    <Storyboard>

                        <!--路径动画-->

                        <!--使用 PathGeometry 创建形状-->

                        <!--RepeatBehavior="Forever"：设置RepeatBehavior为永久重复-->

                        <!--RepeatBehavior="Forever"：设置RepeatBehavior为永久重复-->

                        <DoubleAnimationUsingPath Storyboard.TargetName="image"

                               Storyboard.TargetProperty="(Canvas.Left)"

                               PathGeometry="{StaticResource path}" Duration="0:0:5"  RepeatBehavior="Forever" Source="X"/>

                        <DoubleAnimationUsingPath Storyboard.TargetName="image"

                               Storyboard.TargetProperty="(Canvas.Top)"

                               PathGeometry="{StaticResource path}" Duration="0:0:5"           RepeatBehavior="Forever" Source="Y"/>

                    </Storyboard>

                </BeginStoryboard>

            </EventTrigger.Actions>

        </EventTrigger>

    </Window.Triggers>

    <!--画布-->

    <Canvas>

        <!--Path：形状绘图路径-->

        <Path Stroke="Red" StrokeThickness="1" Data="{StaticResource path}" Canvas.Top="11.4" Canvas.Left="1.6"/>

        <Image Name="image" Canvas.Left="-4" Canvas.Top="1" RenderTransformOrigin="-2.875,1.042">

            <Image.Source>

                <!--DrawImage是GDI+的Graphics类显示图像的核心方法-->

                <DrawingImage>

                    <DrawingImage.Drawing>

                        <!--Geometry对象并不能作为图像独立呈现出来，因此需要呈现方式：

                              这里是在GeometryDrawing中呈现

                             可以作为GeometryDrawing.Geometry的参数呈现为Drawing对象-->

                  <GeometryDrawing Brush="LightSkyBlue">

                      <GeometryDrawing.Geometry>

                          <GeometryGroup>

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

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

                          </GeometryGroup>

                       </GeometryDrawing.Geometry>

                        <!--获取或设置用于绘制此 GeometryDrawing 的 Pen。-->

                         <GeometryDrawing.Pen>

                         <!--Pen:用于绘制此 GeometryDrawing 的笔。 默认值为 null。-->

                              <Pen Thickness="1" Brush="Black"/>

                           </GeometryDrawing.Pen>

                        </GeometryDrawing>

                    </DrawingImage.Drawing>

                </DrawingImage>

            </Image.Source>

        </Image>

    </Canvas>

</Window>

如下是执行的结果：

动画会随着图形方向不停的滑动，不断的循环图形