WPF实现动画效果（六）之路径动画

WPF动画效果系列

WPF实现动画效果（一）之基本概念

WPF实现动画效果（二）之From/To/By 动画

WPF实现动画效果（三）之时间线（TimeLine）

WPF实现动画效果（四）之缓动函数

WPF实现动画效果（五）之关键帧动画

WPF实现动画效果（六）之路径动画

WPF实现动画效果（七）之演示图板

路径动画是一种专门用于将对象按照指定的Path移动的动画，虽然我们也可以通过控制动画的旋转和偏移实现对象的移动，但路径动画更专业，它的实现更加简洁明了。

路径动画中最常用的是MatrixAnimationUsingPath，它通常用于控制对象的MatrixTransform，一个简单的例子如下： 

<Canvas >
       <Canvas.Resources>
           <PathGeometry x:Key="path" Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
           <Storyboard x:Key="pathStoryboard" >
               <MatrixAnimationUsingPath PathGeometry="{StaticResource path}"
                                         Storyboard.TargetName="ButtonMatrixTransform"
                                         Storyboard.TargetProperty="Matrix"
                                         DoesRotateWithTangent="True"
                                         Duration="0:0:5" RepeatBehavior="Forever" >
               </MatrixAnimationUsingPath>
           </Storyboard>
       </Canvas.Resources>

<Canvas.Triggers>
           <EventTrigger RoutedEvent="Control.Loaded">
               <BeginStoryboard Storyboard="{StaticResource pathStoryboard}" />
           </EventTrigger>
       </Canvas.Triggers>

<Path Data="{StaticResource path}" Stroke="Black" StrokeThickness="1" />

<Button Width="50" Height="20" >
           <Button.RenderTransform>
               <MatrixTransform x:Name="ButtonMatrixTransform" />
           </Button.RenderTransform>
       </Button>
   </Canvas>

注意这儿有一个DoesRotateWithTangent的属性，设置上它后，对象在移动的过程中还能根据路径的坡度旋转，非常有用。

除了MatrixAnimationUsingPath外，另外还有两种路径动画：PointAnimationUsingPath和DoubleAnimationUsingPath。PointAnimationUsingPath用于靠中心点确定位置的形状，

<Canvas >
       <Canvas.Resources>
           <PathGeometry x:Key="path" Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
           <Storyboard x:Key="pathStoryboard" >
               <PointAnimationUsingPath PathGeometry="{StaticResource path}"
                                         Storyboard.TargetName="ellipse"
                                         Storyboard.TargetProperty="Center"
                                         Duration="0:0:5" RepeatBehavior="Forever" >
               </PointAnimationUsingPath>
           </Storyboard>
       </Canvas.Resources>

<Canvas.Triggers>
           <EventTrigger RoutedEvent="Control.Loaded">
               <BeginStoryboard Storyboard="{StaticResource pathStoryboard}" />
           </EventTrigger>
       </Canvas.Triggers>

<Path Data="{StaticResource path}" Stroke="Black" StrokeThickness="1" />

<Path Fill="Orange">
           <Path.Data>
               <EllipseGeometry x:Name="ellipse" Center="5,5" RadiusX="12" RadiusY="12"/>
           </Path.Data>
       </Path>
   </Canvas>

DoubleAnimationUsingPath则是通过X、Y和Angle三个属性联合实现路径的变化，一般在TranslateTransform中使用，如下就是一个简单的例子： 

<Canvas >
       <Canvas.Resources>
           <PathGeometry x:Key="path" Figures="M 10,100 C 35,0 135,0 160,100 180,190 285,200 310,100" />
           <Storyboard x:Key="pathStoryboard" >
               <DoubleAnimationUsingPath PathGeometry="{StaticResource path}"
                                         Storyboard.TargetName="translateTransform"
                                         Storyboard.TargetProperty="X"
                                         Source="X"
                                         Duration="0:0:5" RepeatBehavior="Forever" >
               </DoubleAnimationUsingPath>
               <DoubleAnimationUsingPath PathGeometry="{StaticResource path}"
                                         Storyboard.TargetName="translateTransform"
                                         Storyboard.TargetProperty="Y"
                                         Source="Y"
                                         Duration="0:0:5" RepeatBehavior="Forever" >
               </DoubleAnimationUsingPath>
           </Storyboard>
       </Canvas.Resources>

<Canvas.Triggers>
           <EventTrigger RoutedEvent="Control.Loaded">
               <BeginStoryboard Storyboard="{StaticResource pathStoryboard}" />
           </EventTrigger>
       </Canvas.Triggers>

<Path Data="{StaticResource path}" Stroke="Black" StrokeThickness="1" />

<Path Fill="Orange">
           <Path.Data>
               <EllipseGeometry x:Name="ellipse" Center="5,5" RadiusX="12" RadiusY="12"/>
           </Path.Data>
           <Path.RenderTransform>
               <TranslateTransform x:Name="translateTransform" />
           </Path.RenderTransform>
       </Path>
   </Canvas>

来源：https://www.cnblogs.com/TianFang/p/4071954.html