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>