WPF中基于路径的动画

WPF中有三种动画类型：线性插值、关键帧和路径动画。这三种动画都是在System.Windows.Media.Animation命名空间中，其中路径动画有三种：MatrixAnimationUsingPath、PointAnimationUsingPath、DoubleAnimationUsingPath。

以DoubleAnimationUsingPath动画类的示例代码：

<Window x:Class="TestDemo.Window1"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        Title="Window1" Height="300" Width="300">
    <Window.Resources>
        <!--路径资源-->
        <PathGeometry x:Key="path">
            <PathFigure IsClosed="False" StartPoint="140,20">
                <ArcSegment Point="140,20" Size="11,10" SweepDirection="Clockwise"></ArcSegment>
                <ArcSegment Point="140,100" Size="11,10" SweepDirection="Clockwise"></ArcSegment>
                <ArcSegment Point="140,20" Size="11,10" SweepDirection="Clockwise"></ArcSegment>
                <ArcSegment Point="140,150" Size="11,10" SweepDirection="Clockwise"></ArcSegment>
                <ArcSegment Point="140,20" Size="11,10" SweepDirection="Clockwise"></ArcSegment>
                <ArcSegment Point="140,200" Size="11,10" SweepDirection="Clockwise"></ArcSegment>
                <ArcSegment Point="140,20" Size="11,10" SweepDirection="Clockwise"></ArcSegment>
                <ArcSegment Point="140,250" Size="11,10" SweepDirection="Clockwise"></ArcSegment>
                <ArcSegment Point="140,20" Size="11,10" SweepDirection="Clockwise"></ArcSegment>
            </PathFigure>
        </PathGeometry>
    </Window.Resources>
    <!---事件触发器，窗体加载时动画开始，周期6秒，无限循环-->
    <Window.Triggers>
        <EventTrigger RoutedEvent="Window.Loaded">
            <BeginStoryboard>
                <Storyboard>
                    <DoubleAnimationUsingPath Storyboard.TargetName="image" Storyboard.TargetProperty="(Canvas.Left)"
                     PathGeometry="{StaticResource path}" Duration="0:0:6" RepeatBehavior="Forever" Source="X"/>
                    <DoubleAnimationUsingPath Storyboard.TargetName="image" Storyboard.TargetProperty="(Canvas.Top)"
                     PathGeometry="{StaticResource path}" Duration="0:0:6" RepeatBehavior="Forever" Source="Y"/>
                </Storyboard>
            </BeginStoryboard>
        </EventTrigger>
    </Window.Triggers>
    <Canvas>
        <!--动画路径-->
        <Path Stroke="Gray" Data="{StaticResource path}"></Path>
        <!--动画元素-->
        <Image Name="image" Source="G:\Mydemo\TestDemo\TestDemo\Images\timg (11).png" Width="20" />
    </Canvas>
</Window>

效果图：

图中的图片会先沿着最小的圆开始顺时针旋转到最大的圆。